/* styles.css — the Behind the Wheel design system, sized for an iPad in a car.

   Colours, type, radii and the header/footer come from the shared design
   system (Design System artifact https://claude.ai/artifact/Sk5oPn5h6zPDRnHbMuVijz),
   so this app reads as the same school as the student portal, the enrollment
   form and the Drive Log. Every colour below is a token from it, by name; don't
   add literal colours.

   One deliberate departure: the system's app scale is 16px body. Most
   instructors here are older and use this in a parked car in daylight, so the
   base stays 19px and targets stay at least 56px. Everything scales from the
   base in rem, so the proportions match the system. One light theme, as the
   system has: a dark UI behind glass in sunlight is the harder read anyway. */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/open-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/open-sans-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --sign-blue: #0d47a1;
  --sign-blue-deep: #0b3d91;
  --sign-blue-tint: #e8effb;
  --ink: #1a1d21;
  --muted: #5b6470;
  --line: #d7dce2;
  --page: #f6f7f9;
  --surface: #ffffff;
  --go-green: #1b7a43;
  --go-green-tint: #f0faf4;
  --hold-amber: #78350f;
  --hold-amber-tint: #fef3c7;
  --hold-amber-line: #f5d67b;
  --stop-red: #b42318;
  --stop-red-tint: #fdecec;

  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-control: 8px;
  --radius-card: 10px;
  --radius-pill: 999px;

  --tap: 56px;                /* minimum comfortable target with a seatbelt on */
  --tabbar: 74px;
}

* { box-sizing: border-box; }

/* `hidden` has to beat the layout rules below — several of these elements are
   display:flex/grid, which is more specific than the UA stylesheet's rule. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 19px/1.5 var(--font-sans);
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.6rem; margin: 0 0 4px; line-height: 1.2; font-weight: 700; text-wrap: balance; }
h2 { font-size: 1.2rem; margin: 0 0 10px; line-height: 1.35; font-weight: 700; }
h3 { font-size: .95rem; margin: 0 0 8px; font-weight: 700; }
a { color: var(--sign-blue); }
.muted, .dim { color: var(--muted); }
.good { color: var(--go-green); font-weight: 700; }
.note { font-size: 1rem; color: var(--muted); }
.note.bad { color: var(--stop-red); font-weight: 600; }

:focus-visible { outline: 2px solid var(--sign-blue); outline-offset: 2px; }

/* ---------------------------------------------------------- header */

/* AppHeader: sign-blue bar, the sign logo, the school and the product, over
   the lane band. The status bar is translucent in the installed app, so the
   bar runs up under it and pads itself down past the notch. */
.top .top-bar {
  background: var(--sign-blue);
  color: var(--surface);
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
}
.top .in {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}
.top .logo { display: block; height: 36px; width: auto; flex: none; }
.top .who { display: flex; flex-direction: column; line-height: 1.2; }
.top .who b { font-weight: 700; font-size: 17px; }
.top .who span { font-weight: 400; font-size: 14px; }
.top .lane {
  height: 8px;
  background:
    repeating-linear-gradient(90deg, var(--surface) 0 34px, transparent 34px 58px) center / 100% 2px no-repeat,
    var(--sign-blue-deep);
}

/* ---------------------------------------------------------- enrollment */

.signin { display: grid; justify-items: center; padding: 32px 16px 0; }
.signin .foot { width: min(460px, 100%); }
.signin-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
  width: min(460px, 100%);
}
.signin-card label { display: block; margin: 18px 0 6px; font-weight: 600; }
.signin-card form button { width: 100%; margin-top: 14px; }

/* The setup code is read off another screen and typed once. Big, monospaced and
   spaced out so a mistyped character is obvious before submitting. */
#code {
  font: 700 1.7rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-align: center;
  min-height: 64px;
}

/* ---------------------------------------------------------- controls */

/* `muted`, not `line`, on a field's edge: `line` is too faint (1.4:1) to mark
   where a control is. */
input[type="email"], input[type="search"], input[type="number"],
input[type="text"], input[type="datetime-local"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--muted);
  border-radius: var(--radius-control);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--sign-blue);
  outline-offset: 1px;
  border-color: var(--sign-blue);
}
textarea { min-height: 120px; resize: vertical; }

/* Every button is a secondary unless it says otherwise: surface, sign-blue
   label and border. One primary per screen. */
button {
  font: inherit;
  font-weight: 600;
  min-height: var(--tap);
  padding: 12px 20px;
  border-radius: var(--radius-control);
  border: 1.5px solid var(--sign-blue);
  background: var(--surface);
  color: var(--sign-blue);
  cursor: pointer;
}
button:hover { background: var(--sign-blue-tint); }
button[disabled] { opacity: .6; cursor: not-allowed; }
button.primary {
  background: var(--sign-blue);
  color: var(--surface);
  border-color: transparent;
}
button.primary:hover, button.primary:active { background: var(--sign-blue-deep); }
button.big { width: 100%; min-height: 64px; font-size: 1.15rem; }
button.wide { width: 100%; }
button.ghost { background: var(--surface); }
button.danger { color: var(--stop-red); border-color: currentColor; }
button.danger:hover { background: var(--stop-red-tint); }

