/*
 * Student client styling.
 *
 * Constraints that shaped this:
 * - A shared classroom device may be at any brightness, in a room with the lights
 *   down for the TV. Dark, high contrast.
 * - Touch first. Every target is at least 44px.
 * - It has to look right on an iPad, a Chromebook, and a phone, so everything is
 *   fluid rather than breakpointed.
 * - Typing an answer is the entire job. Nothing else competes for attention.
 */

:root {
  --bg: #17191d;
  --surface: #212429;
  --surface-raised: #2a2e35;
  --border: #363b44;
  --text: #f2f4f7;
  --muted: #a2abb8;
  --accent: #6f8cff;
  --ok: #4ec98a;
  --warn: #f0b354;
  --error: #ff6b6b;
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  -webkit-text-size-adjust: 100%;
}

#app {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

h1 {
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem;
}

.hint {
  color: var(--muted);
  margin: 0 0 1.75rem;
}

.field {
  display: block;
  margin-bottom: 1.25rem;
}

.label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

/* `select` was omitted here originally, so the dropdowns rendered with the platform's
   light styling — black text on white, inside a dark page. Only visible by looking. */
input,
select {
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 0.9rem;
  font-size: 1.05rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* iOS zooms the page when a focused input is under 16px. */
  font-family: inherit;
}

select {
  /* The platform arrow disappears against a dark background, so draw one. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

input:disabled,
select:disabled {
  opacity: 0.5;
}

/* Hints belong under their control, not wrapped around it. `.status` is inline by
   default, which put the text beside a full-width select and then reflowed it
   underneath — the sort of thing that reads as a broken layout. */
.field > .status {
  display: block;
  margin-top: 0.35rem;
  padding-left: 0;
}

/* The code is read off a television across a room and typed once. Big, spaced,
   and monospaced so a 5 and an S are distinguishable at a glance. */
.code-input {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 2.1rem;
  letter-spacing: 0.35em;
  text-align: center;
  text-transform: uppercase;
  min-height: 68px;
}

button.primary {
  width: 100%;
  min-height: 52px;
  font: inherit;
  font-weight: 620;
  color: #0f1114;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

button.primary:active {
  transform: translateY(1px);
}

.error {
  color: var(--error);
  min-height: 1.5rem;
  margin: 0.75rem 0 0;
}

/* ---------------------------------------------------------------- ink */

.ink {
  grid-area: ink;
  margin-top: 0.5rem;
}

/* Sized in viewport-relative units with a floor and a ceiling: tall enough on a phone
   to write a fraction in, and not so tall on an iPad that four boxes need scrolling. */
.ink-canvas {
  display: block;
  width: 100%;
  height: clamp(90px, 18vh, 150px);
  background: #191c21;
  border: 1px dashed var(--border);
  border-radius: 10px;
  /* Without this a drag scrolls the page instead of drawing, which on an iPad makes
     the surface look completely inert. Also set from JS, belt and braces. */
  touch-action: none;
  cursor: crosshair;
}

.ink-clear {
  display: block;
  margin: 0.35rem 0 0 auto;
  min-height: 32px;
  padding: 0 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.ink-clear:active {
  color: var(--text);
}

/* ---------------------------------------------------------------- board */

.board-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.board-header .hint {
  margin: 0;
}

.badge {
  flex: none;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  border: 1px solid var(--border);
}

.badge-ok {
  color: var(--ok);
}
.badge-warn {
  color: var(--warn);
}

.notice {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.25rem;
  color: var(--text);
}

.boxes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.box {
  display: grid;
  /* The label column is sized to the largest label rather than fixed, so "5b" and
     "12" both fit without wrapping. */
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "label input"
    "label status"
    "ink   ink";
  align-items: center;
  gap: 0.2rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem;
}

/* Mirrors the numbered tile the class sees on the television, so "let's do number
   five" points at the same thing on both screens. */
.box-label {
  grid-area: label;
  min-width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  padding: 0 0.5rem;
  font-weight: 700;
  font-size: 1.15rem;
  background: var(--surface-raised);
  border-radius: 10px;
  color: var(--text);
}

.box-input {
  grid-area: input;
  min-height: 48px;
}

.status {
  grid-area: status;
  font-size: 0.8rem;
  color: var(--muted);
  min-height: 1.1rem;
  padding-left: 0.2rem;
}

.status-saved {
  color: var(--ok);
}
.status-offline,
.status-locked {
  color: var(--warn);
}
.status-rejected {
  color: var(--error);
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 2.5rem 1rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.footnote {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 1.75rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------------------------------------------------------------- field editor */

.page-frame {
  position: relative;
  margin: 0 0 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.page-image {
  display: block;
  width: 100%;
  height: auto;
  /* A dragged image ghost following the cursor makes placing a field feel broken. */
  user-select: none;
  -webkit-user-drag: none;
}

/* The drawing surface, exactly covering the page so normalised coordinates are honest. */
.field-layer {
  position: absolute;
  inset: 0;
  cursor: crosshair;
}

.page-number {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(23, 25, 29, 0.85);
  padding: 2px 7px;
  border-radius: 6px;
}

/* Translucent so the answer underneath stays readable while placing — the teacher needs to
   see what they are covering. The class display is opaque; these two are different jobs. */
.field-box {
  position: absolute;
  background: rgba(111, 140, 255, 0.22);
  border: 2px dashed var(--accent);
  border-radius: 4px;
  cursor: move;
}

.field-box.is-selected {
  /* Solid rather than merely brighter: a shape difference reads at a glance where a
     brightness difference does not. Same reasoning as the iPad's box layer. */
  border-style: solid;
  border-width: 3px;
  background: rgba(111, 140, 255, 0.3);
}

.field-badge {
  position: absolute;
  top: 2px;
  left: 3px;
  min-width: 18px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #0f1114;
  background: var(--accent);
  border-radius: 5px;
}

.field-pending {
  position: absolute;
  background: rgba(111, 140, 255, 0.15);
  border: 2px dashed var(--accent);
  border-radius: 4px;
  pointer-events: none;
}

.field-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.field-toolbar .count {
  font-size: 0.9rem;
  color: var(--muted);
  margin-right: auto;
}

.field-label-input {
  width: 6rem;
  min-height: 36px;
  padding: 0.25rem 0.5rem;
  font-size: 0.95rem;
}