/* Sign-in, registration and reset pages: the study desk, with the form as the top index card of a
   small deck. Everything on the card sits on its ruled lines (--line).
   Loaded after tokens, base and components; these pages do not use the app's view CSS. */

.brand-mark {
  flex: none;
  width: 34px;
  height: 26px;
  border-radius: var(--r-s);
  background:
    linear-gradient(var(--card-margin), var(--card-margin)) 8px 0 / 2px 100% no-repeat,
    linear-gradient(to bottom, transparent 6px, var(--card-margin) 6px 7.5px, transparent 7.5px),
    repeating-linear-gradient(to bottom, transparent 0 5.5px, var(--card-rule) 5.5px 6.5px),
    var(--card-paper);
  box-shadow: 0 0 0 1.5px var(--card-ink), 2px 3px 0 -0.5px color-mix(in srgb, var(--card-ink) 25%, transparent);
  transform: rotate(-4deg);
}

/* ------------------------------------------------------------------ the desk */

.auth-page {
  --line: 32px;
  --card-w: 460px;
  --margin-x: 64px;            /* left padding of a card; its red margin line sits at 70% of it */
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  padding: 28px clamp(16px, 4vw, 48px) 32px;
  overflow-x: clip;
}

.wordmark { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; justify-self: start; }
.wordmark:hover { text-decoration: none; }
.wordmark strong { display: block; font-size: var(--t-l); font-weight: 750; line-height: 1.2; letter-spacing: -.005em; }
.wordmark small { display: block; font-size: var(--t-xs); color: var(--muted); line-height: 1.3; }

.auth-foot {
  justify-self: center;
  max-width: 58ch;
  margin: 0;
  text-align: center;
  font-size: var(--t-s);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: balance;
}

/* ------------------------------------------------------------------ the deck */

.auth-stack {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100%, var(--card-w));
  isolation: isolate;
}

/* Ruled index-card paper, shared by the form and the cards behind it. */
.auth-card, .stack-card {
  outline: 1px solid var(--sheet-edge);
  outline-offset: -1px;
  border-radius: var(--r-l);
  background-color: var(--card-paper);
  background-image:
    linear-gradient(to right, transparent calc(var(--margin-x) * .7 - 1px), color-mix(in srgb, var(--card-margin) 70%, var(--card-paper)) calc(var(--margin-x) * .7 - 1px) calc(var(--margin-x) * .7 + 1px), transparent calc(var(--margin-x) * .7 + 1px)),
    linear-gradient(to bottom, transparent calc(2 * var(--line) - 2px), var(--card-margin) calc(2 * var(--line) - 2px) calc(2 * var(--line)), transparent calc(2 * var(--line))),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), var(--card-rule) calc(var(--line) - 1px) var(--line));
  box-shadow: var(--shadow-card);
}

.stack-card {
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 0 24px 0 var(--margin-x);
  color: var(--card-ink);
  overflow: hidden;
  animation: fan .7s var(--ease) .15s backwards;
}
.stack-left { transform: translate(-6px, 10px) rotate(-3deg); }
.stack-right { transform: translate(8px, 6px) rotate(2.5deg); box-shadow: var(--shadow-s); }
.stack-topic { margin: 0; height: calc(2 * var(--line)); padding-bottom: 4px; display: flex; align-items: flex-end; font-size: var(--t-s); color: var(--card-muted); line-height: var(--line); }
/* Left card: an exam question whose answer gets circled in red pen. Everything fits the strip
   that shows beside the form. */
.stack-q { max-width: calc(var(--card-w) * .44 - var(--margin-x) - 12px); margin: var(--line) 0 0; font: 750 22px/var(--line) var(--mono); letter-spacing: -.02em; }
.stack-opts { margin: 0; padding: 0; list-style: none; counter-reset: opt; font: 600 17px/var(--line) var(--mono); }
.stack-q span { white-space: nowrap; }
.stack-opts li { counter-increment: opt; }
.stack-answer { position: relative; }
.stack-opts li::before { content: counter(opt, upper-alpha); margin-right: 12px; font-family: var(--font); font-size: var(--t-s); color: var(--card-muted); }
.stack-ring { position: absolute; top: -4px; left: -7px; width: calc(100% + 18px); height: calc(100% + 8px); overflow: visible; pointer-events: none; }
.stack-ring path { fill: none; stroke: var(--card-margin); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; animation: ring .55s cubic-bezier(.6, .1, .4, 1) 1s backwards; }