.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  color: var(--ink);
}
.switch input { width: 26px; height: 26px; flex: none; accent-color: var(--sign-blue); }
.big-switch { font-weight: 700; font-size: 1.1rem; }

/* A selected option: sign-blue border on sign-blue-tint, in bold. The border
   thickens too, so the choice isn't carried by colour alone. */
.choice-row button.on,
.chips button.on {
  background: var(--sign-blue-tint);
  color: var(--ink);
  border: 3px solid var(--sign-blue);
  font-weight: 700;
}

/* Rows of tap-to-choose buttons: lengths, statuses, outcomes. */
.choice-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.choice-row button { flex: 1 1 100px; color: var(--ink); border-color: var(--muted); }
.choice-row button.on { padding: 10.5px 18.5px; }

/* ---------------------------------------------------------- shell */

#app { min-height: 100dvh; }
#views {
  padding: 20px 16px calc(var(--tabbar) + 16px);
  max-width: 880px;
  margin: 0 auto;
}
.view { animation: fade .12s ease-out; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.page-head.with-back { margin-bottom: 8px; }
button.back {
  border: 0;
  background: transparent;
  color: var(--sign-blue);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 8px 4px;
  min-height: var(--tap);
}
button.back:hover { background: transparent; text-decoration: underline; }

/* Bottom tab bar — the only navigation, so it is always visible and labelled.
   Words only: the design system has no icon set, and a word is never a
   guessing game. */
.tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 30;
}
.tab {
  position: relative;
  flex: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: var(--tabbar);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 600;
}
.tab:hover { background: transparent; color: var(--sign-blue); }
.tab.on { color: var(--sign-blue); font-weight: 700; }
/* A bar over the active tab, so the current page is not signalled by colour
   alone — colour-blind users and bright sunlight both defeat that. */
.tab.on::before {
  content: "";
  position: absolute;
  top: 0;
  width: 64px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: currentColor;
}

/* ---------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 16px;
}
@media (min-width: 520px) { .card { padding: 24px; } }
.card h2 .count { color: var(--muted); font-weight: 400; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat strong { font-size: 2rem; line-height: 1.1; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .9rem; }

.picklist { list-style: none; margin: 0; padding: 0; }
.picklist button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 2px;
  background: transparent;
  color: var(--ink);
  font-weight: 400;
}
.picklist button:hover { background: var(--sign-blue-tint); }
.picklist li:last-child button { border-bottom: 0; }
.picklist .who { font-weight: 600; color: var(--sign-blue); }
.picklist .meta { color: var(--muted); white-space: nowrap; }

table.plain { width: 100%; border-collapse: collapse; }
table.plain td { padding: 10px 4px; border-bottom: 1px solid var(--line); }
table.plain tr:last-child td { border-bottom: 0; }

.sync-line { margin: 4px 2px 0; font-size: .9rem; }
.sync-line.pending { color: var(--hold-amber); font-weight: 600; }

/* ---------------------------------------------------------- roster */

.toolbar { margin-bottom: 16px; }
.toolbar .toggles { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 4px; }

.empty { padding: 40px 16px; text-align: center; color: var(--muted); }

.group { margin-bottom: 26px; }
.group h3 { padding: 0 4px; color: var(--muted); font-size: .9rem; font-weight: 600; letter-spacing: .02em; }

