/* ============================================================
   Datafluvia — the auth surface.

   One composition for every door in the product: tenant sign-in, tenant
   sign-up, password reset, and the platform team's Entra ID door. A full-bleed
   diptych — navy brand pane on the left, form column on the right — not a small
   card floating on an empty canvas, which is the single most generic thing a
   sign-in page can be.

   Geometry rules that are deliberate, not accidental:
     - The panes carry NO radius and no shadow. The split runs to the viewport
       edges; only the *controls* inside it are rounded, at the design pack's
       own floor (--dp-radius-control, 14px — "Her component/alan/buton en az
       14 px radius", F01/F02 revizyon 02).
     - Inputs are 44px tall on desktop; buttons and tabs stay 52px, so the
       submit still reads as the heavier target at the foot of the column.
       On mobile every control lifts to 48px for the touch target.
     - Every colour resolves through a --df-* token from Css/Datafluvia/Tokens.css.
       There is not a hex in this file, on purpose: a raw colour here would not
       follow the theme. Geometry (radius, shadow) reads the pack's own --dp-*
       tokens instead — the same split `DesignPack/Foundation/Tokens.css`
       documents: colour is ours, geometry is the pack's.

   Specificity note: Public.css wraps its `h1/h2/h3/p` and link resets in
   `:where()`, so they carry zero specificity and a single-class rule here wins
   cleanly. The `.auth-panel .auth-*` pairs below are for readability, not to
   beat a reset.
   ============================================================ */

/* ============================================================
   The split
   ============================================================ */
.pub-shell.auth-split {
  /* Containing block for the panes' own atmosphere layers. */
  position: relative;
  display: grid;
  /* Half and half. It was 42 / 58; an even split is the explicit call, and it
     is the better one here — the brand pane now carries a diagram as well as a
     statement, so it wants the same room the form does. minmax(0, …) rather
     than a bare fraction so a long unbroken word (a company name, a German
     label) can never push a track past its share and scroll the page
     sideways. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  /* svh keeps both panes honest under mobile browser chrome. */
  min-height: 100svh;
  overflow-x: clip;
}
/* `clip` not `hidden`: hidden on the body would create a scroll container and
   break `position: sticky` elsewhere on the page. */
body:has(.auth-split) { overflow-x: clip; }

/* ============================================================
   Pane 1 — the brand
   ============================================================
   THE COLOUR RULE, and it is the point of this pane.

   The diptych always has ONE light half and ONE dark half. The theme decides
   which side is which, and nothing else about the composition moves:

     light theme -> brand pane deep navy   | form column light
     dark  theme -> brand pane light paper | form column deep navy

   That is why every colour in this pane resolves through a local --ab-* set
   declared right here rather than through --df-band-* or --df-canvas. Those
   are semantic tokens: they follow the theme, and a pane that has to be light
   in the DARK theme cannot ask them anything. The set below is declared twice
   — once for the navy ground, once for the paper ground — and every rule from
   here to the foot reads it. Flipping the pane is therefore one block, not
   thirty overrides, and the diagram, the icon tiles, the type and the
   hairlines can never end up half-flipped.

   The values themselves are still tokens: raw ramp rungs (--df-navy-*,
   --df-slate-*, --df-indigo-*) which are declared once in :root and do NOT
   flip. There is no hex in this file. */
.auth-brand {
  /* ---- ground ---- */
  --ab-bg: var(--df-navy-990);
  --ab-elev: color-mix(in srgb, var(--df-navy-800) 92%, transparent);
  --ab-elev-2: color-mix(in srgb, var(--df-navy-950) 66%, transparent);
  --ab-edge: color-mix(in srgb, var(--df-indigo-500) 26%, transparent);
  --ab-shadow: none;
  /* ---- ink ---- */
  --ab-ink: var(--df-band-ink);
  --ab-ink-body: var(--df-navy-200);
  --ab-ink-muted: var(--df-navy-300);
  --ab-quiet: color-mix(in srgb, var(--df-band-ink) 40%, transparent);
  /* ---- accents ---- */
  --ab-accent: var(--df-indigo-300);
  --ab-mark: var(--df-band-ink);
  --ab-teal: var(--df-teal-400);
  --ab-tile-from: color-mix(in srgb, var(--df-indigo-600) 44%, transparent);
  --ab-tile-to: color-mix(in srgb, var(--df-indigo-800) 26%, transparent);
  --ab-tile-edge: color-mix(in srgb, var(--df-indigo-500) 30%, transparent);
  /* ---- the diagram's own rungs ---- */
  --ab-wire: color-mix(in srgb, var(--df-indigo-500) 42%, transparent);
  --ab-wire-lit: var(--df-indigo-300);
  --ab-core-from: color-mix(in srgb, var(--df-navy-800) 90%, transparent);
  --ab-core-to: color-mix(in srgb, var(--df-indigo-800) 62%, transparent);
  --ab-core-edge: color-mix(in srgb, var(--df-indigo-500) 46%, transparent);
  --ab-glow: 0 0 38px color-mix(in srgb, var(--df-indigo-500) 28%, transparent);
  --ab-bar-top: var(--df-violet-300);
  --ab-hair: color-mix(in srgb, var(--df-band-ink) 20%, transparent);
  --ab-track: color-mix(in srgb, var(--df-band-ink) 10%, transparent);
  --ab-lattice: color-mix(in srgb, var(--df-band-ink) 5%, transparent);
  --ab-seg-1: var(--df-indigo-600);
  --ab-seg-2: var(--df-indigo-500);
  --ab-seg-3: var(--df-indigo-300);
  --ab-seg-4: var(--df-teal-400);
  /* ---- the access card ---- */
  --ab-trust-bg: color-mix(in srgb, var(--df-navy-800) 52%, transparent);
  --ab-trust-edge: color-mix(in srgb, var(--df-band-ink) 14%, transparent);

  position: relative;
  /* Contains the -1 atmosphere below. Without it, `z-index: -1` escapes to the
     root stacking context and paints behind the page background instead of
     behind this pane's content. */
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1.5rem, 3vh, 2.75rem);
  /* Clips the diagram at the pane edge instead of letting it widen the page. */
  overflow: hidden;
  padding: clamp(1.75rem, 3vw, 3.25rem) clamp(1.5rem, 3vw, 3.5rem);
  background: var(--ab-bg);
  color: var(--ab-ink);
}

/* ---------------- The paper ground ----------------
   Everything the pane draws, restated once. Nothing below this block needs a
   `[data-theme]` selector — the rules read --ab-*, and --ab-* is what changes.

   The ink comes off the slate ramp rather than the navy one: navy-200 on paper
   is unreadable, and the light theme's own body/muted rungs are what the rest
   of the product uses on exactly this ground. */
[data-theme="dark"] .auth-brand {
  --ab-bg: var(--df-paper);
  --ab-elev: var(--df-band-ink);
  --ab-elev-2: var(--df-band-ink);
  --ab-edge: var(--df-slate-200);
  /* Cards on paper separate by shadow, not by a fill one rung up — there is no
     rung above white. Both shadow tokens are declared in :root and keep their
     light values in the dark theme, which is exactly what this pane wants. */
  --ab-shadow: var(--df-shadow-card);

  --ab-ink: var(--df-navy-950);
  --ab-ink-body: var(--df-slate-600);
  --ab-ink-muted: var(--df-slate-500);
  --ab-quiet: var(--df-slate-400);

  --ab-accent: var(--df-indigo-600);
  --ab-mark: var(--df-indigo-600);
  /* teal-600, not teal-700: the dark theme repoints --df-teal-700 to the light
     teal-400 rung for status pills, and this pane is on PAPER in that theme —
     it would have come out a pale mint on white. Every --ab-* value has to be
     a rung that does not flip. */
  --ab-teal: var(--df-teal-600);
  --ab-tile-from: color-mix(in srgb, var(--df-indigo-600) 18%, transparent);
  --ab-tile-to: color-mix(in srgb, var(--df-indigo-600) 8%, transparent);
  --ab-tile-edge: color-mix(in srgb, var(--df-indigo-600) 20%, transparent);

  --ab-wire: color-mix(in srgb, var(--df-indigo-600) 34%, transparent);
  --ab-wire-lit: var(--df-indigo-600);
  --ab-core-from: var(--df-band-ink);
  --ab-core-to: color-mix(in srgb, var(--df-indigo-600) 14%, transparent);
  --ab-core-edge: color-mix(in srgb, var(--df-indigo-600) 26%, transparent);
  --ab-glow: var(--df-shadow-raised);
  --ab-bar-top: var(--df-violet-600);
  --ab-hair: var(--df-slate-200);
  --ab-track: var(--df-slate-100);
  --ab-lattice: color-mix(in srgb, var(--df-slate-950) 5%, transparent);
  --ab-seg-1: var(--df-indigo-800);
  --ab-seg-2: var(--df-indigo-600);
  --ab-seg-3: var(--df-indigo-500);
  --ab-seg-4: var(--df-teal-600);

  --ab-trust-bg: var(--df-band-ink);
  --ab-trust-edge: var(--df-slate-200);
}