/* Right card: the review intervals of one flashcard; today's step is marked with the highlighter. */
.stack-when, .stack-ladder { text-align: right; justify-content: flex-end; }
.stack-ladder { margin: var(--line) 0 0; padding: 0; list-style: none; font-size: var(--t-s); line-height: var(--line); color: var(--card-muted); }
.stack-ladder .done::before { content: "✓"; margin-right: 8px; font-weight: 800; color: var(--card-good); }
.stack-ladder .now { justify-self: end; width: max-content; margin-left: auto; padding: 0 6px; font-size: var(--t-l); font-weight: 750; color: var(--on-mark);
  background: linear-gradient(var(--mark), var(--mark)) left 55% / 100% 62% no-repeat; animation: mark .45s var(--ease) 1.5s backwards; }
.stack-ladder li:last-child { opacity: .6; }

@keyframes fan { from { transform: none; } }
@keyframes ring { from { stroke-dashoffset: 1; } }
@keyframes mark { from { background-size: 0 62%; } }

/* With room beside it, the deck fans out so the cards underneath can be read. */
@media (min-width: 1100px) {
  .auth-stack { margin-block: calc(var(--line) * 1.5) calc(var(--line) * 3); }
  .stack-left { transform: translate(-44%, 7%) rotate(-7deg); }
  .stack-right { transform: translate(40%, -3%) rotate(5deg); }
}

/* On the landing page the deck shares the row with the hero text and sits at the right edge, so it
   fans out only where both fans fit, and leans in a little to keep the right one on screen. */
@media (min-width: 1100px) and (max-width: 1439px) {
  .landing-hero .stack-left { transform: translate(-6px, 10px) rotate(-3deg); }
  .landing-hero .stack-right { transform: translate(8px, 6px) rotate(2.5deg); }
}
@media (min-width: 1440px) {
  .landing-hero .auth-stack { margin-right: calc(var(--card-w) * .06); }
  .landing-hero .stack-right { transform: translate(24%, -3%) rotate(4deg); padding-right: 16px; }
}
@media (min-width: 1600px) {  /* bigger cards: lean the deck in a little more */
  .landing-hero .auth-stack { margin-right: calc(var(--card-w) * .12); }
}
}

@media (prefers-reduced-motion: reduce) {
  .stack-card, .stack-ring path, .stack-ladder .now { animation: none; }
}

/* ------------------------------------------------------------------ the form card */

.auth-card {
  --a-ink: var(--card-ink);
  --a-muted: var(--card-muted);
  --a-link: var(--card-link);
  --a-bad: var(--card-bad);
  --a-good: var(--card-good);
  --a-focus: var(--card-link);
  --a-edge: color-mix(in srgb, var(--card-ink) 35%, var(--card-rule));
  --a-tint: color-mix(in srgb, var(--card-ink) 6%, var(--card-paper));
  --slot: calc(2 * var(--line));                 /* an input or button takes two lines... */
  --slot-pad: calc(var(--line) / 5);             /* ...and is inset from both rules */
  position: relative;
  padding: 0 28px var(--line) var(--margin-x);
  color: var(--a-ink);
  box-shadow: var(--shadow-card);
}
.auth-card a:not(.btn) { color: var(--a-link); }
.auth-card :focus-visible { outline-color: var(--a-focus); }

/* The title is written on the header line, above the red rule, as on a real index card. */
.auth-card h1, .auth-card .auth-card-title {
  height: calc(2 * var(--line));
  margin: 0 0 var(--line);
  padding-bottom: 3px;
  display: flex;
  align-items: flex-end;
  color: var(--a-ink);
  font-size: calc(var(--line) * .875);
  font-weight: 750;
  letter-spacing: -.01em;
  line-height: var(--line);
}

/* One line of text that sits on its rule. */
.auth-card label, .auth-card .hint-text, .or, .auth-alt {
  display: block;
  height: var(--line);
  margin: 0;
  padding-top: calc(var(--line) * .3);
  line-height: calc(var(--line) * .7);
  font-size: var(--t-s);
}

.fields-set { display: grid; gap: 0; }
.auth-card .field { display: grid; gap: 0; }
.auth-card label { font-weight: 650; color: var(--a-ink); }
.auth-card .hint-text { color: var(--a-muted); }