table.students {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
table.students th {
  text-align: left;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.students th.sorted { color: var(--sign-blue); text-decoration: underline; text-underline-offset: 4px; }
table.students td { padding: 18px 12px; border-bottom: 1px solid var(--line); }
table.students tbody tr:last-child td { border-bottom: 0; }
table.students tbody tr:active { background: var(--sign-blue-tint); }
td.name { font-weight: 700; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num.done { color: var(--go-green); font-weight: 700; }
td.num.close { color: var(--hold-amber); font-weight: 700; }

/* Status badges: the only pill shape in the system. Each carries its word. */
.tag {
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--muted);
  white-space: nowrap;
}
.tag.pend { color: var(--hold-amber); background: var(--hold-amber-tint); border-color: var(--hold-amber-line); }

/* Narrow screens: the table becomes stacked cards rather than scrolling
   sideways, because a horizontally scrolling roster is unusable one-handed. */
@media (max-width: 760px) {
  table.students thead { display: none; }
  table.students, table.students tbody, table.students tr, table.students td { display: block; }
  table.students tr { border-bottom: 1px solid var(--line); padding: 12px 4px; }
  table.students tbody tr:last-child { border-bottom: 0; }
  table.students td { border: 0; padding: 3px 12px; text-align: left; }
  td.name { font-size: 1.15rem; }
  td.num { text-align: left; }
}

/* ---------------------------------------------------------- student */

.student-name { font-size: 1.6rem; }
.student-sub { margin: 0 0 18px; }

.progress-card .progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 1.1rem;
  margin-bottom: 10px;
}
/* Progress is green: it's the one place green means "getting there". */
.bar {
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}
.bar span { display: block; height: 100%; background: var(--go-green); }
.progress-card .pend { color: var(--hold-amber); font-weight: 600; margin: 10px 0 0; }

.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.facts > div:last-child { border-bottom: 0; }
.facts .k { color: var(--muted); }
.facts .v { text-align: right; }

#go-log { margin-bottom: 16px; }

.history, table.lessons { width: 100%; border-collapse: collapse; }
table.lessons td { padding: 12px 6px; border-bottom: 1px solid var(--line); font-size: 1rem; }
table.lessons tr.queued td { color: var(--hold-amber); }
table.lessons tr.note-row td { padding-top: 0; color: var(--muted); white-space: pre-wrap; }

/* ---------------------------------------------------------- lesson form */

.sub-label { display: block; margin: 14px 0 6px; font-weight: 600; }

.module { margin-bottom: 18px; }
.module h3 { color: var(--muted); font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  min-height: 50px;
  padding: 8px 14px;
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  color: var(--ink);
  border: 1px solid var(--muted);
}
/* Already covered on a previous lesson. Still tappable — the write is a union,
   and hiding prior coverage from the person deciding what to drive next would
   be the wrong trade. Marked with a ✓, the system's completed-step glyph. */
.chips button.done { border-style: dashed; color: var(--muted); }
.chips button.done::before { content: "✓ "; color: var(--go-green); font-weight: 700; }
.chips button.on { border-style: solid; padding: 6px 12px; }
.chips button.on.done::before { content: none; }

.sig { margin-top: 18px; }
#sig-file img, .sig-saved, #sig-preview, .sig-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  background: var(--surface);
  border: 1px solid var(--muted);
  border-radius: var(--radius-card);
  margin: 8px 0;
}
.sig-canvas { touch-action: none; }
#sig-typed { width: 100%; }
.sig-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
#sig-pad {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  background: var(--surface);       /* matches the PNG that gets uploaded */
  border: 1px solid var(--muted);
  border-radius: var(--radius-control);
  /* Without this the page scrolls under the finger instead of drawing. */
  touch-action: none;
  cursor: crosshair;
}

/* Save stays reachable without scrolling to the bottom of a long form. */
.save-bar {
  position: sticky;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
  padding: 12px 0;
  background: linear-gradient(to top, var(--page) 70%, transparent);
}

/* ---------------------------------------------------------- more */

.soon { list-style: none; margin: 0 0 12px; padding: 0; }
.soon li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.soon li:last-child { border-bottom: 0; }

/* My lessons — a read-only record of what this instructor has logged. */
table.my-lessons tr.queued td { color: var(--hold-amber); }
@media (max-width: 760px) {
  table.my-lessons td:first-child { font-size: 1.1rem; font-weight: 700; }
}

/* "A new version is ready" — sits above everything, waits to be tapped.
   An informational notice, so sign-blue on its tint. */
.update-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--sign-blue-tint);
  border-bottom: 1px solid var(--sign-blue);
  color: var(--ink);
  font-weight: 600;
}
.update-banner button {
  min-height: 44px;
  padding: 8px 16px;
  background: var(--sign-blue);
  color: var(--surface);
  border-color: transparent;
}
.update-banner button:hover { background: var(--sign-blue-deep); }

/* ---------------------------------------------------------- footer */

/* SiteFooter: the KansasBadge, the business, the licensing line and the
   office phone. A signature, so quieter than the header — nothing over 14px. */
.foot {
  border-top: 1px solid var(--line);
  margin-top: 32px;
  padding: 20px 0 28px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}
.foot p { margin: 0 0 4px; }
.foot .mark { margin: 0 0 10px; }
.foot .foot-name { color: var(--ink); font-weight: 600; }
.foot a { color: var(--sign-blue); white-space: nowrap; }
.ks-badge { display: inline-flex; align-items: center; gap: 8px; }
.ks-badge img { display: block; width: 40px; height: 21px; flex: none; }
.ks-badge .ks-txt { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--muted); }
.ks-badge .ks-name { font-weight: 800; font-style: italic; color: var(--ink); }

/* Rare actions: quiet text at the foot of a page, not a card. */
.rare { margin: 28px 0 8px; text-align: center; }
.rare label { display: block; font-weight: 600; margin-bottom: 6px; }
.rare select { width: 100%; margin-bottom: 10px; }
button.link {
  background: none; border: 0; min-height: 56px; padding: 8px 12px;
  color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer;
}

/* A second heading inside one card, e.g. "Receipt uploaded to QuickBooks?". */
.sub-h { margin-top: 20px; }