/* The atmosphere. Two wide, low-opacity fields plus a hairline lattice masked
   to an ellipse behind the diagram, so it never reaches the headline where it
   would fight display type for the same fine detail.

   No blobs: every stop runs to transparent well before its edge, so there is
   no shape to see. This is what replaced the scattered dot field, which had a
   shape — several, in fact — and read as smudges on the navy. */
.auth-brand::before,
.auth-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.auth-brand::before {
  background:
    radial-gradient(62% 50% at 76% 62%,
      color-mix(in srgb, var(--df-indigo-500) 26%, transparent), transparent 72%),
    radial-gradient(48% 42% at 4% 4%,
      color-mix(in srgb, var(--df-violet-600) 20%, transparent), transparent 70%),
    radial-gradient(80% 46% at 44% 106%,
      color-mix(in srgb, var(--df-navy-800) 74%, transparent), transparent 72%);
}
/* On paper the same three fields at a fraction of the strength: a wash that is
   felt rather than seen. Indigo at navy-ground alpha would be a blue stain. */
[data-theme="dark"] .auth-brand::before {
  background:
    radial-gradient(62% 50% at 76% 62%,
      color-mix(in srgb, var(--df-indigo-500) 13%, transparent), transparent 72%),
    radial-gradient(48% 42% at 4% 4%,
      color-mix(in srgb, var(--df-violet-600) 7%, transparent), transparent 70%),
    radial-gradient(80% 46% at 44% 106%,
      color-mix(in srgb, var(--df-indigo-500) 9%, transparent), transparent 72%);
}
.auth-brand::after {
  background-image:
    linear-gradient(to right,
      var(--ab-lattice) var(--df-rule), transparent var(--df-rule)),
    linear-gradient(to bottom,
      var(--ab-lattice) var(--df-rule), transparent var(--df-rule));
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(62% 46% at 62% 72%, #000 0%, transparent 78%);
  mask-image: radial-gradient(62% 46% at 62% 72%, #000 0%, transparent 78%);
}

/* The three rows ride above the atmosphere. */
.auth-brand > * {
  position: relative;
  z-index: var(--df-z-base);
  min-width: 0;
}

/* ---------------- The lock-up ---------------- */
.auth-brand__lock {
  display: inline-flex;
  align-items: center;
  gap: var(--df-space-3);
  align-self: start;
  justify-self: start;
  color: var(--ab-ink);
  transition: opacity var(--df-dur-micro) var(--df-ease);
}
.auth-brand__lock:hover { opacity: .82; }
.auth-brand__id {
  display: grid;
  min-width: 0;
}
.auth-brand__wordmark {
  font-family: var(--df-font-display);
  font-size: clamp(1.25rem, 1.05rem + .55vw, 1.625rem);
  font-weight: var(--df-weight-display);
  letter-spacing: -0.025em;
  line-height: var(--df-leading-tight);
  white-space: nowrap;
}
/* The promise, at label size under the name. Same sentence the landing signs
   off with, so the door does not introduce the product a second way. */
.auth-brand__tagline {
  font-size: var(--df-text-small);
  line-height: var(--df-leading-tight);
  color: var(--ab-ink-muted);
}
/* The mark carries the pane's own two colours: on navy the outer strokes go
   white because indigo-600 sinks into the ground, on paper they are the indigo
   they are everywhere else in the product. Teal holds the middle either way. */
.auth-brand .df-mark { width: 30px; height: 30px; }
.auth-brand .df-mark__flow { stroke: var(--ab-mark); }
.auth-brand .df-mark__flow--2 { stroke: var(--ab-teal); }
.auth-brand .df-mark__flow--3 { stroke: var(--ab-mark); opacity: .45; }

/* ---------------- The stage: statement, then the diagram ----------------
   One column, always. The statement reads first and the diagram sits under it,
   which is the order the sentence runs in — "your data is safe, your decisions
   keep flowing", and then the picture of it happening. Side by side the two
   halved each other's width and both looked cramped; stacked, each gets the
   full pane.

   `align-content: center` rather than `start`: this is the 1fr row, so the
   block floats in whatever height is left between the lock-up and the foot
   instead of hugging one end of it. */
.auth-brand__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: clamp(1.75rem, 4.5vh, 3.5rem);
  min-width: 0;
}

/* Centred, and capped at the same 40rem the diagram is capped at — the two
   blocks then sit on one axis and read as one column rather than as a
   left-aligned paragraph with a centred picture under it. */
.auth-brand__copy {
  min-width: 0;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

/* Not an <h1> — the page's single h1 belongs to the form. This is brand copy
   that happens to be the largest type on the screen. */
.auth-brand .auth-brand__headline {
  display: grid;
  justify-items: center;
  margin: 0 0 var(--df-space-4);
  font-family: var(--df-font-display);
  font-size: clamp(1.75rem, 1rem + 1.8vw, 2.625rem);
  font-weight: var(--df-weight-display);
  line-height: var(--df-leading-tight);
  letter-spacing: -0.03em;
  color: var(--ab-ink);
  text-wrap: balance;
}
/* The second line only. The break is a design decision and the accent rides
   the line the reader lands on — the same move `.lh__title-accent` makes on
   the landing hero, in the rung of indigo that reads on this pane's ground. */
.auth-brand__accent { color: var(--ab-accent); }

.auth-brand .auth-brand__lede {
  margin: 0 auto;
  max-width: 42ch;
  font-size: var(--df-text-card);
  line-height: var(--df-leading-relaxed);
  color: var(--ab-ink-body);
}
.auth-brand .auth-brand__badge { margin: 0 0 var(--df-space-4); }
/* `.df-badge--platform` inverts against --df-ink-strong, which is not this
   pane's ground in either theme. On this pane it inverts against the pane. */
.auth-brand .df-badge--platform {
  background: var(--ab-ink);
  color: var(--ab-bg);
}

/* ---------------- The three promises ---------------- */
/* The landing's own benefits, verbatim, at the door. Icon tiles rather than
   bullets: three rows of two-line text need something to hang off, and the
   pack's icon set is already the one set the product draws from. */
/* Three across, not three down. Stacked they were a list running down the
   left edge of a pane that had room for them side by side, and they pushed the
   diagram far enough down the column to make the whole pane feel tall and
   thin. In a row they read as three equal promises, which is what they are —
   none of them is first. */
.auth-brand__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, 1.4vw, 1.25rem);
  margin: clamp(1.25rem, 3vh, 2.25rem) 0 0;
  padding: 0;
  list-style: none;
}
/* Icon over text, centred: at a third of the column there is not room for a
   tile beside two lines of type without the type wrapping mid-phrase. */
.auth-benefit {
  display: grid;
  justify-items: center;
  gap: var(--df-space-2);
  min-width: 0;
}
.auth-benefit__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(36px, 1rem + 2.2vh, 46px);
  height: clamp(36px, 1rem + 2.2vh, 46px);
  border-radius: 12px;
  border: var(--df-rule) solid var(--ab-tile-edge);
  background: linear-gradient(150deg, var(--ab-tile-from), var(--ab-tile-to));
  color: var(--ab-accent);
}
.auth-benefit__text {
  display: grid;
  justify-items: center;
  min-width: 0;
  font-size: var(--df-text-body);
  line-height: var(--df-leading-tight);
  text-wrap: balance;
}
.auth-benefit__title {
  font-weight: var(--df-weight-strong);
  color: var(--ab-ink);
}
.auth-benefit__detail { color: var(--ab-ink-body); }

/* ============================================================
   The diagram — `Components/Auth/BrandFlow.html`
   ============================================================
   Five tracks: the source rail, the inbound wires, the core, the outbound
   wires, the output panels. The wire columns are `1fr` and therefore the first
   thing to give way at narrow widths, which is right — a wire carries no
   words. */
.auth-viz {
  display: grid;
  grid-template-columns:
    minmax(4.5rem, 11rem)
    minmax(1rem, 1fr)
    minmax(3.25rem, 7.5rem)
    minmax(1rem, 1fr)
    minmax(3.75rem, 9rem);
  align-items: center;
  /* Capped and centred rather than stretched: the diagram is an illustration,
     and at the full width of a half-page pane the five tracks pull apart into
     three unrelated groups with two long wires between them. */
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  min-width: 0;
}

