/* Public login landing, its admin preview and the friendly 404 page.
   Kept in its own versioned file: the service worker serves /static/ cache-
   first per exact URL, so changes here MUST bump ?v= in index.html and sw.js. */

/* ---- Login landing --------------------------------------------------------
   A container query (not the viewport) picks the layout so the admin preview
   renders the same composition, scaled.
   Wide (>= 640px, iPad portrait and up): edge-to-edge art left, vertically centred sign-in right,
   card sized to the viewport so nothing needs scrolling.
   Narrow: a slim art band, headline, short copy and the form above the fold. */
.main-content:has(> .login-landing) { padding-top: 1rem; padding-bottom: 1rem; }
.card.login-landing {
  container-type: inline-size;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border-radius: .75rem;
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .25);
}
.login-landing-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.login-landing-art {
  position: relative;
  height: 6rem;
  overflow: hidden;
  background: var(--bs-tertiary-bg, #1e293b);
}
.login-art, .login-default-art-wrap { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-art { object-fit: cover; object-position: center; }
.login-default-art { display: block; width: 100%; height: 100%; }
.login-landing-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 1.25rem 1.25rem 1.5rem;
}
.login-landing-copy > * { width: 100%; max-width: 26rem; }
.login-landing-headline { font-size: 1.6rem; line-height: 1.2; margin-bottom: .5rem; overflow-wrap: anywhere; }
.login-landing-body {
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: var(--bs-secondary-color, inherit);
  margin-bottom: 1.25rem;
  /* Keep the form above the fold on phones; full text shows on wide layouts. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.login-landing .auth-form .form-group { margin-bottom: .9rem; }
.login-landing .auth-form .form-control { min-height: 2.75rem; }
.login-landing .auth-form .btn { min-height: 2.75rem; font-weight: 600; }

@container (min-width: 640px) {
  .login-landing-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: clamp(26rem, calc(100dvh - 9rem), 44rem);
  }
  .login-landing-art { height: auto; }
  .login-landing-copy { padding: 2rem; }
  .login-landing-headline { font-size: 1.9rem; margin-bottom: .75rem; }
  .login-landing-body { -webkit-line-clamp: 8; line-clamp: 8; margin-bottom: 1.5rem; }
}
@container (min-width: 900px) {
  .login-landing-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .login-landing-copy { padding: 3rem; }
  .login-landing-headline { font-size: 2.25rem; }
  .login-landing-body { margin-bottom: 1.75rem; }
}

/* Phones in landscape and other short screens: sign-in only, no scrolling. */
@media (max-height: 560px) {
  .login-landing:not(.login-landing-preview) .login-landing-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .login-landing:not(.login-landing-preview) .login-landing-art,
  .login-landing:not(.login-landing-preview) .login-landing-body { display: none; }
  .login-landing:not(.login-landing-preview) .login-landing-copy { padding: 1rem 1.25rem; align-items: center; }
  .login-landing:not(.login-landing-preview) .login-landing-headline { font-size: 1.3rem; margin-bottom: .5rem; }
  .login-landing:not(.login-landing-preview) .auth-form .form-group { margin-bottom: .5rem; }
  .login-landing:not(.login-landing-preview) .auth-form label { margin-bottom: .2rem; }
  .main-content:has(> .login-landing) { padding-top: .5rem; padding-bottom: .5rem; }
}

/* Pick the image for the active theme; a preview carries its own theme. */
:root:not([data-bs-theme="dark"]) .login-landing:not(.login-landing-preview) .login-art-dark,
:root[data-bs-theme="dark"] .login-landing:not(.login-landing-preview) .login-art-light,
.login-landing-preview[data-bs-theme="light"] .login-art-dark,
.login-landing-preview[data-bs-theme="dark"] .login-art-light { display: none; }

/* Built-in illustration colours follow the theme (SVG carries fallbacks). */
.lda-sky { fill: var(--bs-tertiary-bg, #334155); }
.lda-wall { fill: var(--bs-secondary-bg, #475569); stroke: var(--bs-border-color, #64748b); stroke-width: 3; }
.lda-stone, .lda-die-edge { fill: none; stroke: var(--bs-border-color, #64748b); stroke-width: 3; stroke-linecap: round; }
.lda-chest, .lda-lid { fill: #8a5a2b; stroke: #5c3a19; stroke-width: 3; }
.lda-lock, .lda-gold { fill: #e0b232; }
.lda-die { fill: var(--bs-primary, #0d6efd); stroke: var(--bs-body-color, #e2e8f0); stroke-width: 2; }
.lda-die-text { fill: #fff; font: bold 22px sans-serif; }

/* Public downloads under the landing card. */
.login-downloads { margin: 1rem auto 0; }

/* ---- Admin preview: a fixed 960px virtual page scaled to fit its column. */
.login-preview-viewport { overflow-x: auto; border-radius: .75rem; max-width: 100%; }
.login-preview-viewport.is-scaled { overflow: hidden; }
.login-preview-stage { width: 960px; transform-origin: top left; }
.login-preview-stage .login-landing { pointer-events: none; box-shadow: none; }
.login-preview-stage .login-landing-grid { min-height: 34rem; }
/* The app's --card-bg follows the page theme; the preview follows its own
   Light/Dark toggle through Bootstrap's per-element theme variables. */
.login-landing-preview { background-color: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }

/* ---- Friendly 404 page */
.not-found-page { max-width: 40rem; }