.auth-card input {
  width: 100%;
  height: calc(var(--slot) - 2 * var(--slot-pad));
  margin: var(--slot-pad) 0;
  font: inherit;
  font-size: max(16px, calc(var(--line) * .53));
  padding: 0 14px;
  border: 1.5px solid var(--a-edge);
  border-radius: var(--r-s);
  background: var(--card-paper);
  color: var(--a-ink);
}
.auth-card input:hover { border-color: var(--a-muted); }
.auth-card input:focus-visible { outline: 3px solid color-mix(in srgb, var(--a-focus) 40%, transparent); outline-offset: 0; border-color: var(--a-focus); }
.auth-card input[aria-invalid="true"] { border-color: var(--a-bad); }
.auth-card input:disabled { background: var(--a-tint); color: var(--a-muted); }

.pw { position: relative; }
.pw input { padding-right: 74px; }
.pw-toggle {
  position: absolute;
  top: calc(var(--slot-pad) + 5px);
  right: 5px;
  bottom: calc(var(--slot-pad) + 5px);
  min-width: 60px;
  padding: 0 10px;
  font: 600 var(--t-s)/1 var(--font);
  color: var(--a-link);
  background: transparent;
  border: 0;
  border-radius: var(--r-s);
  cursor: pointer;
}
.pw-toggle:hover { background: var(--a-tint); }
.pw-toggle:disabled { color: var(--a-muted); cursor: not-allowed; background: transparent; }

.problems { margin: 0; padding: 0 0 0 20px; color: var(--a-bad); font-size: var(--t-s); line-height: var(--line); }
.problems[hidden], .form-error[hidden], .notice[hidden], #google[hidden] { display: none; }

/* Messages take whole lines too, marked in the margin like a correction. */
.form-error, .notice {
  margin: 0 0 var(--line);
  padding: 0 12px;
  border-radius: var(--r-s);
  box-shadow: inset 3px 0 0 var(--a-bad);
  background: color-mix(in srgb, var(--a-bad) 8%, var(--card-paper));
  color: var(--a-bad);
  font-size: var(--t-s);
  line-height: var(--line);
}
.notice { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mark) 45%, var(--card-ink)); background: color-mix(in srgb, var(--mark) 32%, var(--card-paper)); color: var(--a-ink); }
.notice.good { box-shadow: inset 3px 0 0 var(--a-good); background: color-mix(in srgb, var(--a-good) 9%, var(--card-paper)); color: var(--a-good); }
.notice.good a { color: var(--a-good); font-weight: 700; }
.form-error:focus-visible { outline: 3px solid color-mix(in srgb, var(--a-focus) 40%, transparent); outline-offset: 2px; }

.auth-submit, .auth-google {
  width: 100%;
  height: calc(var(--slot) - 2 * var(--slot-pad));
  min-height: 44px;
  margin: calc(var(--line) + var(--slot-pad)) 0 var(--slot-pad);
  justify-content: center;
}
.auth-google { margin-top: var(--slot-pad); }
.auth-card .btn { --btn-bg: var(--card-ink); --btn-fg: var(--card-paper); --btn-border: var(--card-ink); text-decoration: none; font-size: max(15px, calc(var(--line) * .5)); }
.auth-card .btn:hover { --btn-bg: color-mix(in srgb, var(--card-ink) 80%, var(--card-paper)); }
.auth-card .btn.secondary { --btn-bg: var(--card-paper); --btn-fg: var(--card-ink); --btn-border: var(--a-edge); }
.auth-card .btn.secondary:hover { --btn-bg: var(--a-tint); --btn-border: var(--card-ink); }
.auth-google svg { width: 18px; height: 18px; flex: none; }