/* ---------------- Source rail ---------------- */
.auth-viz__sources {
  grid-column: 1;
  display: grid;
  gap: clamp(.5rem, 1.6vh, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.auth-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
  min-width: 0;
  padding: clamp(.35rem, 1vh, .6rem) clamp(.5rem, .55vw, .8rem);
  border: var(--df-rule) solid var(--ab-edge);
  border-radius: var(--dp-radius-control);
  background: linear-gradient(152deg, var(--ab-elev), var(--ab-elev-2));
  box-shadow: var(--ab-shadow);
  font-size: clamp(.6875rem, .63rem + .14vw, .8125rem);
  font-weight: var(--df-weight-medium);
  color: var(--ab-ink);
}
.auth-node__name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* The node where the card meets its wire. Sits on the card, not in the SVG:
   the SVG is stretched with `preserveAspectRatio: none` and a circle in there
   would come out an ellipse. */
.auth-node::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: var(--dp-radius-pill);
  background: var(--ab-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-accent) 22%, transparent);
}
.auth-node__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(22px, .6rem + 1.7vh, 30px);
  height: clamp(22px, .6rem + 1.7vh, 30px);
  border-radius: 8px;
  border: var(--df-rule) solid var(--ab-tile-edge);
  background: linear-gradient(150deg, var(--ab-tile-from), var(--ab-tile-to));
  color: var(--ab-accent);
}

/* ---------------- Wires ---------------- */
/* Stretched to the gap column, so the geometry is written once in a 0–100
   space and the browser maps it to whatever width is left over.
   `height: 100%` lines the curves up with the source rail, which is the
   tallest item in the row and therefore sets its height. */
.auth-wires {
  width: 100%;
  height: 100%;
  min-height: 1px;
  overflow: visible;
}
.auth-wires--in { grid-column: 2; }
.auth-wires--out { grid-column: 4; }

.auth-wire {
  fill: none;
  stroke: var(--ab-wire);
  stroke-width: 1;
  stroke-linecap: round;
}
/* One short lit segment travelling the length of each wire: a dash pattern,
   not a moving element — nothing is laid out and nothing reflows. Staggered
   off the path's index so the signals never arrive in lockstep. */
.auth-wire--pulse {
  stroke: var(--ab-wire-lit);
  stroke-width: 1.5;
  stroke-dasharray: 7 93;
  animation: authFlowPulse 3.4s linear infinite;
  animation-delay: calc(var(--auth-i) * -0.44s);
}
@keyframes authFlowPulse {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* ---------------- The intelligence core ---------------- */
.auth-core {
  position: relative;
  grid-column: 3;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: clamp(4.25rem, 1.5rem + 5.5vh, 7.5rem);
  aspect-ratio: 1;
  border-radius: clamp(16px, 1.2vh + .55rem, 26px);
  border: var(--df-rule) solid var(--ab-core-edge);
  background: linear-gradient(150deg, var(--ab-core-from), var(--ab-core-to));
  /* A glow on navy, a lift on paper: the same job — "this object is the one
     doing the work" — said the way each ground can hear it. */
  box-shadow: var(--ab-glow);
}
/* Depth, made of one thing only: a second pane inset behind the first. No
   bevels, no reflections, no floor. */
.auth-core::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  border: var(--df-rule) solid var(--ab-tile-edge);
}
.auth-core__mark {
  position: relative;
  z-index: var(--df-z-base);
  display: grid;
  place-items: center;
}
/* Beats `.auth-brand .df-mark` above, which sizes the lock-up's copy. */
.auth-brand .auth-core__mark .df-mark {
  width: clamp(30px, 1rem + 3.4vh, 56px);
  height: clamp(30px, 1rem + 3.4vh, 56px);
}
.auth-brand .auth-core__mark .df-mark__flow { stroke: var(--ab-accent); }
.auth-brand .auth-core__mark .df-mark__flow--2 { stroke: var(--ab-teal); }
.auth-brand .auth-core__mark .df-mark__flow--3 { stroke: var(--ab-accent); opacity: .5; }

/* ---------------- Output panels ---------------- */
/* Stretched and spread rather than centred: the source rail is five cards and
   the output rail is three panels, so the two columns are never the same
   height. `space-between` hands the panels the height the rail already has and
   puts them where the three outbound wires arrive (16% / 50% / 84%). */
.auth-viz__outs {
  grid-column: 5;
  align-self: stretch;
  display: grid;
  grid-auto-rows: max-content;
  align-content: space-between;
  gap: clamp(.5rem, 1.4vh, 1.25rem);
}
/* A small, fixed stagger rather than a random one: the panels should read as
   floating in the same system, not scattered. */
.auth-viz__outs > :nth-child(2) { margin-left: var(--df-space-4); }
.auth-viz__outs > :nth-child(3) { margin-left: var(--df-space-2); }

.auth-card {
  padding: clamp(.5rem, 1.2vh, .9rem) clamp(.55rem, .6vw, .95rem);
  border: var(--df-rule) solid var(--ab-edge);
  border-radius: var(--dp-radius-control);
  background: linear-gradient(152deg, var(--ab-elev), var(--ab-elev-2));
  box-shadow: var(--ab-shadow);
}

/* Shape only — no axis, no scale, no figure. There is nothing to read off
   these, which is the point: a login page is not the place to put a number the
   product would then have to source. */
.auth-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: clamp(26px, 4.6vh, 56px);
}
.auth-bars__bar {
  flex: 1 1 0;
  height: var(--auth-h);
  min-width: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, var(--df-indigo-600), var(--df-indigo-500));
}
.auth-bars__bar:nth-child(n + 7) {
  background: linear-gradient(to top, var(--df-indigo-500), var(--ab-bar-top));
}

.auth-card--lines {
  display: grid;
  gap: clamp(4px, .9vh, 9px);
}
.auth-rule {
  height: 4px;
  width: var(--auth-w);
  border-radius: var(--dp-radius-pill);
  background: var(--ab-hair);
}
/* The first rule reads as the panel's title line. */
.auth-rule:first-child { background: color-mix(in srgb, var(--ab-accent) 60%, transparent); }

.auth-card--donut { display: grid; place-items: center; }
.auth-donut {
  width: clamp(38px, 6vh, 76px);
  /* The output column bottoms out at 3.75rem, which is narrower than the
     clamp's floor plus the card's padding — capped, the donut shrinks with the
     card instead of hanging out of it. */
  max-width: 100%;
  height: auto;
}
.auth-donut__track { stroke: var(--ab-track); }
.auth-donut__arc { stroke: var(--auth-swatch); }
/* Four rungs of the one ramp, so the arcs read as one series rather than four
   unrelated colours. Teal closes it — the accent, exactly once. */
.auth-seg--1 { --auth-swatch: var(--ab-seg-1); }
.auth-seg--2 { --auth-swatch: var(--ab-seg-2); }
.auth-seg--3 { --auth-swatch: var(--ab-seg-3); }
.auth-seg--4 { --auth-swatch: var(--ab-seg-4); }

/* ---------------- The foot: access line + motto ---------------- */
.auth-brand__foot {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: end;
  justify-content: space-between;
  gap: var(--df-space-4);
  align-self: end;
}

/* Three access controls the product actually implements — not a trust badge,
   not a certification claim, not a fabricated customer quote. It sits in a
   card because the composition wants an object in this corner, and this is the
   one true thing there is to put in it. */
.auth-brand .auth-brand__trust {
  display: flex;
  align-items: center;
  gap: var(--df-space-3);
  justify-self: start;
  margin: 0;
  padding: clamp(.6rem, 1.3vh, .95rem) clamp(.75rem, .9vw, 1.125rem);
  border: var(--df-rule) solid var(--ab-trust-edge);
  border-radius: var(--dp-radius-control);
  background: var(--ab-trust-bg);
  box-shadow: var(--ab-shadow);
  font-size: var(--df-text-body);
  color: var(--ab-ink-body);
}
.auth-brand__shield { flex: none; color: var(--ab-teal); }

/* Three lines, three <span>s: the break is the composition, not the measure.
   Cased in CSS rather than in the copy file so the strings stay natural
   sentences in both languages — `<html lang>` is set, so Turkish gets its own
   uppercase mapping (i → İ) rather than the English one. */
.auth-brand__motto {
  display: grid;
  gap: 1px;
  margin: 0;
  justify-self: end;
  text-align: right;
  font-size: var(--df-text-small);
  line-height: var(--df-leading-tight);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ab-quiet);
}

/* ============================================================
   Pane 2 — the form column
   ============================================================ */
.auth-pane {
  position: relative;
  /* Contains the -1 atmosphere below, exactly as `.auth-brand` does. */
  isolation: isolate;
  display: grid;
  /* Two rows, not three: the copyright strip that used to close the column
     repeated the tagline the brand pane already carries under the wordmark. */
  grid-template-rows: auto 1fr;
  min-width: 0;
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 4.5vw, 4rem) clamp(1.5rem, 2.5vw, 2.25rem);
  /* --df-form-pane, not --df-canvas: the controls here are borderless, and a
     borderless field is only a field because it is lighter than what is
     behind it. In dark the token resolves back to the canvas, so that half is
     unchanged. */
  background: var(--df-form-pane);
}

