/* threshold.css — the sign-in pages in the phone's dress (lib/login_page.dart, lib/onboarding/account_sheet.dart,
   lib/widgets/legal_line.dart; login.jpg, account-sheet.jpg): /login, /register, /register/pending,
   /forgot-password, /reset-password, /confirm-email, /resend-confirmation. Pre-session pages: they keep their own
   layout (_Layout, no rail) and wear this sheet AFTER login.css, which stays for what its tests pin. One column at
   every width — the phone's 380-px column, centred on the night — instead of login.css's scaled desktop canvas:
   the app's night ground, the logo tile, the glass card with the serif title, the phone's field dress, the gold
   door, the provider pills, the quiet links and the one-sentence legal line. */

:root{
  --thr-gold:#F3C969; --thr-gold-bright:#FFF4C2; --thr-gold-pale:#FFE9A3; --thr-ink:#2A1C08;
  --thr-cream:#F3E4C0; --thr-hi:rgba(243,228,192,.82); --thr-mid:rgba(243,228,192,.70); --thr-lo:rgba(243,228,192,.60);
  --thr-rim:rgba(243,201,105,.30); --thr-rim-faint:rgba(243,201,105,.18);
  --thr-card:linear-gradient(to bottom right,rgba(30,22,64,.851),rgba(18,11,38,.922));
  --thr-cta:linear-gradient(to bottom right,#FFE9A3 0%,#F3C969 60%,#B9914F 100%);
  --header-h:0px;
}

/* The ground: NightBackground (theme.dart nightGradient), fixed behind the page; no header, no globe. */
body{ background:#120C24; }
body::before{ background:radial-gradient(circle calc(1.6 * min(100vw,100vh)) at 35% 10%,#322559 0%,#1E1638 50%,#120C24 100%) #120C24; }
.app-header, .canvas-globe{ display:none; }

.login-stage{
  height:auto; min-height:100svh; overflow:visible; display:flex; align-items:center; justify-content:center;
  padding:24px max(24px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.login-canvas{ position:static; width:100%; max-width:380px; aspect-ratio:auto; container-type:normal; display:flex; flex-direction:column; }

/* The logo tile (_LogoHeader): 68, radius 18, the gold glow. */
.thr-logo{
  align-self:center; width:68px; height:68px; border-radius:18px; display:grid; place-items:center; margin-bottom:24px;
  background:linear-gradient(145deg,#8a5cff,#6c3ff0); box-shadow:0 0 28px rgba(243,201,105,.15);
}
.thr-logo img{ width:50px; height:50px; display:block; }

/* The card: GlassCard, padding 24 26 24 16. */
.login-card{
  position:static; transform:none; width:100%; font-size:16px; z-index:auto;
  padding:26px 24px 16px; border-radius:16px; background:var(--thr-card); border:1px solid var(--thr-rim-faint);
  box-shadow:0 8px 28px rgba(0,0,0,.4);
}
.login-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:2.2px; color:var(--thr-gold); margin:0 0 8px; }
.login-title{
  margin:0 0 22px; text-align:center; font-family:var(--serif); font-weight:600; font-size:26px; line-height:1.15; color:var(--thr-gold-bright);
}
.login-intro{ margin:0 0 18px; text-align:center; font-size:14.5px; line-height:1.5; color:var(--thr-mid); }
.login-form{ display:flex; flex-direction:column; gap:12px; }

/* The phone's field dress (theme.dart inputDecorationTheme): fill 25 % black, a bronze rim at 35 %, radius 10,
   16 × 14 inside, the label inside the field (placeholder), gold on focus. */
.thr-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.login-label{ font-size:13px; font-weight:500; color:var(--thr-mid); margin:2px 0 -6px; }
.login-input{
  width:100%; min-height:52px; padding:14px 16px; border-radius:10px; border:1px solid rgba(185,145,79,.35);
  background:rgba(0,0,0,.25); color:var(--thr-cream); font-family:var(--sans); font-size:16px; outline:none;
}
.login-input::placeholder{ color:var(--thr-mid); }
.login-input:focus{ border-color:var(--thr-gold); box-shadow:0 0 0 .4px var(--thr-gold); }

/* The gold door (GoldButton): 48 tall, stadium, the CTA gradient, Inter 13.5 w600 ls 1.4 uppercase, the glow. */
.login-submit, .auth-result .btn-gold{
  width:100%; min-height:48px; margin-top:8px; padding:0 26px; border:0; border-radius:999px; cursor:pointer;
  background:var(--thr-cta); color:var(--thr-ink); font-family:var(--sans); font-weight:600; font-size:13.5px;
  letter-spacing:1.4px; text-transform:uppercase; box-shadow:0 0 20px rgba(243,201,105,.26);
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}

/* _ErrorBanner: red-tinted panel, soft red rim, light-red centred text. */
.login-error{
  margin:2px 0 0; padding:10px 12px; border-radius:10px; text-align:center;
  background:rgba(255,90,90,.12); border:1px solid rgba(255,90,90,.30); color:#FFB4B4; font-weight:500; font-size:13.5px; line-height:1.4;
}

/* „Zapomenuté heslo?" — inside the card, right, gold 13 w500. */
.thr-forgot{ display:flex; justify-content:flex-end; margin-top:4px; }
.thr-forgot a{ min-height:36px; display:inline-flex; align-items:center; padding:4px 8px; color:var(--thr-gold); font-size:13px; font-weight:500; text-decoration:none; }

.login-resend{ margin:10px 0 0; text-align:center; }
.login-resend-btn{ min-height:44px; background:none; border:0; color:var(--thr-gold); font-size:14px; font-weight:500; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* LabeledDivider „nebo pokračuj přes". */
.ext-auth-divider{
  display:flex; align-items:center; gap:14px; margin:24px 0 18px; color:var(--thr-mid);
  font-family:var(--sans); font-size:13.5px; text-transform:none; letter-spacing:0;
}
.ext-auth-divider::before, .ext-auth-divider::after{ content:""; flex:1; height:1px; background:#B9914F; opacity:.55; }
.ext-auth-providers{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }

/* The provider pills (GoogleSignInButton / AppleSignInButton): 48, white, stadium, the mark and 16 w500. */
.ext-auth-google-btn{
  margin-top:0; min-height:48px; border:0; border-radius:999px; background:#fff; color:#1F1F1F;
  font-size:16px; font-weight:500; gap:10px;
}
.ext-auth-google-btn svg{ width:20px; height:20px; }
.ext-auth-apple-official{ margin-top:0; min-height:48px; }
.ext-auth-apple-official > *{ max-height:48px; }
.ext-auth-btn{ min-height:48px; border-radius:999px; background:#fff; color:#000; border:0; font-size:16px; font-weight:500; }
.ext-auth-btn[disabled]{ opacity:.55; }
.ext-auth-soon{ color:#5b4a1e; background:rgba(0,0,0,.06); }

/* The quiet doors under it. */
.login-links{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 8px; margin-top:24px; }
.login-links a{ min-height:44px; display:inline-flex; align-items:center; font-size:15px; text-decoration:none; color:var(--thr-gold); }
.thr-new{ color:var(--thr-mid); font-size:15px; }
.thr-quiet{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px; align-self:center;
  color:var(--thr-mid); font-size:14.5px; text-decoration:underline; text-decoration-color:var(--thr-lo); text-underline-offset:3px;
}
.login-links a.thr-quiet{ color:var(--thr-mid); font-size:14.5px; text-decoration:underline; text-decoration-color:var(--thr-lo); text-underline-offset:3px; }
/* The unconfigured Apple placeholder: login.css's mark has no logo to mask (an ink square) — the word says it. */
.ext-auth-apple-mark{ display:none; }

/* The account sheet's two privacy lines: a gold bullet, 14.5 creamMid. */
.thr-privacy{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.thr-privacy li{ position:relative; padding-left:22px; font-size:14px; line-height:1.4; color:var(--thr-mid); }
.thr-privacy li::before{ content:""; position:absolute; left:2px; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--thr-gold); }

/* LegalLine: ONE quiet sentence, the two documents underlined inside it. */
.thr-legal{ margin:18px 0 0; text-align:center; font-size:11.5px; line-height:1.4; color:var(--thr-lo); }
.thr-legal a{ color:var(--thr-mid); text-decoration:underline; text-decoration-color:var(--thr-lo); text-underline-offset:2px; }

/* The pending page. */
.pending-email{ color:var(--thr-gold-bright); }
.login-hint{ font-size:13px; line-height:1.45; color:var(--thr-lo); margin:14px 0 0; text-align:center; }
.pending-links{ gap:4px; margin-top:20px; }
.pending-links span, .pending-startover{ font-size:14px; color:var(--thr-mid); }
.pending-links a, .pending-linkbtn{ color:var(--thr-gold); min-height:44px; display:inline-flex; align-items:center; }

/* /confirm-email: the static text page becomes the same card on the same night. */
.auth-result.static-page{
  max-width:380px; margin:0 auto; padding:26px 24px 20px; border-radius:16px;
  background:var(--thr-card); border:1px solid var(--thr-rim-faint); box-shadow:0 8px 28px rgba(0,0,0,.4);
}
.thr-confirm{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:24px max(24px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.thr-confirm .thr-logo{ margin-left:auto; margin-right:auto; }
.auth-result h1{ margin:0 0 12px; font-family:var(--serif); font-weight:600; font-size:26px; line-height:1.15; color:var(--thr-gold-bright); }
.auth-result p{ font-size:14.5px; line-height:1.5; color:var(--thr-mid); }
.auth-result a:not(.btn-gold){ min-height:44px; display:inline-flex; align-items:center; color:var(--thr-gold); }

@media (max-width:420px){
  .login-stage{ padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
  .login-card{ padding:24px 20px 14px; }
}

/* ---------------------------------------------------------------------------------------------------------------
   ≥ 1100: the Redesign Lab's SignIn board (SignIn.dc.html, direction A) — the threshold split. On the left the night
   with the gold-hatched Europe glowing and fading out to the right, the stars, the unlit gold desk globe over
   "SpinGlobus" and its line (_ThresholdSide.cshtml); on the right a 440-px column: the glass card (the title, the
   labelled fields, the gold door — the page's one gold — and the way to a forgotten password), then "or continue
   with", the white provider pills, the way to the other door and the one-sentence legal line. Every field, name,
   handler and class stays; only the composition and the dress change. The numbers are the board's.
   --------------------------------------------------------------------------------------------------------------- */
.thr-side, .thr-brand{ display:none; }

@media (min-width:1100px){
  .login-stage, .thr-confirm{
    position:relative; min-height:100svh; display:flex; flex-direction:row; justify-content:flex-end; align-items:center;
    padding:70px clamp(48px,8.33vw,160px) 72px 24px;
  }
  .login-canvas{ position:relative; z-index:1; width:440px; max-width:440px; }
  .login-stage .thr-logo, .thr-confirm .thr-logo{ display:none; }

  /* The night on the left: its own glow, the stars, the atlas; it fades into the page toward the card. */
  .thr-side{
    /* The board's 820 at every width: its fade (60 → 94 %) is what hides the atlas's own right edge. */
    display:block; position:absolute; left:0; top:0; bottom:0; width:820px; overflow:hidden; pointer-events:none;
    background:radial-gradient(64% 58% at 40% 64%,#241b52 0%,#1a1340 52%,rgba(26,19,64,0) 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 60%,rgba(0,0,0,0) 94%);
    mask-image:linear-gradient(90deg,#000 0%,#000 60%,rgba(0,0,0,0) 94%);
  }
  .thr-side__stars{ position:absolute; inset:0; }
  .night-ground__star{ position:absolute; border-radius:50%; background:#fff4c2; }
  .night-ground__star.is-tw{ animation:thr-tw 5s ease-in-out infinite; }
  .thr-side__atlas{
    /* 294 from the top as the board draws it; on a taller screen it sinks to meet the screen's foot, never the foot
       of a page that is taller than the screen (Register). */
    position:absolute; left:-141px; top:clamp(294px, calc(100% - 606px), calc(100vh - 606px)); width:880px; height:608px; display:block;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 18%,#000 80%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 18%,#000 80%,rgba(0,0,0,0) 100%);
  }

  /* The brand: the globe (112, nudged left by its own ring), the wordmark at 50, the line in italic at 22. */
  .thr-brand{ display:flex; position:absolute; left:96px; top:80px; z-index:1; flex-direction:column; align-items:flex-start; }
  .thr-brand__home{ display:flex; flex-direction:column; align-items:flex-start; color:#f6efdc; text-decoration:none; }
  .thr-brand__globe{ display:block; width:112px; height:112px; margin-left:-14px; }
  .thr-brand__word{
    margin-top:8px; font-family:var(--serif); font-weight:600; font-size:50px; line-height:1.04; letter-spacing:-.01em;
    color:#f6efdc; text-shadow:0 0 44px rgba(243,201,105,.28);
  }
  .thr-brand__home:focus-visible{ outline:2px solid #f3c969; outline-offset:6px; border-radius:12px; }
  .thr-brand__tag{
    margin:10px 0 0; font-family:var(--serif); font-style:italic; font-weight:500; font-size:22px; line-height:1.36;
    color:rgba(246,239,220,.86);
  }

  /* The card. */
  .login-card, .thr-confirm > .auth-result.static-page{
    padding:34px 40px 20px; border-radius:24px; font-size:16px;
    background:linear-gradient(160deg,rgba(42,33,88,.55) 0%,rgba(20,15,45,.8) 100%);
    border:1px solid rgba(243,201,105,.24);
    box-shadow:inset 0 1px 0 rgba(246,239,220,.08),0 40px 100px -40px rgba(0,0,0,.85);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  }
  .thr-confirm > .auth-result.static-page{ position:relative; z-index:1; width:440px; max-width:440px; margin:0; padding-bottom:28px; }
  .login-eyebrow{ font-size:12px; font-weight:600; letter-spacing:.18em; margin-bottom:12px; text-align:center; }
  .login-title, .auth-result h1{ margin:0; font-size:36px; line-height:1.12; color:#f6efdc; text-shadow:0 0 36px rgba(243,201,105,.22); }
  .auth-result h1{ margin-bottom:14px; }
  .login-intro{ margin:14px 0 0; font-size:15px; line-height:1.5; color:rgba(246,239,220,.78); }
  .auth-result p{ font-size:15px; color:rgba(246,239,220,.78); }
  .login-card .login-form{ margin-top:28px; gap:0; }
  /* The labels the phone keeps inside its fields stand above them here, as the board draws them. */
  .login-card .thr-sr{ position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; }
  .login-label{ margin:0 0 8px; font-size:13px; font-weight:600; letter-spacing:.02em; color:rgba(246,239,220,.82); }
  .login-input + .login-label{ margin-top:18px; }
  .login-input{
    min-height:52px; height:52px; padding:0 18px; border-radius:14px; border:1px solid rgba(185,145,79,.45);
    background:rgba(10,7,24,.55); color:#f6efdc; font-size:15.5px; transition:border-color .15s linear,box-shadow .15s linear;
  }
  .thr-sr + .login-input::placeholder{ color:transparent; }
  .login-input:focus{ border-color:#f3c969; box-shadow:0 0 0 4px rgba(243,201,105,.12),inset 0 0 0 .5px #f3c969; }
  .login-submit, .auth-result .btn-gold{
    min-height:52px; height:52px; margin-top:24px; font-size:15.5px; font-weight:600; letter-spacing:0; text-transform:none;
    background:linear-gradient(135deg,#ffe9a3 0%,#f3c969 60%,#b9914f 100%);
    box-shadow:0 0 22px rgba(243,201,105,.35),inset 0 1px 0 rgba(255,255,255,.45);
  }
  .login-error{ margin-top:14px; }
  .thr-forgot{ margin-top:6px; }
  .thr-forgot a{ min-height:44px; padding:0 2px; font-size:14px; font-weight:500; color:#f3c969; }
  .thr-forgot a:hover, .login-links a:hover{ color:#fff4c2; }
  .login-card .login-links{ margin-top:16px; }
  .login-hint{ font-size:13.5px; color:rgba(246,239,220,.7); }

  /* Under the card: the divider, the white pills, the other door, the legal line. */
  .ext-auth-divider{ margin:26px 0 0; gap:16px; font-size:13px; color:rgba(246,239,220,.74); }
  .ext-auth-divider::before, .ext-auth-divider::after{ background:rgba(185,145,79,.5); opacity:1; }
  .ext-auth-providers{ margin-top:20px; gap:12px; }
  .ext-auth-google-btn{
    min-height:52px; height:52px; gap:12px; border:0; font-size:15.5px; font-weight:500; color:#1f1f1f;
    box-shadow:0 14px 34px -18px rgba(0,0,0,.7);
  }
  .ext-auth-google-btn:hover{ background:#f6f1e4; box-shadow:0 14px 34px -18px rgba(0,0,0,.7); }
  .ext-auth-btn{ min-height:52px; font-size:15.5px; box-shadow:0 14px 34px -18px rgba(0,0,0,.7); }
  .ext-auth-apple-error:empty{ display:none; }   /* the slot for Apple's answer takes no room until there is one */
  .login-canvas > .login-links{ margin-top:22px; }
  .login-links a{ font-size:15px; font-weight:600; }
  .thr-new{ font-size:15px; color:rgba(246,239,220,.76); }
  .login-links a.thr-quiet{ font-weight:400; color:rgba(246,239,220,.76); text-decoration-color:rgba(246,239,220,.4); text-underline-offset:4px; }
  .thr-privacy{ margin-top:22px; }
  .thr-privacy li{ font-size:14.5px; color:rgba(246,239,220,.78); }
  .thr-legal{ width:400px; max-width:100%; margin:14px auto 0; font-size:12.5px; line-height:1.55; color:rgba(246,239,220,.72); }
  .thr-legal a{ color:rgba(246,239,220,.9); text-decoration-color:rgba(246,239,220,.45); text-underline-offset:3px; }
}
/* The cookie notice over the threshold: Log in is the page's one filled gold, so Accept is the kit's outlined door. */
.cookie-consent .btn-gold{ background:transparent; color:#f3c969; border:1px solid rgba(243,201,105,.55); box-shadow:none; }
.cookie-consent .btn-gold:hover{ background:rgba(243,201,105,.08); filter:none; }
@keyframes thr-tw{ 0%,100%{ opacity:.22; } 50%{ opacity:.95; } }
@media (prefers-reduced-motion:reduce){ .night-ground__star.is-tw{ animation:none; } }