/* Styling for the server-rendered pages (design.md §5.2, §5.7).

   These pages are sign in, signup, the password page, and the home page. The
   test player carries its own bundle and its own tokens
   (frontend/src/styles/tokens.css); this file never loads there, so the two
   palettes are kept in step by hand rather than by import.

   The §9.6 review screen used to be styled here too. It is an item surface,
   which §11.1 makes identical wherever it appears, so its rules moved to
   frontend/src/pages/review.css, where they read from the player's tokens
   and arrive with that page's Vite entry. */

:root {
  --page: #e9e9e9;
  --surface: #fff;
  --ink: #333;
  --ink-quiet: #666;
  --accent: #0074cc;
  --rule: #ccc;
  --missed: #b3261e;
  --done: #1e6b34;
  --panel-gap: 1rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--ink-quiet);
  color: #fff;
  border-top: 5px solid var(--accent);
}

.bar-name {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

/* A page's own way out of itself, beside the site name. Underlined, because
   unlike the site name it has to read as a control rather than as a label. */
.bar-link {
  color: #fff;
}

.bar-user {
  margin-left: auto;
}

.bar-form {
  margin: 0;
}

.page {
  max-width: 48rem;
  margin: 1.5rem auto;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}

h1 {
  margin-top: 0;
  font-size: 1.4rem;
}

h2 {
  font-size: 1.1rem;
  margin-top: 2rem;
}

h3 {
  font-size: 1rem;
  margin: 1rem 0 0.25rem;
}

label {
  display: block;
  font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="email"] {
  width: 100%;
  max-width: 22rem;
  padding: 0.5rem;
  border: 1px solid var(--rule);
  font: inherit;
}

button {
  padding: 0.5rem 1rem;
  border: 0;
  background: var(--accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

button.link {
  background: none;
  color: inherit;
  text-decoration: underline;
  padding: 0.5rem 0.25rem;
}

.note {
  color: var(--ink-quiet);
}

.error {
  color: var(--missed);
}

/* The levels of the Django messages `base.html` renders: a join that
   succeeded, a changed password, and a join that found the student already
   in the class. */
.success {
  color: var(--done);
}

.info {
  color: var(--accent);
}

.helptext,
ul.errorlist {
  color: var(--ink-quiet);
  font-size: 0.875rem;
}

ul.assignments,
ul.errorlist {
  list-style: none;
  padding: 0;
}

ul.assignments li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.assignment-name {
  flex: 1;
}

/* The home page sets its panels on the page background instead of on one
   white sheet, so `.page.home` drops the sheet. */
.page.home {
  display: grid;
  gap: var(--panel-gap);
  padding: 0 var(--panel-gap);
  background: none;
  border: 0;
}

/* A Django message on the home page sits on the page background, so it
   takes a panel's sheet to read as part of the page. */
.page.home > p {
  margin: 0;
  padding: 0.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.home-panel {
  padding: 1rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.home-panel > :first-child {
  margin-top: 0;
}

.home-panel > :last-child,
.home-panel form > p:last-child {
  margin-bottom: 0;
}

.home-panel ul.assignments {
  margin: 0;
}

.home-panel ul.assignments li {
  align-items: center;
}

.home-panel ul.assignments li:last-child {
  border-bottom: 0;
}

/* Two equal columns where both fit at 20rem, one column on a narrow screen.
   The grid's default `align-items: stretch` gives both panels the taller
   one's height, so their bottom edges meet. */
.home-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--panel-gap);
}

a.primary-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}

.home details {
  margin-top: var(--panel-gap);
}

.home summary {
  color: var(--accent);
  cursor: pointer;
}

.home details form {
  margin-top: 0.5rem;
}