/* The form column follows the theme — light in light, navy in dark — and it is
   the ONLY pane that does. What it carries in both is the landing page's own
   wash rather than the dot field that used to sit here: two radial fields at
   the corners the form does not use, running to transparent well before their
   edges, so there is no shape to read as a stain behind the inputs.

   No lattice on this side. The brand pane can carry one because its content is
   display type; a 1px grid behind a column of 44px inputs and their focus
   rings is noise at exactly the scale the eye is working at. */
.auth-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 92% 2%,
      color-mix(in srgb, var(--df-indigo-500) 9%, transparent), transparent 70%),
    radial-gradient(72% 48% at 26% 104%,
      color-mix(in srgb, var(--df-indigo-100) 62%, transparent), transparent 72%);
}
/* ------------- Dark: the form column takes the dark half -------------
   The diptych keeps one light half and one dark half; the theme decides which
   side. In dark the form column takes the product's dark canvas and the hero's
   full atmosphere, and the brand pane goes to paper (see the --ab-* flip
   above). No background rule is needed for it: `--df-canvas` in dark IS
   navy-990 now, which is the colour this pane used to name for itself. */
[data-theme="dark"] .auth-pane::before {
  background:
    radial-gradient(62% 50% at 76% 38%,
      color-mix(in srgb, var(--df-indigo-500) 22%, transparent), transparent 72%),
    radial-gradient(48% 42% at 96% 4%,
      color-mix(in srgb, var(--df-violet-600) 16%, transparent), transparent 70%),
    radial-gradient(80% 46% at 56% 106%,
      color-mix(in srgb, var(--df-navy-800) 70%, transparent), transparent 72%);
}

/* The two rows ride above the atmosphere — the same move the brand pane
   makes for its own children. */
.auth-pane > * {
  position: relative;
  z-index: var(--df-z-base);
  min-width: 0;
}
/* N9 edge-aligned: no nav links — there is nowhere else to go from a sign-in
   page — but theme and language have to survive the trip. */
/* `space-between`, with an empty <span> holding the left slot on the doors
   that are not part of a flow — so the controls stay pinned right whether or
   not the page fills `paneLead`. */
.auth-pane__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--df-space-4);
}
/* The band that carries the language menu has to out-stack the band below it.
   `.auth-pane > *` gives every child the SAME z-index, so `__body` — later in
   the DOM — won the tie and painted the sign-in form over the open dropdown;
   the menu's own z-index could not help, being trapped in this band's stacking
   context. Specificity has to reach (0,2,0) to beat that rule, hence the
   `.auth-pane` prefix. */
.auth-pane .auth-pane__top { z-index: var(--df-z-dropdown); }

/* ---------------- Flow position ----------------
   Where this screen sits in register → verify → sign in. It lives in the top
   band because that band was otherwise a strip of empty canvas, and because a
   progress marker belongs at the edge of the surface rather than inside the
   reading column, where it would push the title down the page.

   The bar is three dots with the current one drawn long — the same reading as
   a segmented progress bar at a fraction of the ink. Decorative only: the
   label beside it states "2 / 3" in words. */
.auth-step {
  display: inline-flex;
  align-items: center;
  gap: var(--df-space-3);
  margin: 0;
  min-width: 0;
  font-size: var(--df-text-small);
  color: var(--df-ink-body);
}
.auth-step__dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
}
.auth-step__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--dp-radius-pill);
  background: var(--df-border-strong);
}
/* Teal is the flow/verified colour in this system (Tokens.css names it so),
   which is exactly what these two dots report. */
.auth-step__dot--done { background: var(--df-accent); }
.auth-step__dot--current {
  width: 18px;
  background: var(--df-accent);
}
.auth-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--df-space-1);
}
/* `align-content` rather than flex centring: the 1fr row's min size is `auto`,
   so a tall form grows the grid instead of overflowing out of the top. */
.auth-pane__body {
  display: grid;
  align-content: center;
  min-width: 0;
  padding-block: var(--df-space-8);
}
.auth-col {
  width: 100%;
  /* The brief's number. The form is part of the page composition, not a card
     sitting on it — no border, no shadow, no panel radius. */
  max-width: 580px;
  margin-inline: auto;
  min-width: 0;
}

/* ============================================================
   Tabs — sign in / create account
   ============================================================ */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--df-space-8);
  /* A track with the segments inset into it, so the strip needs a gutter for
     the selected one to sit in — flush segments have no room to read as slots
     and the recess just looks like a mis-clipped corner. 2px, not the 4px
     rung: the strip is half the height it was (26px, was 52) and a 4px gutter
     on a 22px segment ate a third of it. */
  padding: 2px;
  background: var(--df-tab-track);
  border: var(--df-rule) solid var(--df-control-edge);
  border-radius: var(--dp-radius-control);
}
.auth-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 22 + the track's 2px gutter top and bottom = 26px, half the 52px the
     strip used to stand at. It is a switch between two documents, not a
     target the reader has to hit repeatedly, and at 52 it was the heaviest
     object on a column that has to fit seven controls above the fold. Below
     48rem the mobile rule lifts it back to 48px for the touch target. */
  min-height: 22px;
  padding-inline: var(--df-space-4);
  font-size: var(--df-text-card);
  font-weight: var(--df-weight-medium);
  color: var(--df-ink-body);
  /* Every tab label stays on one line at every width the brief tests. */
  white-space: nowrap;
  background: transparent;
  border: 0;
  /* Concentric with the track: the outer radius minus the gutter, or the
     recess sits inside a curve that does not follow it. */
  border-radius: calc(var(--dp-radius-control) - 2px);
  transition: background-color var(--df-dur-micro) var(--df-ease),
              box-shadow var(--df-dur-micro) var(--df-ease),
              color var(--df-dur-micro) var(--df-ease);
}
.auth-tab:hover {
  background: var(--df-ghost-hover-bg);
  color: var(--df-ink-strong);
}
/* Selected is never colour alone: the segment sinks into the track, the label
   goes brand blue and the weight steps up — shape, hue and weight, three
   signals. The 2px indigo rail it used to carry is gone with the flush strip;
   a rail under a recessed segment reads as a line drawn over it. */
.auth-tab.is-active {
  background: var(--df-tab-active-bg);
  color: var(--df-tab-active-fg);
  font-weight: var(--df-weight-strong);
  box-shadow: var(--df-tab-active-ring);
}
/* Hover must not repaint the selected segment back to the neutral hover fill —
   the pointer would make the answered tab look unanswered. */
.auth-tabs .auth-tab.is-active:hover {
  background: var(--df-tab-active-bg);
  color: var(--df-tab-active-fg);
}
/* The ring lands inside the segment's own radius, not the track's. */
.auth-tabs .auth-tab:focus-visible { outline-offset: -3px; }

/* ============================================================
   Panel head
   ============================================================ */
.auth-panel { min-width: 0; }

.auth-panel .auth-kicker {
  display: flex;
  align-items: center;
  gap: var(--df-space-2);
  margin: 0 0 var(--df-space-4);
  font-size: var(--df-text-small);
  color: var(--df-ink-body);
}
.auth-panel .auth-title {
  margin: 0 0 var(--df-space-2);
  font-family: var(--df-font-display);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: var(--df-weight-display);
  line-height: var(--df-leading-tight);
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.auth-panel .auth-lede {
  margin: 0 0 var(--df-space-6);
  max-width: 52ch;
  font-size: var(--df-text-card);
  line-height: var(--df-leading-relaxed);
  color: var(--df-ink-body);
}

/* ============================================================
   Messages — error, notice, confirmation
   ============================================================ */
.auth-alert,
.auth-notice,
.auth-confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--df-space-3);
  margin-bottom: var(--df-space-5);
  padding: var(--df-space-3) var(--df-space-4);
  font-size: var(--df-text-body);
  line-height: var(--df-leading-body);
  border: var(--df-rule) solid;
  border-radius: var(--dp-radius-control);
}
.auth-alert svg,
.auth-confirm svg { flex: none; margin-top: 2px; }

/* Something the reader did failed. */
.auth-alert {
  color: var(--df-danger-700);
  background: var(--df-danger-100);
  border-color: var(--df-danger-700);
}
.auth-alert__title {
  display: block;
  margin-bottom: var(--df-space-1);
  font-weight: var(--df-weight-strong);
}
/* Informational — a server that is not configured is not the reader's mistake,
   so it does not get the red treatment. */
.auth-notice {
  display: block;
  color: var(--df-info-700);
  background: var(--df-info-100);
  border-color: var(--df-info-700);
}
.auth-notice__title {
  display: block;
  margin-bottom: var(--df-space-1);
  font-weight: var(--df-weight-strong);
}
/* Teal is the product's verification colour (§2), which is exactly what a
   "we've done it" message is. */
.auth-confirm {
  color: var(--df-accent);
  background: var(--df-accent-soft);
  border-color: var(--df-accent);
}

/* ============================================================
   Fields
   ============================================================ */
.auth-form {
  display: grid;
  gap: var(--df-space-5);
}
/* The sign-up column is seven controls deep where the sign-in column is two;
   at the 20px rung it runs past the fold on a laptop panel. The rung steps
   down to 16px for that form only — 12 read as cramped once the fields
   themselves came down to 36px. */