.or { display: flex; align-items: center; gap: 12px; color: var(--a-muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; margin-top: 1px; background: var(--a-edge); }
.auth-alt { margin-top: var(--line); color: var(--a-muted); }
.auth-step { position: absolute; top: calc(var(--line) * .3); left: var(--margin-x); margin: 0; font-size: var(--t-xs); line-height: calc(var(--line) * .7); color: var(--a-muted); }
.auth-card .hint-text.bad { color: var(--a-bad); }
.password-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: var(--t-xs); line-height: var(--line); color: var(--a-muted); }
.password-rules li::before { content: "○"; display: inline-block; width: 18px; }
.password-rules li.ok { color: var(--a-good); }
.password-rules li.ok::before { content: "✓"; font-weight: 800; }
.auth-card label.link-like { height: auto; padding: 0; line-height: 1.4; color: var(--a-link); text-decoration: underline; cursor: pointer; }
.auth-card input.visually-hidden { width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; }
.auth-card input.visually-hidden:focus-visible + *, .profile-photo:has(input:focus-visible) .link-like { outline: 3px solid color-mix(in srgb, var(--a-focus) 40%, transparent); }
.auth-card label small { font-weight: 400; color: var(--a-muted); font-size: inherit; }
.auth-card label.auth-remember { display: flex; align-items: center; gap: 8px; margin-top: var(--line); font-weight: 400; cursor: pointer; }
.auth-remember input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--a-link); }
.auth-remember + .auth-alt { margin-top: 0; }

/* ------------------------------------------------------------------ sizes */

@media (min-width: 1600px) {
  .auth-page { --line: 36px; --card-w: 520px; --margin-x: 72px; padding-top: 40px; }
  .wordmark strong { font-size: var(--t-xl); }
  .auth-foot { font-size: var(--t-m); }
  .stack-q { font-size: var(--t-2xl); }
  .stack-opts { font-size: var(--t-l); }
}

@media (min-width: 2200px) {
  .auth-page { --line: 40px; --card-w: 580px; --margin-x: 80px; }
  .stack-q { font-size: var(--t-2xl); }
  .stack-opts { font-size: var(--t-xl); }
}

@media (max-width: 480px) {
  .auth-page { --margin-x: 50px; grid-template-rows: auto; align-content: start; gap: 24px; padding: 18px 14px 24px; }
  .auth-stack { align-self: start; }
  .auth-foot { margin-top: 8px; }
  .auth-card { padding-right: 18px; }
  .stack-left { transform: translate(-3px, 8px) rotate(-2deg); }
  .stack-right { transform: translate(4px, 4px) rotate(1.5deg); }
}

/* ------------------------------------------------------------------ language switch */

/* Hidden while a Polish page waits for its catalog (see the head script); the animation is a safety net. */
html.i18n-pending body { visibility: hidden; animation: i18n-reveal 0s 2s forwards; }
@keyframes i18n-reveal { to { visibility: visible; } }

.auth-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

/* ------------------------------------------------------------------ the landing page (signed out "/" and /login) */

