:root {
  --bg: #0b1220;
  --bg-elevated: #101a2e;
  --border: #1f2c47;
  --text: #e7edf7;
  --text-muted: #93a1bd;
  --accent: #1e88e0;
  --accent-soft: rgba(30, 136, 224, 0.14);
  --amber: #f2a93c;
  --sun-rise: #ffcf5c;
  --sun-set: #ff7a59;
  --radius: 10px;
  --max-width: 1080px;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

/* Scrollbar — site-wide. A dotted "flight path" track with the drag handle
   styled as a small aircraft gliding up/down (or left/right) along it.
   Firefox gets the closest simple equivalent it supports (colored thumb +
   track, no track pattern or icon — that part of the spec doesn't exist
   there); everything else (Chrome, Edge, Safari, Opera) gets the full look.
   The Firefox rule is wrapped in @supports so Chrome/Edge/Safari never see
   it — those browsers now understand scrollbar-color/scrollbar-width too,
   and if they see it set they silently drop the custom ::-webkit-scrollbar
   styling below and fall back to a plain flat scrollbar. Keeping it Firefox-
   only avoids that. */

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--accent) var(--bg-elevated);
    scrollbar-width: thin;
  }
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background-color: var(--bg-elevated);
}

/* Runway end designators — 18 at the top, 36 at the bottom of the vertical
   scrollbar's own track. 18/36 is a real reciprocal runway heading pair
   (180°/360°), so the plane thumb is, in effect, sliding down "Runway 18"
   and back up "Runway 36" between two painted thresholds. */
::-webkit-scrollbar-track:vertical {
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAyMCI+CiAgPHRleHQgeD0iMTYiIHk9IjE2IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC13ZWlnaHQ9IjgwMCIgZm9udC1zaXplPSIxNyIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGxldHRlci1zcGFjaW5nPSItMC41Ij4xODwvdGV4dD4KPC9zdmc+Cg=="),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAyMCI+CiAgPHRleHQgeD0iMTYiIHk9IjE2IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC13ZWlnaHQ9IjgwMCIgZm9udC1zaXplPSIxNyIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGxldHRlci1zcGFjaW5nPSItMC41Ij4zNjwvdGV4dD4KPC9zdmc+Cg=="),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 5px,
      var(--border) 5px,
      var(--border) 8px
    );
  background-position: center top 3px, center bottom 3px, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 16px 10px, 16px 10px, 2px 100%;
}

::-webkit-scrollbar-track:horizontal {
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent 5px,
    var(--border) 5px,
    var(--border) 8px
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 2px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
  border-radius: 999px;
  border: 3px solid var(--bg-elevated);
  background-clip: padding-box;
  min-height: 44px;
}

::-webkit-scrollbar-thumb:vertical {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDIgTDE5IDIwIEwxMiAxNiBMNSAyMCBaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPg==");
}

::-webkit-scrollbar-thumb:horizontal {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIyIDEyIEw0IDUgTDggMTIgTDQgMTkgWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=");
}

::-webkit-scrollbar-thumb:hover {
  background-color: #4aa0ea;
}

::-webkit-scrollbar-corner {
  background: var(--bg-elevated);
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */

header.site {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(11, 18, 32, 0.9);
  backdrop-filter: blur(6px);
  z-index: 10;
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}

.brand-mark {
  height: 30px;
  width: auto;
  display: block;
}

nav.site a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.94rem;
  margin-left: 28px;
  transition: color 0.15s ease;
}

nav.site a:hover,
nav.site a.active {
  color: var(--text);
}

/* Hero */

.hero {
  padding: 88px 0 64px;
  border-bottom: 1px solid var(--border);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(30, 136, 224, 0.35);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  line-height: 1.12;
  margin: 0 0 18px;
  max-width: 20ch;
  letter-spacing: -0.01em;
}

.lede {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 0 34px;
}

.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}

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

.btn-primary {
  background: var(--accent);
  color: #04122a;
}

.btn-primary:hover {
  background: #4aa0ea;
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--accent);
}

/* .btn sets its own `display`, which otherwise beats the browser's default
   `[hidden] { display: none }` rule (same specificity, .btn comes later) —
   so a hidden button would still render. This wins that fight back. */
.btn[hidden] {
  display: none;
}

/* Sections */

section {
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}

section:last-of-type {
  border-bottom: none;
}

.section-head {
  max-width: 60ch;
  margin-bottom: 40px;
}

.section-head .eyebrow {
  margin-bottom: 14px;
}