.auth-form--dense { gap: var(--df-space-4); }
/* Same form, same reason: the title steps down a rung and the fields lose a
   fifth of their height (44 → 36) so the whole column lands above the fold.
   Desktop only — below 48rem the mobile rule keeps every control at 48px for
   the touch target, and this must not undercut it. */
/* NO TITLE RULES FOR THE TWO DOORS (2026-09-14). Sign-in and sign-up no
   longer draw a visible `.auth-title` — the tab above the panel is the
   heading, and their `<h1>` is `.sr-only`. The rung that used to hold the two
   in step, and the dense panel's title margin, went with it; `.auth-title` is
   now only the verify / forgot / invitation pages, which are their own page
   rather than a tab and keep the larger display size. */
@media (min-width: 48rem) {
  .auth-form--dense .auth-input { min-height: 36px; }
  .auth-form--dense .auth-reveal { width: 32px; height: 32px; }
}
.auth-field {
  display: grid;
  gap: var(--df-space-2);
  min-width: 0;
}
/* Visible, always. A placeholder is a hint and never the label. */
.auth-label {
  font-size: var(--df-text-body);
  font-weight: var(--df-weight-strong);
  color: var(--df-ink-strong);
}
.auth-control {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.auth-control__icon {
  position: absolute;
  left: var(--df-space-4);
  display: inline-flex;
  color: var(--df-ink-muted);
  pointer-events: none;
  transition: color var(--df-dur-micro) var(--df-ease);
}

.auth-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  /* 44, not the standards' 40: these are the long identity fields the same
     line allows 44–48 for, and at 40 a full-height column of them reads thin
     next to the 52px submit. The block padding is the 8px rung — at 15/1.35
     the text box is 20.25px, so the height comes off `min-height` and the
     browser centres the single line inside it. */
  padding: var(--df-space-2) var(--df-space-4);
  font-family: inherit;
  font-size: var(--df-text-card);
  line-height: var(--df-leading-snug);
  color: var(--df-ink);
  /* The house well (see --df-control-well in Tokens.css). No grey border: the
     only edge is --df-control-edge, the lit lip of the recess, and everything
     else is shadow.

     Every state therefore writes `box-shadow`, and box-shadow does not
     cascade layer by layer — a rule naming only its own ring would flatten
     the field it is trying to mark, so the rules below restate the well.

     The a11y trade is stated rather than hidden: a 1px grey edge at 3:1 met
     1.4.11 on its own, and a recess carries no measurable ratio. The boundary
     now rests on the fill/pane step plus the shade. */
  background: var(--df-control-well);
  border: var(--df-rule) solid var(--df-control-edge);
  border-radius: var(--dp-radius-control);
  box-shadow: var(--df-control-inset);
  outline: none;
  transition: box-shadow var(--df-dur-micro) var(--df-ease),
              background-color var(--df-dur-micro) var(--df-ease);
}
/* 16px gutter + 18px glyph + 16px gap. */
.auth-input--iconed { padding-left: calc(var(--df-space-4) * 2 + 18px); }
.auth-input--revealable { padding-right: calc(var(--df-space-4) * 2 + 18px); }
.auth-input::placeholder { color: var(--df-ink-muted); }

/* Focus is the FILL, not a ring. The well lightens toward opaque white and
   sinks a touch deeper — the same move the surface makes when you press it,
   which is the only signal the reference recipe uses. No ring, no border, no
   halo: `.pub-shell :focus-visible` would otherwise draw its generic ring
   here, so it is suppressed.

   This is a deliberate step down from the 2.4.7 indicator the border swap
   used to give. The change is over the whole control and it is both a
   lightness and a depth change, but it is subtler than a 2px rim — if it ever
   needs to be louder, --df-control-well-focus is the one value to move. */
.auth-input:focus-visible {
  outline: none;
  background: var(--df-control-well-focus);
  box-shadow: var(--df-control-inset-focus);
}
.auth-control:focus-within .auth-control__icon { color: var(--df-action); }

/* The error is the one state that still draws a line, and it has to: focus is
   a fill change now, so an error rendered as a fill change too would be the
   same signal twice. 1px on the inner rim — a field the user has not reached
   yet is marked, not shouted at. The icon and the sentence in `.auth-error`
   carry the meaning (1.4.1); this only points at which box they belong to. */
.auth-field.is-invalid .auth-input {
  box-shadow: inset 0 0 0 1px var(--df-danger-700), var(--df-control-inset);
}
/* Focused while invalid — the caret is exactly where `focusFirstError` sends
   it. The red rim STAYS (it is the only mark the error has) and focus adds
   its fill on top, so the two states read together instead of one erasing the
   other. The rim returns to resting weight the instant focus leaves. */
.auth-field.is-invalid .auth-input:focus-visible {
  outline: none;
  background: var(--df-control-well-focus);
  box-shadow: inset 0 0 0 1px var(--df-danger-700), var(--df-control-inset-focus);
}
.auth-field.is-invalid .auth-control__icon { color: var(--df-danger-700); }

/* Disabled is never opacity alone: a flat surface, a dashed edge, muted ink and
   a not-allowed cursor all say the same thing four different ways.

   `box-shadow: none` is the load-bearing one now. With every live field sunk,
   depth is what says "this one takes input" — so the dead field is the only
   flat box in the column, and it drops out of the rhythm before the dashed
   edge is even read. That edge is an inset `outline` rather than a border,
   because there is no border here to restyle and an outline at a negative
   offset draws inside the box without moving anything. */
.auth-input:disabled {
  background: var(--df-surface-sunk);
  color: var(--df-ink-muted);
  box-shadow: none;
  outline: var(--df-rule) dashed var(--df-control-line);
  outline-offset: calc(var(--df-rule) * -1);
  cursor: not-allowed;
}

/* Autofill. Chrome paints its own canary fill and its own ink; both are
   repainted onto the tokens with an inset shadow, which is the only hook the
   engine gives — and which is now the same property the whole control is
   drawn with, so the fill has to be appended to the recess rather than
   replacing it.

   The 100px fill goes LAST in every list: shadows paint front to back, so in
   any other order the fill would cover the well and an autofilled field would
   be the one flat box in the column. It is also the only place the SOLID
   fills are used — a translucent shadow lets the canary through. */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--df-ink);
  caret-color: var(--df-ink);
  -webkit-box-shadow: var(--df-control-inset),
                      inset 0 0 0 100px var(--df-control-well-solid);
}
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--df-ink);
  -webkit-box-shadow: var(--df-control-inset-focus),
                      inset 0 0 0 100px var(--df-control-well-solid-focus);
}

/* ---------------- Reveal ---------------- */
/* [hidden] loses to `display: inline-flex`, and the button ships hidden so it
   never appears without the JavaScript that drives it. */
.auth-reveal[hidden] { display: none; }
.auth-reveal {
  position: absolute;
  right: var(--df-space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--dp-radius-control);
  background: transparent;
  color: var(--df-ink-muted);
  cursor: pointer;
  transition: background-color var(--df-dur-micro) var(--df-ease),
              color var(--df-dur-micro) var(--df-ease);
}
.auth-reveal:hover { background: var(--df-ghost-hover-bg); color: var(--df-ink); }
.auth-reveal:active { background: var(--df-ghost-active-bg); }
.auth-reveal__off { display: none; }
/* aria-pressed="true" means the password is showing, so the glyph offers the
   action that is now available: hide. */
.auth-reveal[aria-pressed="true"] .auth-reveal__on { display: none; }
.auth-reveal[aria-pressed="true"] .auth-reveal__off { display: block; }

/* ---------------- Help + error ---------------- */
/* The password rule is on screen from the first frame, not sprung on the reader
   after a failed submit. */
.auth-panel .auth-help {
  margin: 0;
  font-size: var(--df-text-small);
  line-height: var(--df-leading-body);
  color: var(--df-ink-muted);
}
.auth-panel .auth-error {
  display: flex;
  align-items: flex-start;
  gap: var(--df-space-2);
  margin: 0;
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-medium);
  line-height: var(--df-leading-body);
  /* Icon + text + red. Never red on its own. */
  color: var(--df-danger-700);
}
.auth-error svg { flex: none; margin-top: 2px; }
/* Declared after the component, and one class heavier than it: `[hidden]` and
   `.auth-panel .auth-error` both score (0,2,0), so source order alone decided
   whether an empty error line stayed hidden. It does not get to be a coin toss. */
.auth-panel .auth-error[hidden] { display: none; }

/* ---------------- Checkbox ----------------
   F04's own control, not the browser default: `appearance: none` on the real
   input and the tick drawn with a rotated ::after border, rather than hiding
   the input behind a decorated span. :checked, :disabled, :focus-visible and
   the label's click target all stay native. */
