/* THE DOOR PAGES' LIGHT LOOK (Felipe 2026-10-18 chose design B on the sign-in board, "light grid, no drawing is my
   choice. ideally the grid itself would have a very subtle animation or something, but it's B"). Every door page wears
   it: Sign in (login.html, both hosts), Set up your access (get-access.html), Request instructor access
   (src/routes/instructorAccessPage.ts), Forgot password, Choose a new password, the email confirmation page and the
   bookstore code page. The side panel is the light stone ground with the hairline isometric grid and one soft coral
   light, the Prepara logo with "Courseware", and only the words: no drawing and no dot canvas. When the page knows the
   book, a small white card with its cover and title sits under the points. The grid drifts along its own lines, one
   lattice step every 48 seconds, on a layer of its own, so the words and the form never move and a phone draws it on
   the compositor; with reduced motion it stands still. test/door-light-look.test.mjs refuses a page that brings the
   dark panel, the dots or a drawing back, and refuses this file without the reduced-motion stop.
   This file used to be the first half of access-iso.css, which keeps only the access page's own blocks. */
:root {
  --iso-ground: #f7f6f4;
  --iso-line: #e6e3df;
  --iso-ink: #191b20;
  --iso-ink-2: #4b4d52;
  --iso-coral: #a54a2f; /* the kit's --primary: coral text that clears AA on the ground */
  --iso-accent: #da7756;
  /* the grid itself, the same on every door page whatever a page sets for its own tokens */
  --door-ground: #f7f6f4;
  --door-glow: radial-gradient(60% 45% at 85% 12%, rgba(218, 119, 86, 0.11), transparent 70%);
}

/* the moving grid: the ground and the coral light stay on the panel; the lattice is a layer of its own one step larger
   than the panel on every side, and it slides by exactly one lattice step (28 by 16.165 px, along the grid's own lines),
   so the loop has no seam. */
.door-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--door-ground) !important;
  background-image: var(--door-glow) !important;
  background-size: auto !important;
}
.door-grid::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='32.33' viewBox='0 0 56 32.33'%3E%3Cpath d='M0 16.17 L28 0 L56 16.17 L28 32.33 Z' fill='none' stroke='%23e6e3df' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 32.33px;
  animation: door-grid-drift 48s linear infinite;
  will-change: transform;
}
@keyframes door-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(28px, 16.165px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .door-grid::before { animation: none !important; }
}

/* the form side: white, with the same grid at a whisper, standing still */
.iso-lattice-faint {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='32.33' viewBox='0 0 56 32.33'%3E%3Cpath d='M0 16.17 L28 0 L56 16.17 L28 32.33 Z' fill='none' stroke=%27%23f3f1ee%27 stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 32.33px;
}
.auth-main.iso-lattice-faint { background-color: #fff; }

/* the side panel of the static door pages (platform.css draws it dark; this repaints it light), every word in it the
   live page's */
.auth-brand { color: var(--iso-ink) !important; justify-content: flex-start !important; }
.auth-brand #auth-particles { display: none !important; }
.auth-brand .pp-brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--iso-ink); --brand-mark: #DA7756; }
.auth-brand .pp-brand .pp-logo { height: 26px !important; width: auto !important; display: block; }
.auth-brand .pp-brand .pp-word { font-size: 15px; font-weight: 500; color: #4b4d52 !important; padding-top: 2px; }
.auth-brand .auth-pitch { margin-top: 30px !important; max-width: 520px !important; }
.auth-brand .auth-pitch h1 { font-size: 32px !important; line-height: 1.15 !important; margin: 0 0 10px !important; }
.auth-brand .auth-pitch p { max-width: 460px !important; }
.auth-brand .brand-name, .auth-brand h1, .auth-brand .auth-pitch p, .auth-brand .auth-points li, .auth-brand .auth-foot { color: var(--iso-ink) !important; }
.auth-brand .brand-sub, .auth-brand .auth-foot, .auth-brand .auth-pitch p { color: var(--iso-ink-2) !important; }
.auth-brand h1 em { color: var(--iso-coral) !important; }
.auth-brand .auth-points svg { color: var(--iso-coral) !important; }
.auth-brand .badge { background: #fff !important; color: var(--iso-ink) !important; border: 1px solid var(--iso-line) !important; }
.auth-brand .auth-foot a { color: var(--iso-coral) !important; }

/* the foot sits at the bottom of the panel wherever the panel is taller than its words (a phone puts it under the
   heading, each page's own rule) */
@media (min-width: 761px) { .auth-brand .auth-foot { margin-top: auto !important; } }
/* only the words: on a computer they sit in the middle of the panel, between the logo and the foot (a page whose panel
   is showing a class's covers takes them back to the top) */
@media (min-width: 861px) {
  .auth-brand .auth-pitch { margin-top: auto !important; }
  .auth-brand.has-covers .auth-pitch { margin-top: 30px !important; }
}
/* on a phone the band is the logo, the badge and the heading, one under the other, as short as its words (the values
   login.html and its siblings set in their own phone rules, here for a page that has none, as verify.html) */
@media (max-width: 760px) {
  .auth { min-height: 0; }
  .auth-brand { min-height: 0; padding: 22px 22px 24px; gap: 14px; }
  .auth-brand .auth-pitch { margin-top: 0 !important; }
  .auth-brand .auth-pitch .badge { margin-bottom: 12px !important; padding: 5px 12px; font-size: 11.5px; }
  .auth-brand .auth-pitch h1 { font-size: 22px !important; margin-bottom: 0 !important; }
}

/* the book the page knows: a small white card with its cover and title, under the points */
.door-book { display: flex; align-items: center; gap: 12px; margin-top: 22px; max-width: 420px; padding: 10px 14px 10px 10px; background: #fff; border: 1px solid var(--iso-line); border-radius: 12px; box-shadow: 0 6px 18px -14px rgba(25, 27, 32, 0.35); }
.door-book[hidden] { display: none; }
.door-book img { width: 36px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; flex: none; box-shadow: 0 2px 6px -2px rgba(25, 27, 32, 0.3); }
.door-book b { display: block; font-size: 14.5px; font-weight: 600; color: var(--iso-ink); line-height: 1.3; }
.door-book span { display: block; font-size: 13.5px; color: var(--iso-ink-2); line-height: 1.35; margin-top: 1px; }
.has-covers .door-book { display: none; }
@media (max-width: 760px) { .door-book { margin-top: 14px; max-width: none; } }