h2 {
  font-size: 1.7rem;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.section-head p {
  color: var(--text-muted);
  margin: 0;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 820px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}

.card .tag {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 14px;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 1.08rem;
}

.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.card.dim {
  opacity: 0.72;
}

.card .status {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.75rem;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.card .status.live {
  color: var(--accent);
  border-color: rgba(30, 136, 224, 0.4);
}

/* Footer */

footer.site {
  padding: 40px 0 60px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

footer.site .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

footer.site .story {
  max-width: 46ch;
}

footer.site .story strong {
  color: var(--text);
}

/* Schedule page */

.banner {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 30px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.banner .dot {
  color: var(--amber);
  flex-shrink: 0;
}

.schedule-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 72vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Sunrise/sunset overlay — an absolutely-positioned layer the same size as
   the table, sitting inside the scrolling container so its dotted lines
   scroll along with the grid instead of staying fixed on screen. Sized and
   populated by script.js's updateSunOverlay() after every render, since the
   lines' vertical position depends on the actual rendered row heights. */
.sun-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;
}

.sun-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dotted var(--sun-rise);
}

.sun-line-sunset {
  border-top-color: var(--sun-set);
}

.sun-badge {
  position: absolute;
  left: 4px;
  transform: translateY(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--sun-rise);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.sun-badge-sunset {
  color: var(--sun-set);
}

.sun-legend-dash {
  width: 14px;
  height: 0;
  border-top: 2px dotted var(--sun-rise);
  display: inline-block;
}

.sun-legend-sunset {
  border-top-color: var(--sun-set);
}

table.schedule {
  border-collapse: collapse;
  width: 100%;
  min-width: 760px;
  font-size: 0.88rem;
}

/* Guarantees every half-hour row has a real minimum height, even when every
   cell touching that row is a "continuation" of a longer rowSpan booking
   above it (no single 30-min cell to anchor the row's natural height).
   Without this, browsers are free to collapse such a row toward zero and
   dump its height onto a later row instead, which is what was causing
   booking blocks to visually fall short of their real duration. */
table.schedule tbody tr {
  height: 43px;
}

table.schedule th,
table.schedule td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

table.schedule thead th {
  background: var(--bg-elevated);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 5;
}

table.schedule th.time-col,
table.schedule td.time-col {
  background: var(--bg-elevated);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
  width: 96px;
}

td.slot {
  cursor: pointer;
  transition: background 0.12s ease;
  min-width: 150px;
}

td.slot:hover {
  background: var(--accent-soft);
}

td.slot.filled {
  padding: 0;
  position: relative;
}

.booking {
  background: var(--accent-soft);
  border: 1px solid rgba(30, 136, 224, 0.4);
  border-radius: 6px;
  padding: 8px 10px;
  position: absolute;
  inset: 0;
  box-sizing: border-box;
}

.booking .who {
  font-weight: 600;
  font-size: 0.86rem;
}

.booking .what {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 2px;
}

.booking.tentative {
  border-style: dashed;
  opacity: 0.85;
}

td.slot.empty::after {
  content: "+ Book";
  color: var(--text-muted);
  font-size: 0.78rem;
}

td.slot.empty:hover::after {
  color: var(--accent);
}

.legend {
  display: flex;
  gap: 18px;
  margin: 18px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend .swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--accent-soft);
  border: 1px solid rgba(30, 136, 224, 0.4);
  display: inline-block;
}

.legend .swatch.tentative {
  border-style: dashed;
}

/* Booking modal */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 16, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 380px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.modal-slot-label {
  color: var(--accent);
  font-size: 0.85rem;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}

.modal label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 14px 0 6px;
}

.modal input[type="text"],
.modal select,
.modal textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.92rem;
  font-family: inherit;
}

.modal textarea {
  resize: vertical;
  min-height: 64px;
}

.modal input[type="text"]:focus,
.modal select:focus,
.modal textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.modal input:disabled,
.modal select:disabled {
  opacity: 0.7;
  cursor: default;
  background: var(--bg-elevated);
}

/* Read-only booking summary (view mode) — plain text, not form controls, so
   it never looks like something a student could click into or change. */
.modal-summary {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

/* Same cascade gotcha as .btn[hidden] / .modal-overlay[hidden] above: an
   explicit `display` on the base class beats the browser's default
   `[hidden] { display: none }` rule at equal specificity, so setting the
   hidden PROPERTY in JS silently stops actually hiding the element unless
   we re-assert it here. */
.modal-summary[hidden] {
  display: none;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

.summary-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.summary-label {
  color: var(--text-muted);
  font-size: 0.82rem;
  flex-shrink: 0;
}

.warning-banner {
  background: rgba(242, 169, 60, 0.12);
  border: 1px solid rgba(242, 169, 60, 0.4);
  color: var(--amber);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.85rem;
  margin: 4px 0 18px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.warning-banner[hidden] {
  display: none;
}

.btn-danger-text {
  color: #ff9aa6;
  border-color: rgba(255, 154, 166, 0.35);
}

.btn-danger-text:hover {
  border-color: #ff9aa6;
  background: rgba(255, 154, 166, 0.08);
}

.btn-danger-solid {
  background: #c0344a;
  color: #fff;
}

.btn-danger-solid:hover {
  background: #d84361;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* Toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: #2a0f14;
  border: 1px solid #7a2a34;
  color: #ffd7dc;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  max-width: 90vw;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 200;
}

.toast[hidden] {
  display: none;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Auth pages (login / signup) */

.auth-wrap {
  max-width: 440px;
  margin: 60px auto;
  padding: 0 24px;
}

.form-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.form-card h2 {
  margin: 0 0 6px;
}

.form-card .sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 24px;
}

.form-card label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 14px 0 6px;
}

.form-card label:first-of-type {
  margin-top: 0;
}

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.92rem;
  font-family: inherit;
}

.form-card input:focus,
.form-card select:focus {
  outline: none;
  border-color: var(--accent);
}

.form-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 22px;
}