.auth-field--check { gap: var(--df-space-2); }
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: var(--df-space-3);
  font-size: var(--df-text-body);
  line-height: var(--df-leading-body);
  color: var(--df-ink-body);
  cursor: pointer;
}
.auth-check input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  position: relative;
  border: var(--df-rule) solid var(--df-control-edge);
  /* Half the control rung: the pack's 14px floor clamped onto a 20px box
     would round it into a circle, and a circular checkbox reads as a radio. */
  border-radius: calc(var(--dp-radius-control) / 2);
  /* Same recess as the text fields, borderless for the same reason — an
     unchecked box is an empty control and has to carry the weight the same
     way, or it reads as decoration sitting next to the consent line. */
  background: var(--df-control-well);
  box-shadow: var(--df-control-inset);
  cursor: pointer;
  transition: background-color var(--df-dur-micro) var(--df-ease),
              box-shadow var(--df-dur-micro) var(--df-ease);
}
/* `:not(:checked)` is load-bearing, not defensive: without it this rule's
   specificity (.auth-check + :hover + :not()) outranks `input:checked` below,
   and hovering a checked box would repaint its indigo fill back to the
   surface colour — a checkbox that looks unchecked exactly while the pointer
   confirms it is. */
.auth-check:hover input:not(:disabled):not(:checked) {
  background: var(--df-control-well-focus);
  box-shadow: var(--df-control-inset-focus);
}
.auth-check input:active { transform: translateY(1px); }
/* The fill IS the checked state, and it comes with the recess dropped: a
   checked box is answered, so it stops being a hole waiting for something and
   becomes a solid indigo chip. The empty ones beside it keep their shade,
   which is what makes the difference readable at a glance. */