.auth-page.landing { grid-template-rows: auto auto auto auto; gap: 40px; }
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(100%, var(--card-w));
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  width: min(100%, 1180px);
  justify-self: center;
}
.landing-hero .auth-stack { justify-self: end; }
.hero-copy { display: grid; gap: 18px; align-content: center; max-width: 560px; }
.hero-title { margin: 0; font-size: var(--t-hero); font-weight: 800; line-height: 1.04; letter-spacing: -.03em;
  background: var(--grad-ink);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.hero-lead { margin: 0; font-size: var(--t-m); line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.hero-points { display: grid; gap: 10px; margin: 4px 0 6px; padding: 0; list-style: none; }
.hero-points li { position: relative; padding-left: 30px; color: var(--ink-2); }
.hero-points li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid;
  place-items: center; border-radius: 50%; font-size: var(--t-xs); font-weight: 800; color: var(--good); background: var(--good-bg); }
.auth-google.is-off { opacity: .55; cursor: not-allowed; }
.hero-try { justify-self: start; }
.hero-try[hidden] { display: none; }

.landing-workspaces { width: min(100%, 1180px); justify-self: center; padding-top: 8px; scroll-margin-top: 24px; }
.landing-workspaces h2 { margin: 0 0 8px; font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.02em; }
.landing-lead { margin: 0 0 24px; color: var(--muted); max-width: 60ch; }
.landing .auth-foot { padding-top: 8px; }
@media (min-width: 1600px) {  /* the cards grow here: widen the row so the left fan clears the hero text */
  .landing-hero, .landing-workspaces { width: min(100%, 1380px); }
}

@media (max-width: 960px) {
  .landing-hero { grid-template-columns: minmax(0, 1fr); }
  .landing-hero .auth-stack { justify-self: center; order: -1; }  /* sign-in first on small screens */
  .hero-copy { justify-self: center; text-align: left; }
}
.auth-register { justify-content: center; font-weight: 700; }
.field[hidden] { display: none; }

/* Whatever a rule above displays: hidden stays hidden. */
.auth-card [hidden] { display: none; }

/* ------------------------------------------------------------------ registration: its own plain card */

.register-page { background: var(--reg-page); }
.reg-wrap { display: grid; place-items: start center; }
.reg-card {
  --a-ink: var(--reg-ink);
  --a-muted: var(--reg-muted);
  --a-link: var(--reg-link);
  --a-good: var(--reg-good);
  --a-focus: var(--reg-link);
  --a-tint: color-mix(in srgb, var(--reg-ink) 6%, var(--reg-card));
  --a-edge: var(--reg-line);
  width: min(100%, 440px);
  padding: 24px 26px;
  border-radius: var(--r-l);
  background: var(--reg-card);
  color: var(--reg-ink);
  font-size: var(--t-s);
  line-height: 1.5;
}
.reg-card [hidden] { display: none; }
.reg-step { margin: 0 0 4px; color: var(--reg-muted); font-size: var(--t-xs); font-weight: 600; }
.reg-card h1 { margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--reg-accent); font-size: var(--t-xl); line-height: 1.3; font-weight: 700; letter-spacing: 0; }
.reg-field label, .reg-label { display: block; margin: 12px 0 5px; font-size: var(--t-xs); font-weight: 600; color: var(--reg-ink); }
.reg-field label small { font-size: var(--t-xs); font-weight: 400; color: var(--reg-muted); }
.reg-card input:not(.visually-hidden) {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--reg-line);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--reg-ink);
  font: inherit;
  font-size: var(--t-m);
}
.reg-card input::placeholder { color: var(--reg-muted); }
.reg-card input:focus-visible { outline: 3px solid color-mix(in srgb, var(--reg-link) 40%, transparent); border-color: var(--reg-link); }
.reg-card input[aria-invalid="true"] { border-color: var(--a-bad); }
.reg-card .problems { line-height: 1.5; }
.reg-hint { margin: 6px 0 0; min-height: 18px; color: var(--reg-muted); font-size: var(--t-xs); line-height: 18px; }
.reg-hint.bad { color: var(--card-bad); }
.reg-card .password-rules { margin: 7px 0 0; gap: 2px 10px; font-size: var(--t-xs); line-height: 1.5; color: var(--reg-muted); }
.reg-card .password-rules li.ok { color: var(--reg-good); }
.reg-btn { display: block; width: 100%; margin-top: 18px; padding: 12px; border: 0; border-radius: var(--r-s); background: var(--reg-solid); color: var(--reg-on-solid); font: inherit; font-weight: 700; text-align: center; cursor: pointer; }
.reg-btn:disabled { opacity: .45; cursor: not-allowed; }
.reg-secondary { margin-top: 8px; border: 1px solid var(--reg-line); background: none; color: var(--reg-ink); font-weight: 600; }
.reg-sep { display: flex; align-items: center; gap: 10px; margin: 20px 0 4px; color: var(--reg-muted); font-size: var(--t-xs); }
.reg-sep::before, .reg-sep::after { content: ""; flex: 1; border-top: 1px solid var(--reg-line); }
.reg-card .auth-google { margin: 0; height: 42px; border-radius: var(--r-s); }
.reg-photo { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.reg-photo > div { display: grid; justify-items: start; gap: 2px; }
.reg-link { padding: 0; border: 0; background: none; color: var(--reg-link); font: inherit; font-size: var(--t-s); text-decoration: underline; cursor: pointer; }
.reg-photo:has(input:focus-visible) label.reg-link { outline: 3px solid color-mix(in srgb, var(--reg-link) 40%, transparent); }
.reg-preview { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--reg-line); border-radius: var(--r-s); }
.reg-preview strong { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.reg-back { display: block; margin: 12px auto 0; padding: 4px 8px; border: 0; background: none; color: var(--reg-muted); font: inherit; font-size: var(--t-s); cursor: pointer; }
.reg-back:hover { color: var(--reg-ink); }
.reg-alt { margin: 14px 0 0; color: var(--reg-muted); font-size: var(--t-xs); text-align: center; }
.reg-alt a { color: var(--reg-link); }
.reg-card .pw-toggle { top: 50%; bottom: auto; height: 30px; margin: 0; transform: translateY(-50%); }