.form-card .form-msg {
  margin-top: 14px;
  font-size: 0.85rem;
}

.form-card .form-msg.error {
  color: #ff9aa6;
}

.form-card .form-msg.success {
  color: var(--accent);
}

.form-card .switch-link {
  text-align: center;
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.form-card .switch-link a {
  color: var(--accent);
  text-decoration: none;
}

.role-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
}

.role-tabs button {
  flex: 1;
}

.field-group {
  display: none;
}

.field-group.active {
  display: block;
}

/* Dashboard */

.dash-section {
  margin-bottom: 40px;
}

.dash-section h3 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}

.dash-section .sub {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 16px;
}

.invite-box {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  flex-wrap: wrap;
}

.invite-box input {
  flex: 1;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: ui-monospace, monospace;
}

.roster-list {
  display: grid;
  gap: 10px;
}

.roster-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.roster-item .name {
  font-weight: 600;
}

.roster-item .role-badge {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  border: 1px solid rgba(30, 136, 224, 0.4);
  padding: 2px 8px;
  border-radius: 999px;
}

.empty-note {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-style: italic;
}

.inline-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 16px;
}

.inline-form .field {
  flex: 1;
  min-width: 160px;
}

.inline-form label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.inline-form input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 0.9rem;
  font-family: inherit;
}

.top-bar-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-bar-user .who {
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* Roster item actions (edit / documents / delete) */

.item-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.link-btn:hover {
  text-decoration: underline;
}

.delete-aircraft-btn,
.delete-doc-btn {
  color: #ff9aa6;
}

.roster-item-editing input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.88rem;
  font-family: inherit;
  flex: 1;
  min-width: 120px;
}

/* Aircraft documents panel */

.docs-panel {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin: -2px 0 4px;
}

.doc-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  gap: 8px;
  flex-wrap: wrap;
}

.doc-name {
  color: var(--text);
}

.doc-msg {
  margin-top: 8px;
}

/* Viewer switcher (schedule page demo only — stands in for real login until
   this board is wired up to accounts) */

.viewer-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.viewer-toggle select,
.viewer-toggle input[type="text"] {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.85rem;
  font-family: inherit;
}

.viewer-toggle input[type="text"] {
  min-width: 200px;
}

.viewer-toggle select:focus,
.viewer-toggle input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

/* Sits next to the student name field. It doesn't do anything the typing
   itself hasn't already done (the name applies live, letter by letter) — it
   just blurs the field so it's visually clear the name has been "applied"
   instead of looking like it's still mid-edit. */
.viewer-apply-btn {
  padding: 7px 16px;
  font-size: 0.85rem;
}

/* ICAO airport picker — drives the sunrise/sunset overlay on the schedule
   grid below. Reuses .viewer-toggle's row/gap/font styling, with a narrower,
   all-caps input for the 4-letter code. */
.airport-toggle input[type="text"]#airport-icao {
  min-width: 0;
  width: 92px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* While a typed-in ICAO code is being looked up against the full airport
   database (see script.js's applyAirport), the button is briefly disabled
   so a second click can't kick off an overlapping lookup. */
.airport-toggle .viewer-apply-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.airport-info {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.airport-info.airport-info-warning {
  color: var(--amber);
}

/* Explains what the currently-selected demo viewer can and can't do on this
   page — swapped out by script.js whenever the viewer dropdown changes. */
.viewer-help {
  background: var(--accent-soft);
  border: 1px solid rgba(30, 136, 224, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 18px;
}

.viewer-help strong {
  color: var(--accent);
}

/* Date navigator (schedule page) */

.date-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  position: relative;
  flex-wrap: wrap;
}

.date-nav-arrow {
  padding: 9px 15px;
  font-size: 1rem;
  line-height: 1;
}

.date-nav-label {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 230px;
  text-align: center;
  font-family: inherit;
}

.date-nav-label:hover {
  border-color: var(--accent);
}

.calendar-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  width: 300px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.calendar-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 12px;
}

.calendar-nav-arrow {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.9rem;
  cursor: pointer;
  flex-shrink: 0;
}

.calendar-nav-arrow:hover {
  border-color: var(--accent);
}

.calendar-month-select {
  display: flex;
  gap: 6px;
  flex: 1;
}

.calendar-month-select select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 4px;
  font-size: 0.8rem;
  width: 100%;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-weekdays {
  margin-bottom: 4px;
}

.calendar-weekdays span {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
}

.calendar-day:hover {
  background: var(--accent-soft);
}

.calendar-day.today {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.calendar-day.selected {
  background: var(--accent);
  color: #04122a;
  font-weight: 600;
}

.calendar-day.empty {
  cursor: default;
  visibility: hidden;
}

.calendar-footer {
  margin-top: 10px;
  text-align: center;
}

.calendar-footer button {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
}

.calendar-footer button:hover {
  text-decoration: underline;
}