.auth-check input:checked {
  background: var(--df-action);
  border-color: transparent;
  box-shadow: none;
}
.auth-check input:checked::after {
  content: '';
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 6px;
  width: 5px;
  height: 10px;
  border: solid var(--df-action-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.auth-field--check.is-invalid .auth-check input {
  box-shadow: inset 0 0 0 1px var(--df-danger-700), var(--df-control-inset);
}

/* The consent sentence. A sibling `<label for>` rather than the wrapper it
   used to be: the document names inside it are buttons now, and a button
   inside a label toggles the checkbox on click — which would tick the box for
   somebody whose actual intent was to go and read the thing first. */
.auth-check__label {
  cursor: pointer;
  /* The document buttons sit on the text baseline of a wrapped sentence, so
     the line box has to be the paragraph's, not the button's. */
  line-height: var(--df-leading-body);
}

/* Looks like `.auth-link`, is a button — because it opens a dialog and does
   not navigate. A link that goes nowhere is a promise the browser cannot keep
   (no new tab, no copy-link, no back). The underline is permanent rather than
   on hover: this one is INSIDE a sentence, and an undecorated word in running
   text is not discoverable as a control. */
.auth-check__doc {
  display: inline;
  padding: 0;
  font: inherit;
  color: var(--df-action-link);
  font-weight: var(--df-weight-strong);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.auth-check__doc:hover { text-decoration-thickness: 2px; }

/* ============================================================
   Legal documents — the `dpModal` sheets behind the consent boxes
   ============================================================ */
/* The sheet's body is the scroll region (`Modal.css` caps it at 85vh), so
   nothing here sets a height: this is only the reading rhythm inside it. */
.legal-doc { color: var(--df-ink-body); }
.legal-doc__meta {
  margin: 0 0 var(--df-space-5);
  font-size: var(--df-text-small);
  color: var(--df-ink-muted);
}
.legal-doc__heading {
  margin: var(--df-space-5) 0 var(--df-space-2);
  font-size: var(--df-text-card);
  font-weight: var(--df-weight-strong);
  line-height: var(--df-leading-snug);
  color: var(--df-ink-strong);
}
/* The first heading follows the meta line, which already carries its own
   bottom margin — two of them stacked opens a hole under the header band. */
.legal-doc__meta + .legal-doc__heading { margin-top: 0; }
.legal-doc__body {
  margin: 0;
  font-size: var(--df-text-body);
  /* Relaxed rather than body: this is the one place in the product somebody
     reads seven paragraphs in a row. */
  line-height: var(--df-leading-relaxed);
}

/* ============================================================
   Buttons
   ============================================================ */
.auth-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--df-space-3);
  /* Full width in every state, so "loading" can never resize the control. */
  width: 100%;
  min-height: 52px;
  padding: var(--df-space-3) var(--df-space-5);
  font-family: var(--df-font-sans);
  font-size: var(--df-text-card);
  font-weight: var(--df-weight-strong);
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  border: var(--df-rule) solid transparent;
  border-radius: var(--dp-radius-control);
  cursor: pointer;
  transition: background-color var(--df-dur-micro) var(--df-ease),
              border-color var(--df-dur-micro) var(--df-ease),
              color var(--df-dur-micro) var(--df-ease),
              transform var(--df-dur-micro) var(--df-ease);
}
/* The pack's own press feedback (F01 dp-btn): "Hareket renk geçişi ve 1px
   basma tepkisiyle sınırlı" — colour alone answers the pointer on hover, and
   a 1px depress on click is the only transform. No lift, no scale. */
.auth-btn:active { transform: translateY(1px); }

.auth-btn--primary {
  background: var(--df-cta-bg);
  border-color: var(--df-cta-bg);
  color: var(--df-cta-ink);
  box-shadow: var(--dp-shadow-control);
}
.auth-btn--primary:hover,
.auth-btn--primary:active {
  background: var(--df-cta-hover-bg);
  border-color: var(--df-cta-hover-bg);
  box-shadow: var(--dp-shadow-control-inset);
}

/* Microsoft's own guidance: a light button with the mark at the left and the
   label beside it. Outlined so it never competes with the indigo primary. */
.auth-btn--ms {
  background: var(--df-surface);
  border-color: var(--df-border-strong);
  color: var(--df-ink);
}
.auth-btn--ms:hover {
  background: var(--df-surface-sunk);
  box-shadow: var(--dp-shadow-control-inset);
}
.auth-btn__mark { flex: none; }

.auth-btn--quiet {
  background: transparent;
  color: var(--df-ink-body);
}
.auth-btn--quiet:hover { background: var(--df-ghost-hover-bg); color: var(--df-ink-strong); }
.auth-btn--quiet:active { background: var(--df-ghost-active-bg); }

/* `:not([aria-busy])` is the whole fix for "the button changes shape when I
   click it" (2026-09-13). A busy button is also a disabled one — `Auth.js`
   locks it a tick after submit to stop the second click — and this rule was
   then repainting the indigo primary as a dashed grey tile for the length of
   the round trip. Disabled and busy are different states: one says "not for
   you", the other says "working on it". */
.auth-btn:disabled:not([aria-busy="true"]),
.auth-btn.is-disabled,
.auth-btn[aria-disabled="true"]:not([aria-busy="true"]) {
  background: var(--df-surface-sunk);
  border-color: var(--df-border-strong);
  border-style: dashed;
  color: var(--df-ink-muted);
  cursor: not-allowed;
  transform: none;
}

/* Blocked by validation — the button says so, and so do the field errors and
   the live region. Cleared the moment the reader starts fixing it. */
.auth-btn.is-error {
  background: var(--df-danger-100);
  border-color: var(--df-danger-700);
  color: var(--df-danger-700);
}

/* ---------------- Busy ----------------
   The same mark and the same swap as the pack's `dp-btn` (`Button.css`,
   2026-09-13), because a tenant meets both surfaces in one session and a
   button that waits differently on the door than it does in the app reads as
   two products. Three 4px dots at 120° on a 6px orbit, one turn every 900ms:
   it has a direction, which is what says "in progress", without the weight of
   a stroked ring beside 15px text.

   The ring it replaces was also the wrong *shape* of feedback here: it was
   drawn from `border`, so it arrived as a second edge on a control whose own
   edge is the thing the eye is tracking. */
.auth-btn[aria-busy="true"] {
  cursor: progress;
  transform: none;
}

.auth-btn__orbit {
  display: none;
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.auth-btn[aria-busy="true"] .auth-btn__orbit { display: block; }

.auth-btn__orbit i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: var(--df-radius-pill);
  background: currentColor;
  /* `rotate` (the individual property) spins the dot about the button's
     centre while `transform` keeps its 120° station on the orbit — two
     rotations that would fight if both lived in `transform`. */
  transform-origin: 2px 2px;
  animation: authBtnOrbit 900ms linear infinite;
}
.auth-btn__orbit i:nth-child(1) { transform: rotate(0deg)   translateX(6px); }
.auth-btn__orbit i:nth-child(2) { transform: rotate(120deg) translateX(6px); animation-delay: -300ms; }
.auth-btn__orbit i:nth-child(3) { transform: rotate(240deg) translateX(6px); animation-delay: -600ms; }

@keyframes authBtnOrbit {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

/* THE LABEL CHANGES, THE BUTTON DOES NOT. Both sentences ship in one grid
   cell, so the cell is as wide as the longer of the two from the first paint
   and `aria-busy` decides only which one is visible. Rewriting the text in
   place (what `Auth.js` used to do) re-flowed the line inside a control that
   is full-width — harmless here, wrong the moment one of these buttons is not. */
.auth-btn__label--swap {
  display: grid;
  justify-items: center;
}
.auth-btn__label--swap > span {
  grid-area: 1 / 1;
  transition: opacity var(--df-dur-micro) var(--df-ease),
              transform var(--df-dur-micro) var(--df-ease);
}
.auth-btn__label-busy {
  opacity: 0;
  transform: translateY(6px);
}
.auth-btn[aria-busy="true"] .auth-btn__label-idle {
  opacity: 0;
  transform: translateY(-6px);
}
.auth-btn[aria-busy="true"] .auth-btn__label-busy {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Column furniture
   ============================================================ */
/* Pulled tight under the password field: the form's 20px gap is the rhythm
   between fields, and this line belongs to the field above it. */
.auth-form .auth-aside {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(var(--df-space-3) * -1);
}
.auth-link {
  color: var(--df-action-link);
  font-weight: var(--df-weight-strong);
}
.auth-link:hover { text-decoration: underline; }

/* ANNOUNCED, NEVER PRINTED (2026-09-13). This is the live region the busy
   state and the client-side validation speak through, and it used to speak
   in visible text — which put "Başvuru oluşturuluyor…" on the button and the
   same sentence again under it, and repeated a field error that is already
   sitting under the field it belongs to. It stays in the DOM and in the
   accessibility tree (never `display: none`, or the announcement is dropped);
   it just no longer draws a second copy of what the page already says. */
.auth-form .auth-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A rule, not a tinted box: this is a caveat about the account, not a status. */
.auth-panel .auth-note {
  margin-top: var(--df-space-5);
  padding-left: var(--df-space-4);
  border-left: 2px solid var(--df-accent);
  font-size: var(--df-text-small);
  line-height: var(--df-leading-body);
  color: var(--df-ink-body);
}
.auth-panel .auth-hint {
  margin-top: var(--df-space-3);
  text-align: center;
  font-size: var(--df-text-small);
  color: var(--df-ink-muted);
}
.auth-panel .auth-switch {
  margin-top: var(--df-space-6);
  text-align: center;
  font-size: var(--df-text-body);
  color: var(--df-ink-body);
}
/* The platform door's exit to the tenant login — ruled off, so it reads as a
   way out rather than a second way in. */
.auth-panel .auth-switch--ruled {
  padding-top: var(--df-space-5);
  border-top: var(--df-rule) solid var(--df-border);
  text-align: left;
}
.auth-panel .auth-back { margin-top: var(--df-space-4); }

/* ============================================================
   Facts — "this is the account you are about to verify"
   ============================================================
   A definition list on a hairline-ruled surface, not a table: two rows of
   label/value are a description, and a <table> would announce column headers
   that do not exist. Used only by `Pages/VerifyEmail.html`, which has to let
   the reader CHECK the address before confirming it — a confirmation you
   cannot verify is one you should not give.

   Every value here is tokens (§2/§4). The surface is `--df-surface-sunk` so
   it reads as recessed rather than as another card floating on the pane. */
.auth-facts {
  margin: 0 0 var(--df-space-5);
  padding: var(--df-space-4);
  background: var(--df-surface-sunk);
  border: var(--df-rule) solid var(--df-border);
  border-radius: var(--dp-radius-control);
}
.auth-facts__legend {
  display: block;
  margin-bottom: var(--df-space-3);
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--df-ink-muted);
}
/* The account reads as an identity — monogram, address, company — rather than
   as a label/value table. It is the same information; a two-column list of
   "E-posta: …" simply looks like a database row, and the address is the one
   thing the reader is here to check. */
.auth-facts__identity {
  display: flex;
  align-items: center;
  gap: var(--df-space-4);
  min-width: 0;
}
/* The pack's avatar, recoloured onto our own ramp: geometry is the pack's,
   colour is ours (the note at the top of this file). Teal because Tokens.css
   names it the verified/flow colour, which is this page's whole subject. */
.auth-facts .dp-avatar {
  background: var(--df-accent-soft);
  color: var(--df-accent);
}
.auth-facts dl {
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 0;
}
.auth-facts dd {
  margin: 0;
  /* An address is one long unbroken token and this column is narrow on a
     phone; without this it pushes the panel wider than the viewport. */
  overflow-wrap: anywhere;
}
.auth-facts .auth-facts__email {
  font-size: var(--df-text-card);
  font-weight: var(--df-weight-strong);
  color: var(--df-ink-strong);
}
.auth-facts .auth-facts__company {
  font-size: var(--df-text-small);
  color: var(--df-ink-muted);
}

/* The re-send form is a single button with no fields, so it does not want the
   form grid's gap ladder — only its own breathing room. */
.auth-panel .auth-inline-form {
  display: block;
  margin-top: var(--df-space-5);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* 768–1023: the door narrows and the statement comes down a step, rather than
   the two panes each shrinking into an unreadable column. */
@media (max-width: 63.9375rem) and (min-width: 48rem) {
  .pub-shell.auth-split { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); }
  .auth-brand { padding-inline: clamp(1.25rem, 3vw, 2rem); }
  .auth-brand .auth-brand__headline { font-size: clamp(1.5rem, 2.8vw, 2rem); }
  .auth-brand .auth-brand__lede { font-size: var(--df-text-body); max-width: none; }
  /* At this width the three promises and the diagram are competing for the
     same vertical space and the diagram is the one that says something the
     form does not. The promises go; they are on the landing page, one click
     back, in full. */
  .auth-brand__benefits { display: none; }
  /* Two objects in the corner need a row each here, and the motto is the one
     that can lose its corner. */
  .auth-brand__foot { grid-template-columns: minmax(0, 1fr); }
  .auth-brand__motto { display: none; }
  .auth-viz {
    grid-template-columns:
      minmax(3.75rem, 8rem)
      minmax(.75rem, 1fr)
      minmax(2.75rem, 5rem)
      minmax(.75rem, 1fr)
      minmax(3rem, 6rem);
  }
}

/* The brand pane's own height budget. Stacked, it carries a statement, three
   promises and a five-card rail in one column, and `.auth-brand` clips rather
   than scrolls — so the block that has to give way is named here rather than
   discovered on a short panel. The promises go first: they are on the landing
   page, one click back, in full, and the diagram is the thing this pane exists
   to show. Now that they are one row rather than three, this only has to reach
   the genuinely short panels. */
@media (min-width: 48rem) and (max-height: 46rem) {
  .auth-brand__benefits { display: none; }
  .auth-brand { gap: var(--df-space-5); }
}

/* Short laptop panels (1280×800 is inside §8's target): tighten the form
   column's vertical rhythm instead of letting it push past the fold. */
@media (min-width: 48rem) and (max-height: 46rem) {
  .auth-pane__body { padding-block: var(--df-space-5); }
  .auth-tabs { margin-bottom: var(--df-space-5); }
  .auth-panel .auth-title { font-size: clamp(1.625rem, 2.4vw, 2rem); }
  .auth-panel .auth-lede { margin-bottom: var(--df-space-5); }
  .auth-form { gap: var(--df-space-4); }
}

/* Below 768 the diptych stops being a diptych: the navy pane becomes a short
   brand header, the long statement and the motif go, and the form takes the
   whole column. */
@media (max-width: 47.9375rem) {
  .pub-shell.auth-split { grid-template-columns: minmax(0, 1fr); }

  .auth-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--df-space-4);
    padding: var(--df-space-4) var(--df-space-5);
  }
  /* The pane collapses to a header strip: the statement, the promises and the
     diagram all go. A five-source diagram at 360px is a row of ellipses, and
     the form is what the reader came for. */
  .auth-brand__stage,
  .auth-brand__motto,
  .auth-brand__tagline { display: none; }
  .auth-brand .df-mark { width: 26px; height: 26px; }
  .auth-brand__wordmark { font-size: var(--df-text-section); }
  .auth-brand__foot { display: contents; }
  .auth-brand .auth-brand__trust {
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--df-text-small);
    text-align: right;
  }
  .auth-brand__shield { display: none; }

  /* The brief's floor: never less than 20px of gutter around the form. */
  .auth-pane { padding: var(--df-space-4) var(--df-space-5) var(--df-space-6); }
  .auth-pane__body { padding-block: var(--df-space-6); }
  .auth-col { max-width: none; }

  /* 48px on mobile — still above the 44px WCAG 2.2 AA target size. */
  .auth-input,
  .auth-btn,
  .auth-tab { min-height: 48px; }
  .auth-tabs { margin-bottom: var(--df-space-6); }
  .auth-panel .auth-switch--ruled { text-align: center; }
}

/* At 320–375 the access line and the wordmark cannot share a row without one
   of them wrapping. The mark plus the wordmark is the identification that
   matters here; the access line repeats what the page already implies. */
