/*
 * The signed-out screens' ground and glass, dark look (the owner's choice, 2026-10-26: background A
 * "charcoal dial" with glass level 1, "clear glass", the same as the public site's). Loaded after
 * auth.css, whose signed-out section still lays these screens out; this file only paints behind
 * them and turns their frames to glass. A device set to light keeps auth.css's paper as it is, and
 * the signed-in app never has a .shell, so none of this reaches it.
 *
 * Two fixed layers behind every signed-out screen, both pseudo-elements of .shell, no DOM:
 *   .shell::before  the ground: warm charcoal, the 22px dot grid, brick glows, a soft vignette,
 *                   the ATLET symbol (never mirrored) and two sensor traces;
 *   .shell::after   the brand dial. Wide screens (dial-wide.svg): its centre past the reading
 *                   start's edge, so its arc sweeps down past the form's far side, crisp above
 *                   and below the frames and blurred through them. Phones (dial-ring.svg): round the form.
 * The pictures are written by scripts/signin-bg-pictures.mjs, which also prints the dials' R and B.
 *
 * The glass (the form's frame, a status card, the folded Telegram row): the site's frame tokens
 * (--glass-*), a light, mostly clear fill, the backdrop blurred and saturated, a 1px edge lit from
 * above (::before, masked to the border), an inner highlight under the top edge, a soft drop shadow
 * and one faint diagonal sheen (::after), never moving.
 * A status card (a failure, nothing open yet) has its small greys over whatever is behind its start
 * side, in either language: its glass a shade darker and those greys a step lighter (below).
 * The entrance: once a visit, on the first signed-out screen. Reduced motion: none. Reduced
 * transparency: opaque frames and bar. Forced colours, print: no ground, no dial.
 */

:root:not([data-theme="light"]) body:has(> #app > .shell) { background: #151417; }

:root:not([data-theme="light"]) .shell,
:root:not([data-theme="light"]) .shell:has(.form-card > .loader) {
  /* The ground's colours (rgb): the muted brick of the glows. */
  --sb-brick: 166, 44, 48;
  --auth-ink-2: #1C1B1F;
  /* The kicker's small red, a step lighter where it can sit over the dial's ticks and glows (as the
     site's small red over its figures): at least 4.5:1 against the brightest of what is behind it. */
  --auth-red-text: #F35F5F;

  /* ---- the glass: the same tokens as the site's frames ---- */
  --glass-fill: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035) 55%, rgba(255, 255, 255, .06));
  /* A darker layer under the fill, so the words keep their contrast over the light behind. */
  --glass-tint: linear-gradient(rgba(14, 12, 16, .12), rgba(14, 12, 16, .12));
  --glass-blur: blur(22px) saturate(180%);
  --glass-edge: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06));
  --glass-lit: inset 0 1px 0 rgba(255, 255, 255, .22);
  --glass-drop: 0 24px 60px -24px rgba(0, 0, 0, .65);
  --glass-sheen: linear-gradient(118deg, transparent 16%, rgba(255, 255, 255, .06) 25%, rgba(255, 255, 255, .03) 34%, transparent 42%);
  /* Opaque, for reduced transparency and for a browser without backdrop-filter. */
  --glass-solid: #1C1B1F;
  --glass-solid-edge: rgba(255, 255, 255, .16);

  /* The wells inside the glass stay dark, so a placeholder still reads. */
  --auth-field: rgba(12, 11, 14, .72);
  --auth-field-solid: #121114;
  --auth-top: rgba(21, 20, 23, .58);
  --auth-line: rgba(255, 255, 255, .09);
  background: none;
}

/* ---- the ground ----------------------------------------------------------------------- */
:root:not([data-theme="light"]) .shell::before,
:root:not([data-theme="light"]) .shell::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
}
/* Where the form's frame ends on the reading start's side (the page's 1200px wrap, its gutter). */
:root:not([data-theme="light"]) .shell {
  --sb-edge: calc(min(50% + 600px, 100%) - var(--auth-gutter));
}
:root:not([data-theme="light"]) .shell::before {
  inset: 0;
  contain: strict;
  /* Desktop, Persian: the form on the right, the brand on the left; the symbol at the corner opposite the dial. */
  --sb-sym: left -60px bottom -110px / auto 500px;
  --sb-glow-form: radial-gradient(520px 420px at calc(min(50% + 600px, 100%) - var(--auth-gutter) - 220px) 47%, rgba(var(--sb-brick), .3), transparent 70%);
  --sb-glow-corner: radial-gradient(48vmax 40vmax at 0% 100%, rgba(var(--sb-brick), .15), transparent 70%);
  background:
    radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.2px) 0 0 / 22px 22px,
    url("../assets/signin-bg/symbol.svg") no-repeat var(--sb-sym),
    url("../assets/signin-bg/waves.svg") no-repeat left 0 bottom 26px / 100% 120px,
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(8, 7, 9, .55) 100%),
    var(--sb-glow-form),
    var(--sb-glow-corner),
    radial-gradient(40vmax 30vmax at 30% 0%, rgba(var(--sb-brick), .07), transparent 70%),
    linear-gradient(180deg, #19181C, #141316 55%, #111013);
}
:root:not([data-theme="light"])[dir="ltr"] .shell::before {
  --sb-sym: right -60px bottom -110px / auto 500px;
  --sb-glow-form: radial-gradient(520px 420px at calc(max(50% - 600px, 0px) + var(--auth-gutter) + 220px) 47%, rgba(var(--sb-brick), .3), transparent 70%);
  --sb-glow-corner: radial-gradient(48vmax 40vmax at 100% 100%, rgba(var(--sb-brick), .15), transparent 70%);
}

