/* --- login ---------------------------------------------------------------- */

.login {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}

.login-col {
  display: flex;
  flex-direction: column;
  width: min(50%, 720px);
  flex-shrink: 0;
  padding: 24px 56px 40px;
}

.login-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(440px, 100%);
}

.login-intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Shut, the refusal gives back the gap above it. */
.login-methods > .fold:not(.open) {
  margin-top: -12px;
}

.login-methods .or {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.login-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Why no link went out, and the way on from there. */
.notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
}

.notice p {
  margin: 0;
}

/* The letter's code: the field and its button on one line, the digits wide
   apart like the letter prints them. */
.code-row {
  display: flex;
  gap: 10px;
}

.code-row input.code-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 20px;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.code-row button {
  flex-shrink: 0;
}

/* The way between signing in and asking to join. */
.login-switch {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.login-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mark-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* The art panel: three study cards, fanned. Decorative only, and re-cut by
   every variant — see each variant's stylesheet. */
.login-art {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  margin: 16px;
  padding: 48px;
  border-radius: 24px;
  background: var(--art-bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.login-art p {
  position: relative;
  margin: 0;
  max-width: 480px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.2;
  color: var(--art-ink);
}

.art-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 320px;
  height: 200px;
  border-radius: var(--radius-lg);
  background: #fffdf8;
  box-shadow: 0 20px 40px rgba(10, 20, 60, 0.28);
}

.art-card b {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  color: #1d1a15;
}

.art-card span {
  font-size: 14px;
  color: #6a6356;
}

.art-card.one {
  left: 12%;
  top: 16%;
  transform: rotate(-9deg);
}

.art-card.two {
  left: 24%;
  top: 27%;
  transform: rotate(5deg);
}

.art-card.three {
  left: 16%;
  top: 40%;
  background: #f6d9a8;
  transform: rotate(-2deg);
}

.art-card.three span {
  color: #5c4a2a;
}

/* --- public catalogue ------------------------------------------------------ */

/* Decks or topics: the variant's segmented control, above the list. */
.tabs-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.public-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}

.public-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* The signed-in home page's offer of other people's decks, under the
   topics: set apart from them by more than the column's own gap. */
.others-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.section-head h2 {
  margin: 0;
}