@media (max-width: 30rem) {
  .auth-brand .auth-brand__trust { display: none; }
  .auth-brand { justify-content: flex-start; }

  /* Same call on the flow marker: it cannot share the top row with the theme
     and language controls at this width without wrapping, and dropping only
     its label would leave three dots carrying the meaning on their own — which
     §12 does not allow. It goes whole. */
  .auth-step { display: none; }
}

/* ============================================================
   Reduced motion — the spatial moves go away entirely, rather than merely
   getting faster.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* The diagram's travelling dash is the only thing on this surface that runs
     on its own, so it is the only thing to stop. The wires stay drawn — the
     diagram loses nothing it was using to say something. */
  .auth-wire--pulse { animation: none; stroke-dasharray: none; opacity: .5; }
  .auth-btn:active,
  .auth-check input:active { transform: none; }
  /* The dots hold their three stations at half strength rather than
     disappearing: "busy" still has to be visible, and a 0.01ms orbit is a
     stutter, not a reduction. The label swap becomes a cut. */
  .auth-btn__orbit i { animation: none; opacity: .5; }
  .auth-btn__label--swap > span { transition: none; transform: none; }
}

/* ============================================================
   THE GATE — `Pages/WorkspacePending.html`
   ============================================================
   The waiting screen borrows this shell wholesale (`.auth-panel`,
   `.auth-title`, `.auth-alert`), because it is a door state and not a new
   room. What it adds is the three things `PhasePlan` M3 asks of it and the
   shell has no component for: WHERE YOU ARE on the path, the RECORD we are
   reviewing, and a way to reach a person.

   It stopped borrowing two things on the way. `.auth-facts` is an IDENTITY —
   a monogram beside the one line the reader is checking — and this is a
   RECORD of four facts of equal weight; forcing one shape to serve both meant
   deciding which of "company" and "status" gets the avatar, and neither
   answer is right. And `.auth-notice` is a tinted panel for a CONDITION (F12);
   three of them stacked down one 580px column read as three alerts, and the
   reader stops seeing any of them. The hint moved into the step it describes,
   the support block became a ruled foot, and the column got quiet enough that
   the one thing that IS tinted — a rejection — is loud again.
   ------------------------------------------------------------ */

/* ---- The progress rail --------------------------------------------- */
.gate-steps { margin: 0 0 var(--df-space-6); }
.gate-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gate-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--df-space-4);
  align-items: start;
  padding-bottom: var(--df-space-5);
}
.gate-step:last-child { padding-bottom: 0; }

/* The connector, drawn on the row rather than on the marker: it has to reach
   the NEXT marker, and a 28px circle has no way to say how tall the row it
   sits in turned out to be. `bottom: 2px` leaves a hairline break so the line
   arrives at the circle instead of disappearing under it. */
.gate-step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 13px;
  /* Circle to circle: 28px of marker, then the row's own padding. Leaving a
     break at either end turns an 18px line into a floating dash. */
  inset-block: 29px 0;
  width: 2px;
  background: var(--df-border);
}
/* A finished step's connector is the accent: the rail then reads as a filled
   progress bar turned on its side, and how far you have come is legible
   before a single word is. */
.gate-step--done:not(:last-child)::before { background: var(--df-accent); }

.gate-step__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--df-radius-pill);
  border: var(--df-rule) solid var(--df-border-strong);
  background: var(--df-surface);
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-strong);
  color: var(--df-ink-muted);
  /* The rail's column is 28px and the circle fills it, so nothing here can
     shift when a step's label wraps to two lines. */
  flex: none;
}
/* Teal is the product's verification colour (§2), and "done" is exactly what
   it verifies. Never colour alone: the tick is the second signal, and the
   `.sr-only` word beside the label is the third. */
.gate-step--done .gate-step__marker {
  background: var(--df-accent-soft);
  border-color: transparent;
  color: var(--df-accent);
}
/* Indigo is the product's action colour, and the open step is the only place
   on this page where anything is actually happening. */
.gate-step--current .gate-step__marker {
  background: var(--df-action);
  border-color: transparent;
  color: var(--df-action-ink);
}

.gate-step__body {
  display: block;
  min-width: 0;
  /* The label's cap-height lines up with the middle of its marker rather than
     with the top of it. */
  padding-top: 3px;
}
.gate-step__label {
  display: block;
  font-size: var(--df-text-card);
  line-height: var(--df-leading-snug);
  color: var(--df-ink-body);
}
/* The open step is the sentence the reader came for, so it is the only one
   set in the strong ink. A finished step has nothing left to say and an
   upcoming one has not started; both stay quiet. */
.gate-step--current .gate-step__label {
  font-weight: var(--df-weight-strong);
  color: var(--df-ink-strong);
}
.gate-step--upcoming .gate-step__label { color: var(--df-ink-muted); }
/* A finished step is its label alone, set strong like the dashboard rail's
   (01.10.2026) — the same rail continued, so the same weight. */
.gate-step--done .gate-step__label { font-weight: var(--df-weight-strong); }

/* Only the open step carries one — this is the sentence that used to be a
   tinted panel above the whole page. */
.gate-step__hint {
  display: block;
  margin-top: var(--df-space-1);
  font-size: var(--df-text-body);
  line-height: var(--df-leading-body);
  color: var(--df-ink-body);
}

/* ---- The record ----------------------------------------------------- */
.gate-card {
  margin: 0 0 var(--df-space-6);
  background: var(--df-surface-sunk);
  border: var(--df-rule) solid var(--df-border);
  border-radius: var(--df-radius-card);
  /* The rows' hairlines run edge to edge; without this they would cross the
     corner radius and leave two square notches. */
  overflow: hidden;
}

.gate-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--df-space-3);
  padding: var(--df-space-3) var(--df-space-4);
  border-block-end: var(--df-rule) solid var(--df-border);
}
/* A legend, not a heading in the reading sense: it names the card, and the
   uppercase small-caps treatment is what keeps it from competing with the
   `h1` two blocks up. */
.auth-panel .gate-card__title {
  margin: 0;
  font-size: var(--df-text-small);
  font-weight: var(--df-weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--df-ink-muted);
}
.auth-panel .gate-card__status { margin: 0; }

.gate-facts { margin: 0; }
.gate-facts__row {
  display: grid;
  /* The label column is sized once, in ch, so Turkish ("Başvuru tarihi") and
     English ("Applied on") both land the values on one axis — an `auto`
     column re-measures per row and gives the longest label no gap at all,
     which is exactly the bug this replaced. */
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: var(--df-space-4);
  align-items: baseline;
  padding: var(--df-space-3) var(--df-space-4);
}
.gate-facts__row + .gate-facts__row {
  border-block-start: var(--df-rule) solid var(--df-border);
}

.gate-facts dt {
  color: var(--df-ink-muted);
  font-size: var(--df-text-body);
  /* `dt` is not a heading and the browser does not embolden it, but this list
     is scanned down the label column — the weight is what makes that column
     findable without a rule between them. */
  font-weight: var(--df-weight-medium);
}
.gate-facts dd {
  margin: 0;
  font-size: var(--df-text-body);
  font-weight: var(--df-weight-medium);
  color: var(--df-ink-strong);
  /* An address and a company name are single unbroken tokens and this column
     is narrow on a phone; without this they push the panel wider than the
     viewport. */
  overflow-wrap: anywhere;
}
/* A stamp, not prose: mono lines the digits up with every other identifier
   the product prints, and makes the date read as a record rather than as a
   sentence fragment. */
.gate-facts__stamp {
  font-family: var(--df-font-mono);
  font-size: var(--df-text-body);
  letter-spacing: -0.01em;
}
/* "Not submitted yet" is the absence of a value, not a value. */
.gate-facts__empty {
  color: var(--df-ink-muted);
  font-weight: var(--df-weight-regular);
}

/* ---- The way to a person -------------------------------------------- */
/* Ruled off rather than tinted — see the note at the top of this section.
   The link sits on its own line: a mailto inline with the sentence reads as
   part of the sentence and is missed. */
.auth-panel .gate-support {
  margin: var(--df-space-8) 0 0;
  padding-block-start: var(--df-space-5);
  border-block-start: var(--df-rule) solid var(--df-border);
  font-size: var(--df-text-body);
  line-height: var(--df-leading-body);
  color: var(--df-ink-body);
}
.gate-support__title {
  display: block;
  margin-block-end: var(--df-space-1);
  font-weight: var(--df-weight-strong);
  color: var(--df-ink-strong);
}
.gate-support__body { display: block; }
.gate-support .auth-link {
  display: inline-block;
  margin-block-start: var(--df-space-2);
}

/* At 480 the two columns stop fitting and the labels wrap mid-word before the
   values wrap at all. Stacked, the pairing is carried by proximity and the
   muted label colour instead of by alignment. */
@media (max-width: 30rem) {
  .gate-facts__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--df-space-1);
  }
}