/* ---- the dial: R is its arc's radius, B half its drawing's box (the pictures' script prints both) */
:root:not([data-theme="light"]) .shell::after {
  --sb-r: 900px;
  --sb-b: 1030px;
  --sb-cx: calc(var(--sb-edge) - 420px + var(--sb-r));
  --sb-cy: calc(50% + 70px);
  width: calc(2 * var(--sb-b));
  height: calc(2 * var(--sb-b));
  left: calc(var(--sb-cx) - var(--sb-b));
  top: calc(var(--sb-cy) - var(--sb-b));
  background: url("../assets/signin-bg/dial-wide.svg") no-repeat center / 100% 100%;
}
:root:not([data-theme="light"])[dir="ltr"] .shell::after {
  --sb-cx: calc(100% - var(--sb-edge) + 450px - var(--sb-r));
  --sb-cy: calc(50% + 240px);
  scale: -1 1;
}

/* ---- the glass -------------------------------------------------------------------------- */
/* The frames: the form's, a status screen's, the folded Telegram row (not the one inside a frame). */
:root:not([data-theme="light"]) .shell :is(.auth-frame, .form-card.status, .tg-card:not(.auth-frame > .tg-card)) {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background: var(--glass-fill), var(--glass-tint);
  background-origin: border-box;
  box-shadow: var(--glass-lit), var(--glass-drop);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:not([data-theme="light"]) .shell :is(.auth-frame, .form-card.status, .tg-card:not(.auth-frame > .tg-card)) {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}
/* No backdrop-filter: clear glass would show the ground sharp behind the words; opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:not([data-theme="light"]) .shell :is(.auth-frame, .form-card.status, .tg-card:not(.auth-frame > .tg-card)) {
    background: var(--glass-solid);
  }
}
/* The edge: 1px, lit from above, fading down the sides (the border's own box, masked to its ring). */
:root:not([data-theme="light"]) .shell :is(.auth-frame, .form-card.status, .tg-card:not(.auth-frame > .tg-card))::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: var(--glass-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* The line under a frame's title in the glass's own white, not the grey a step down: on a phone the
   dial's lit knob glows through the top of the frame, and the grey fell under 7:1 over it. */
:root:not([data-theme="light"]) .shell .auth-frame .intro { color: var(--auth-text); }
/* The sheen: one faint diagonal band across the pane, under the words. */
:root:not([data-theme="light"]) .shell :is(.auth-frame, .form-card.status, .tg-card:not(.auth-frame > .tg-card))::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass-sheen);
  pointer-events: none;
}
:root:not([data-theme="light"]) .auth-top {
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* ---- phones and narrow windows: one column, the page from the top ------------------------- */
@media (max-width: 899px) {
  /* The ring's lit knob sits behind the top of the frame here: the glass a shade darker, so the words
     over it keep 7:1 with room to spare. */
  :root:not([data-theme="light"]) .shell { --glass-tint: linear-gradient(rgba(14, 12, 16, .2), rgba(14, 12, 16, .2)); }
  /* ... and the greys inside the glass a step lighter, for the same reason (the hint under "Support",
     the forgotten-password link on a tablet): body 7:1, the small grey 4.5:1, over the knob too. */
  :root:not([data-theme="light"]) .shell :is(.auth-frame, .form-card.status, .tg-card:not(.auth-frame > .tg-card)) {
    --auth-text-2: #E7E5E4;
    --auth-text-3: #B9B3AE;
  }
  :root:not([data-theme="light"]) .shell::before,
  :root:not([data-theme="light"])[dir="ltr"] .shell::before {
    --sb-sym: right -40px bottom -60px / auto 250px;
    --sb-glow-form: radial-gradient(360px 300px at 30% 420px, rgba(var(--sb-brick), .32), transparent 70%);
    --sb-glow-corner: radial-gradient(70vmax 46vmax at 100% 100%, rgba(var(--sb-brick), .15), transparent 70%);
    background:
      radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.2px) 0 0 / 22px 22px,
      url("../assets/signin-bg/symbol-phone.svg") no-repeat var(--sb-sym),
      url("../assets/signin-bg/waves.svg") no-repeat left 0 bottom 6px / 200% 64px,
      radial-gradient(140% 100% at 50% 40%, transparent 55%, rgba(8, 7, 9, .55) 100%),
      var(--sb-glow-form),
      var(--sb-glow-corner),
      linear-gradient(180deg, #19181C, #141316 55%, #111013);
  }
  :root:not([data-theme="light"]) .shell::after,
  :root:not([data-theme="light"])[dir="ltr"] .shell::after {
    --sb-r: 200px;
    --sb-b: 274px;
    --sb-cx: 50%;
    --sb-cy: 465px;
    scale: none;
    background-image: url("../assets/signin-bg/dial-ring.svg");
  }
}
@media (min-width: 600px) and (max-width: 899px) and (min-height: 600px) {
  :root:not([data-theme="light"]) .shell::after,
  :root:not([data-theme="light"])[dir="ltr"] .shell::after { --sb-cy: calc(481px + max(40px, (100svh - 784px) / 2)); }
}

/* ---- a status card (a failure, nothing open yet) ------------------------------------------- */
/* Its small greys (the hint under "Support", each channel's name) start at the card's reading start,
   and in English that is where the phone ring's lit knob glows through (below 900px) and where the
   sheen and the form's glow are brightest (wide screens): measured at 3.6-3.9:1 there. So here the
   glass is a shade darker and those greys a step lighter, in both languages, for 4.5:1 over it. */
:root:not([data-theme="light"]) .shell .form-panel > .form-card.status {
  --glass-tint: linear-gradient(rgba(14, 12, 16, .2), rgba(14, 12, 16, .2));
  --auth-text-3: #B9B3AE;
}
@media (max-width: 899px) {
  :root:not([data-theme="light"]) .shell .form-panel > .form-card.status {
    --glass-tint: linear-gradient(rgba(14, 12, 16, .3), rgba(14, 12, 16, .3));
    --auth-text-3: #C6C0BB;
  }
}

/* ---- the waits (Telegram's sign-in, the account opening) ------------------------------------ */
/* No form here, only the launcher's logo in the middle of the screen: the ring drawn round it at every
   width, as a phone has it, and on a wide screen the form's glow behind it rather than off to one side. */
:root:not([data-theme="light"]) .shell:has(.form-card > .loader)::after {
  --sb-r: 200px;
  --sb-b: 274px;
  --sb-cx: 50%;
  --sb-cy: calc(50% + 45px);
  scale: none;
  background-image: url("../assets/signin-bg/dial-ring.svg");
}
@media (min-width: 900px) {
  :root:not([data-theme="light"]) .shell:has(.form-card > .loader)::before {
    --sb-glow-form: radial-gradient(520px 420px at 50% 50%, rgba(var(--sb-brick), .3), transparent 70%);
  }
}

/* ---- the entrance: once a visit, slow, quiet --------------------------------------------- */
/* Only on the visit's first signed-out screen (ui.js entrance() marks it .entering); a screen drawn
   while it is still coming in carries it on from --sb-into, the time already past (negative). */
@keyframes sb-ground-in { from { opacity: 0; } }
@keyframes sb-dial-in { from { opacity: 0; transform: rotate(-10deg); } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-theme="light"]) .shell.entering::before { animation: sb-ground-in .9s ease-out var(--sb-into, 0ms) backwards; }
  :root:not([data-theme="light"]) .shell.entering::after { animation: sb-dial-in 2.4s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--sb-into, 0ms)) backwards; }
}

/* Reduced transparency: opaque frames and bar, a plain hairline, no sheen (the ground stays, behind them). */
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-theme="light"]) .shell :is(.auth-frame, .form-card.status, .tg-card:not(.auth-frame > .tg-card)) {
    border-color: var(--glass-solid-edge);
    background: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root:not([data-theme="light"]) .shell :is(.auth-frame, .form-card.status, .tg-card:not(.auth-frame > .tg-card))::before,
  :root:not([data-theme="light"]) .shell :is(.auth-frame, .form-card.status, .tg-card:not(.auth-frame > .tg-card))::after { content: none; }
  :root:not([data-theme="light"]) .auth-top { background: #161618; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active), print {
  .shell::before, .shell::after,
  .shell :is(.auth-frame, .form-card.status, .tg-card)::before,
  .shell :is(.auth-frame, .form-card.status, .tg-card)::after { display: none; }
}