/*
  Fligenta's whole design system. One hand-written stylesheet on custom properties rather than a UI
  library: the app is small, the look is specific, and a framework's opinions would be fought more often
  than used.

  The two brand colours are sampled from the logo, not guessed - #0B2852 is the wordmark navy and #0D74E3
  the swoosh blue.
*/

:root {
  color-scheme: light dark;

  --brand-navy: #0b2852;
  --brand-blue: #0d74e3;
  --brand-blue-light: #1687e8;

  --surface: #ffffff;
  --surface-sunken: #f4f6fa;
  --surface-raised: #ffffff;
  --border: #dde3ec;

  --ink: #0b2852;
  --ink-muted: #5a6b85;
  --ink-inverse: #ffffff;

  --accent: var(--brand-blue);
  --accent-ink: #ffffff;

  --ok: #1a7f52;
  --warn: #9a6400;
  --danger: #b3261e;

  --radius: 10px;
  --radius-lg: 16px;
  --gap: 1rem;

  --shadow: 0 1px 2px rgb(11 40 82 / 6%), 0 4px 16px rgb(11 40 82 / 6%);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Tabular figures matter here: a column of flight times that does not line up is hard to read and
     easy to mistrust. */
  --font-numeric: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0e1726;
    --surface-sunken: #0a111d;
    --surface-raised: #152238;
    --border: #23334f;

    --ink: #e9eef7;
    --ink-muted: #9aabc4;

    /* The logo blue is tuned for white. On a dark ground it needs lifting to keep its contrast. */
    --accent: #4ea1f5;
    --accent-ink: #06131f;

    --ok: #4ec38a;
    --warn: #e0ad4a;
    --danger: #f2837c;

    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
  }
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0 0 0.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.6rem; }

/* Blazor moves focus to the page heading after every navigation, so screen readers announce the new page.
   The heading is not interactive, and WebView2 draws a ring around it that browsers do not. */
h1:focus { outline: none; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */

.app {
  display: flex;
  min-height: 100vh;
}

.app__main {
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--brand-navy);
  color: #ffffff;
  padding: 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.5rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* ---------- Brand ---------- */

/* Both variants are in the markup and exactly one is shown. Every rule below selects with two classes,
   because a single-class rule would lose to `.brand img` on specificity and show both at once. */
.brand img { height: auto; }

.brand .brand__light { display: block; }
.brand .brand__dark { display: none; }

@media (prefers-color-scheme: dark) {
  .brand .brand__light { display: none; }
  .brand .brand__dark { display: block; }
}

/* The sidebar is the brand navy in either theme, so it always wants the light-on-dark variant. Three
   classes, to outrank the theme rules above whichever way they fall. */
.sidebar .brand .brand__light { display: none; }
.sidebar .brand .brand__dark { display: block; }

.brand--mark img { width: 30px; }
.brand--full img { width: 100%; max-width: 210px; margin: 0 auto; }

.sidebar__org {
  padding: 0 0.5rem;
  font-size: 0.78rem;
  color: #9fb6d6;
}

.sidebar__nav { display: flex; flex-direction: column; gap: 0.15rem; }

.sidebar__nav a {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius);
  color: #cddcf0;
  font-size: 0.93rem;
}

.sidebar__nav a:hover { background: rgb(255 255 255 / 8%); text-decoration: none; }

.sidebar__nav a.active {
  background: var(--brand-blue);
  color: #ffffff;
}

.sidebar__footer {
  margin-top: auto;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

/* Phone: the sidebar becomes a top bar with horizontally scrolling links. */
@media (max-width: 720px) {
  .app { flex-direction: column; }

  .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    overflow-x: auto;
  }

  .sidebar__nav { flex-direction: row; }

  /* The organisation name is the one thing worth dropping on a phone. The footer stays: hiding it took
     the only way to sign out with it. */
  .sidebar__org { display: none; }

  .sidebar__footer {
    margin-top: 0;
    margin-left: auto;
    padding: 0;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .app__main { padding: 1rem; }
}

/* Where the logbook on this device stands with the server: in the sidebar's footer, and on a phone a slim line at
   the top of the page instead - the top bar scrolls sideways, and this has to be seen. */
.sync-status { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.sync-status--compact { display: none; }
.sync-item + .sync-item { border-top: 1px solid var(--border); margin-top: 0.75rem; padding-top: 0.75rem; }

@media (max-width: 720px) {
  .sidebar .sync-status { display: none; }
  .sync-status--compact { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
}

/* ---------- Surfaces ---------- */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.25rem;
}

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.stat__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.stat__value {
  font-family: var(--font-numeric);
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat__unit { font-size: 0.85rem; color: var(--ink-muted); }

/* ---------- Status ---------- */

.pill {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  border: 1px solid currentcolor;
}

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

/* ---------- Forms ---------- */

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

.field label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
}

/* An example in an empty box must not read as a value someone already filled in. */
::placeholder {
  color: var(--ink-muted);
  opacity: 0.7;
  font-style: italic;
  font-size: 0.85em;
}

/* A dropdown outside a form field, in a row of other things, keeps the fields' look at a smaller size. */
select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

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

.field input,
.field select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

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

/* Validation from DataAnnotations: the message under a field, and the field itself. */
.validation-message {
  display: block;
  margin-top: 0.25rem;
  color: var(--danger);
  font-size: 0.82rem;
}

.field input.invalid { border-color: var(--danger); }

/* Where a looked-up aircraft's details came from: the register, or the person adding it. */
.field-source { font-size: 0.8rem; margin-top: 0.25rem; }
.field-source--found { color: var(--ok); }
.field-source--missing { color: var(--warn); font-weight: 600; }
.field input.missing,
.field select.missing { border-color: var(--warn); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.button:hover:not(:disabled) { background: var(--brand-blue-light); }
.button:disabled { opacity: 0.6; cursor: default; }

.button--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}

.button--secondary:hover:not(:disabled) { background: var(--surface-sunken); }

.button--link {
  width: auto;
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  font-weight: 500;
}

/* A link stays a link on hover: without this the filled button's hover colour lands behind blue text. */
.button--link:hover:not(:disabled) { background: none; text-decoration: underline; }

/* ---------- Sign-in ---------- */

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.auth__card { width: 100%; max-width: 380px; }

.auth__brand {
  text-align: center;
  margin-bottom: 1.25rem;
}



.auth__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.providers { display: flex; flex-direction: column; gap: 0.5rem; }

/* ---------- Feedback ---------- */

.alert {
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}

.muted { color: var(--ink-muted); }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }

.loading {
  padding: 2rem;
  text-align: center;
  color: var(--ink-muted);
}

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.table th {
  text-align: left;
  padding: 0.45rem 0.6rem;
  color: var(--ink-muted);
  font-weight: 600;
  white-space: nowrap;
}

.table td {
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}

.table .num { text-align: right; font-family: var(--font-numeric); }
.table tr.is-inactive td { color: var(--ink-muted); }
.table tr.is-next td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.table .pill { white-space: nowrap; }

/* On a phone the columns do not fit beside a long file name; each item becomes a short block instead. */
@media (max-width: 600px) {
  .attention-list thead { display: none; }
  .attention-list, .attention-list tbody { display: block; }
  .attention-list tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--border); }
  .attention-list tr:first-child { border-top: 0; }
  .attention-list td { border: 0; padding: 0; }
  .attention-list__line { flex: 0 0 100%; overflow-wrap: anywhere; }
  .attention-list__badge { margin-left: auto; }
  .attention-list__extra { display: none; }

  .training-list > thead { display: none; }
  .training-list, .training-list > tbody { display: block; }
  .training-list > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--border); }
  .training-list > tbody > tr:first-child { border-top: 0; }
  .training-list > tbody > tr > td { border: 0; padding: 0; }
  .training-list__who { flex: 1 1 0; min-width: 0; }
  .training-list__line { flex: 0 0 100%; min-width: 0; }
  .training-list > tbody > tr > .training-list__flags { flex: 0 0 100%; text-align: left; }
}

.training-list__flags { text-align: right; }
.training-list__flags .pill + .pill { margin-left: 0.3rem; }

.student-hours { margin-bottom: 0.4rem; }
.notice.notice--warn { color: var(--warn); border-color: var(--warn); background: transparent; }
.template-update { margin: 0.75rem 0 0; }
.template-update ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.template-update p { margin: 0.5rem 0; }

/* ---------- Places ---------- */

.place-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1.2rem;
  margin: 0;
}

.place-facts dt { color: var(--ink-muted); }
.place-facts dd { margin: 0; }

/* ---------- Logbook list ---------- */

/* The whole logbook in one pane the height of the window, its own rail down the right instead of pages. */
.logbook-pane { position: relative; --thumb: 2.5rem; --rail: 3.5rem; }

.logbook-scroll {
  max-height: calc(100vh - 11rem);
  max-height: calc(100dvh - 11rem);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.logbook-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.logbook-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--border);
}

.logbook-pane.has-scrubber .logbook-scroll {
  padding-right: var(--rail);
  scrollbar-width: none;
}

.logbook-pane.has-scrubber .logbook-scroll::-webkit-scrollbar { display: none; }

.scrubber {
  display: none;
  position: absolute;
  top: 2.4rem;
  bottom: 0.25rem;
  right: 0;
  width: var(--rail);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.logbook-pane.has-scrubber .scrubber { display: block; }

.scrubber::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.55rem;
  width: 2px;
  border-radius: 1px;
  background: var(--border);
}

.scrubber__year {
  position: absolute;
  right: 1.1rem;
  top: calc((100% - var(--thumb)) * var(--at) + var(--thumb) / 2);
  transform: translateY(-50%);
  font-family: var(--font-numeric);
  font-size: 0.72rem;
  line-height: 1;
  color: var(--ink-muted);
  pointer-events: none;
}

.scrubber__thumb {
  position: absolute;
  top: 0;
  right: 0.3rem;
  width: 0.45rem;
  height: var(--thumb);
  border-radius: 0.3rem;
  background: var(--accent);
  opacity: 0.7;
  transition: opacity 0.15s, width 0.15s, right 0.15s;
}

.scrubber:hover .scrubber__thumb,
.scrubber.is-active .scrubber__thumb { opacity: 1; width: 0.6rem; right: 0.22rem; }

.scrubber__bubble {
  display: none;
  position: absolute;
  top: calc(var(--thumb) / 2 - 0.85rem);
  right: calc(var(--rail) - 0.25rem);
  height: 1.7rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.7rem;
  white-space: nowrap;
  box-shadow: var(--shadow);
  pointer-events: none;
}

.scrubber:hover .scrubber__bubble,
.scrubber.is-active .scrubber__bubble { display: block; }

/* ---------- Person photo ---------- */

.person-photo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.person-photo__image {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-sunken);
}

.person-photo__initials {
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.person-photo__actions .actions { margin: 0 0 0.25rem; }

.person-photo label.button { position: relative; cursor: pointer; }
.person-photo label.button[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

/* The file input stays in the page for the keyboard and screen readers, but only the label button shows. */
.person-photo__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.person-photo label.button:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Chips and small controls ---------- */

.chip {
  display: inline-block;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  font-size: 0.76rem;
}

/* A syllabus's planned time, one figure per kind of lesson. */
.course-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-family: var(--font-numeric);
}

.course-hours strong { color: var(--ink); font-weight: 600; }

.button--small {
  width: auto;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}

.button--danger {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--danger);
}

.button--danger:hover:not(:disabled) { background: var(--surface-sunken); }

.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------- Forms laid out in columns ---------- */

.form-grid {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.checks { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 0.9rem; }
.checks label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.92rem; }
.checks input[type="checkbox"] { width: auto; flex: none; }

.notice {
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--ok);
  color: var(--ok);
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.page-head h1 { margin: 0; }

/* ---------- Phase 4: flights and fleet ---------- */

.field textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* A disabled fieldset is how a signed entry is shown read-only; the fields should read as text, not as broken. */
fieldset:disabled input,
fieldset:disabled select,
fieldset:disabled textarea {
  background: var(--surface-sunken);
  color: var(--ink);
  opacity: 1;
}

/* Whole-card links on the fleet page. */
a.aircraft-card {
  display: block;
  color: inherit;
}

a.aircraft-card:hover {
  text-decoration: none;
  border-color: var(--accent);
}

a.button { text-decoration: none; }

/* ---------- Phase 5: schedule ---------- */

/* A resource per row, a track per day. The card scrolls sideways on a phone rather than squeezing the hours. */
.timeline { overflow-x: auto; padding-top: 0.6rem; }

.timeline__row {
  display: flex;
  align-items: stretch;
  min-width: 1000px;
  border-top: 1px solid var(--border);
}

.timeline__row--head { border-top: none; }

.timeline__label {
  flex: 0 0 150px;
  padding: 0.45rem 0.6rem 0.45rem 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.timeline__track {
  position: relative;
  flex: 1;
  min-height: 3rem;
}

.timeline__row--head .timeline__track { min-height: 1.4rem; }

.timeline__hour {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-numeric);
  font-size: 0.72rem;
  color: var(--ink-muted);
}

/* One link per hour: a click on empty time starts a booking there. The faint left border is the hour line. */
.timeline__cell {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--border);
}

.timeline__cell:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); text-decoration: none; }

.timeline__item {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  overflow: hidden;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  background: var(--brand-navy);
  color: #ffffff;
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.timeline__item strong { display: block; font-family: var(--font-numeric); font-weight: 600; }

.timeline__item--mine { background: var(--accent); color: var(--accent-ink); }

.timeline__item--private {
  background: var(--surface-sunken);
  color: var(--ink-muted);
  border: 1px solid var(--border);
  cursor: default;
}

.timeline__item--blocked {
  background: color-mix(in srgb, var(--ink-muted) 22%, var(--surface));
  color: var(--ink);
  cursor: default;
}

.timeline__item--turnaround {
  padding: 0;
  background: repeating-linear-gradient(45deg, var(--border), var(--border) 3px, transparent 3px, transparent 6px);
  cursor: default;
}

@media (prefers-color-scheme: dark) {
  .timeline__item { background: #2a4a7a; }
  .timeline__item--mine { background: var(--accent); }
}

/* Dragging: a booking that can be moved says so; while anything is dragged, quarter hours lie over the track. */
.timeline__item[draggable="true"] { cursor: grab; }

.timeline__item--dragged { opacity: 0.45; }

.timeline__drop {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
}

.timeline__item--ghost {
  z-index: 1;
  background: transparent;
  color: var(--accent);
  border: 2px dashed var(--accent);
  pointer-events: none;
}

.lesson-chip {
  display: flex;
  flex-direction: column;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.8rem;
  line-height: 1.3;
  cursor: grab;
}

.lesson-chip span { color: var(--ink-muted); }

/* ---------- Phase 6: training ---------- */

.blockers { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.blockers .pill { margin-right: 0.4rem; }

.progress {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  overflow: hidden;
}

.progress__bar { height: 100%; background: var(--ok); }

.grade-grid { display: grid; grid-template-columns: minmax(10rem, 1fr) 9rem 4.5rem minmax(8rem, 2fr); gap: 0.4rem 0.75rem; align-items: center; }
.grade-grid select, .grade-grid input { padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; }
.crew-name-setting select { padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; }

.student-standing { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.student-standing__item { padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 0.5rem; min-width: 0; overflow-wrap: anywhere; }
.student-standing__item--danger { border-left-color: var(--danger); }
.student-standing__item--warn { border-left-color: var(--warn); }
.student-standing__item h3 { margin: 0 0 0.3rem; font-size: 0.85rem; color: var(--ink-muted); font-weight: 600; }
.student-standing__item .muted { font-size: 0.85rem; }
.student-standing__line + .student-standing__line { margin-top: 0.5rem; }

.lesson-row { padding: 0.6rem 0; border-top: 1px solid var(--border); }
.lesson-row:first-of-type { border-top: none; }

/* On a lesson record: what needed work last time, to pick up again. */
.focus-note {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  font-size: 0.88rem;
}

.focus-note ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }

.grade-grid .pill { margin-right: 0.35rem; }

/* The in-flight screen: one column, thumb-sized targets, readable in a bumpy cockpit. */
.inflight { max-width: 34rem; margin: 0 auto; }

.inflight__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.inflight__head h1 { margin-bottom: 0; }
.inflight__head p { margin-top: 0.2rem; }

.inflight__times {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
  margin: 0.8rem 0;
  text-align: center;
}

.inflight__times div { padding: 0.45rem 0.2rem; border-radius: var(--radius); background: var(--surface-sunken); }
.inflight__times dt { font-size: 0.72rem; color: var(--ink-muted); }
.inflight__times dd { margin: 0.15rem 0 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.inflight__taps { display: grid; gap: 0.6rem; margin-bottom: 0.6rem; }

.inflight__tap {
  min-height: 4.5rem;
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.inflight__tap--other { min-height: 3.5rem; font-size: 1.1rem; background: var(--surface-raised); color: var(--ink); border: 2px solid var(--accent); }
.inflight__tap:disabled { opacity: 0.6; cursor: default; }

.inflight__grades { margin-top: 1rem; }

.inflight__exercise { padding: 0.7rem 0; border-top: 1px solid var(--border); }
.inflight__exercise:first-of-type { border-top: 0; }
.inflight__exercise-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.inflight__remark { margin: 0.45rem 0 0; }
.inflight__last { margin: 0.2rem 0 0; font-size: 0.85rem; }
.inflight__take-out { margin-left: auto; min-height: 2.75rem; }

/* Bringing in an exercise from another lesson: big enough to hit in the air, on the ground form too. */
.exercise-picker { margin: 0.7rem 0 0.9rem; }
.exercise-picker__open { width: 100%; min-height: 3.2rem; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface-raised); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.exercise-picker__filter { margin: 0.4rem 0; }
.exercise-picker__heading { margin: 0.7rem 0 0.3rem; font-size: 0.85rem; color: var(--ink-muted); }
.exercise-picker__lesson { border-top: 1px solid var(--border); }
.exercise-picker__lesson summary { min-height: 2.9rem; display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.exercise-picker__option { width: 100%; min-height: 3.2rem; margin-bottom: 0.3rem; padding: 0.3rem 0.6rem; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.exercise-picker__option .muted { font-size: 0.8rem; white-space: nowrap; }

.inflight__scale, .inflight__outcome { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.45rem; }
.inflight__outcome { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.inflight__scale button, .inflight__outcome button {
  min-height: 3.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

/* The grade: one joined bar to choose a place on. The counter below has another shape, so a 2 here is not taken for 2 times. */
.inflight__scale { gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.inflight__scale button { font-size: 1.3rem; border: 0; border-left: 1px solid var(--border); border-radius: 0; }
.inflight__scale button:first-child { border-left: 0; }

.inflight__label { display: block; margin: 0.7rem 0 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--ink-muted); }

.inflight__counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--surface-sunken);
}

.inflight__counter strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.inflight__counter button {
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.inflight__counter button:disabled { opacity: 0.4; cursor: default; }

.inflight__outcome button { font-size: 0.8rem; padding: 0.3rem; overflow-wrap: anywhere; hyphens: auto; }
.inflight__scale button.is-met { background: var(--ok); border-color: var(--ok); color: #fff; }
.inflight__scale button.is-below { background: var(--danger); border-color: var(--danger); color: #fff; }
.inflight__outcome button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* The ETA: the time the board shows, and big enough buttons to move it with a glove on. */
.inflight__eta { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 0.4rem; align-items: stretch; margin-bottom: 0.6rem; }
.inflight__eta > div { display: flex; flex-direction: column; justify-content: center; padding: 0.3rem 0.5rem; border-radius: var(--radius); background: var(--surface-sunken); }
.inflight__eta > div span { font-size: 0.72rem; }
.inflight__eta strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.inflight__eta button {
  min-height: 3.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.inflight__board { margin: -0.2rem 0 0.6rem; font-size: 0.85rem; }

/* The departures board: what is late stands out, what is done fades back. */
.board td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.board__row--late td { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.board__row--back td, .board__row--notreported td { color: var(--ink-muted); }
.board__late { display: block; font-size: 0.8rem; color: var(--danger); font-weight: 600; }
.board__docs { display: block; font-size: 0.8rem; color: var(--warn); }

/* The documents check on a booking: a tick with who and when, or the button to give it. */
.documents-check h2 { margin-bottom: 0.5rem; }
.documents-check__done { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.documents-check__done > span { color: var(--ok); font-weight: 700; }

/* Safety reports: the kind as two big choices, the report's facts, and the follow-up as a thread. */
.safety__kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.safety__kinds button {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.safety__kinds button span { font-size: 0.85rem; color: var(--ink-muted); }
.safety__kinds button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.safety__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.6rem 1.2rem; margin: 0 0 0.6rem; }
.safety__facts dt { font-size: 0.8rem; color: var(--ink-muted); }
.safety__facts dd { margin: 0.1rem 0 0; }
.safety__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.safety__closed { border-color: var(--ok); }
.safety__notes { list-style: none; margin: 0 0 1rem; padding: 0; }
.safety__notes li { padding: 0.6rem 0; border-top: 1px solid var(--border); }
.safety__notes li:first-child { border-top: 0; }
.safety__note-head { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; font-size: 0.9rem; }
.safety__notes .safety__text { margin: 0.25rem 0 0; }
.safety__note--reporter { padding-left: 0.75rem !important; border-left: 3px solid var(--accent); }

/* Student feedback: stars to read or tap, under a lesson and in the training overview. */
.stars { display: inline-flex; gap: 0.05rem; color: var(--border); letter-spacing: 0; }
.stars .is-on, .stars button.is-on { color: #e0a100; }
.stars--input button {
  padding: 0 0.1rem;
  border: 0;
  background: none;
  color: var(--border);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.lesson-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-top: 0.5rem; padding: 0.5rem 0.7rem; border-radius: var(--radius); background: var(--surface-sunken); }
.lesson-feedback label { width: 100%; font-weight: 600; }
.lesson-feedback .field { width: 100%; margin: 0; }
.lesson-feedback p { width: 100%; margin: 0; white-space: pre-line; }
.feedback-list { list-style: none; margin: 0; padding: 0; }
.feedback-list li { padding: 0.55rem 0; border-top: 1px solid var(--border); }
.feedback-list li:first-child { border-top: 0; }
.feedback-list__head { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: baseline; }
.feedback-list p { margin: 0.25rem 0 0; white-space: pre-line; }

/* Links out to the public flight trackers. */
.trackers { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }
.notice .trackers { margin-left: 0.4rem; }
.board .trackers { font-size: 0.85rem; white-space: nowrap; }

/* A lesson's briefing material: a short list of links and documents under the lesson. */
.lesson-row__material { margin-top: 0.35rem; }

.material-list { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; }

.material-list li { padding: 0.1rem 0; }

.material-list .button--link { padding: 0; font-size: inherit; }

.material-editor {
  margin-top: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}
.lesson-editor { padding: 0.75rem; margin: 0.25rem 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); }

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

/* ---------- Logbook analysis ----------

  One colour per logbook column, the same wherever the column appears - the flight form, the column bars,
  the per-type breakdown and the monthly chart. The six seats come first and take the categorical palette
  in its validated order, so the stacked monthly bars keep neighbouring segments apart for colour-blind
  readers; the rest are directly labelled wherever they are drawn, so no line depends on its colour alone.
  Dark mode has its own steps of the same hues, lifted for the dark surface rather than flipped. */

:root {
  --series-pic: #2a78d6;
  --series-sic: #eb6834;
  --series-dual: #1baf7a;
  --series-instructor: #eda100;
  --series-picus: #e87ba4;
  --series-simulator: #008300;
  --series-night: #4a3aa7;
  --series-ifr: #e34948;
  --series-ifrday: #f09a99;
  --series-ifrnight: #9c2a2b;
  --series-actual: #184f95;
  --series-siminst: #86b6ef;
  --series-xc: #5f6b7a;
  --series-multipilot: #9a6b2f;
  --series-day: #c98500;
  --series-sectors: #52514e;
  --series-neutral: #9aa6b8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --series-pic: #3987e5;
    --series-sic: #d95926;
    --series-dual: #199e70;
    --series-instructor: #c98500;
    --series-picus: #d55181;
    --series-simulator: #008300;
    --series-night: #9085e9;
    --series-ifr: #e66767;
    --series-ifrday: #f4b0b0;
    --series-ifrnight: #b84444;
    --series-actual: #5598e7;
    --series-siminst: #b7d3f6;
    --series-xc: #a3adba;
    --series-multipilot: #c7a06b;
    --series-day: #eda100;
    --series-sectors: #c3c2b7;
    --series-neutral: #5a6b85;
  }
}

.series--pic { --series: var(--series-pic); }
.series--sic { --series: var(--series-sic); }
.series--dual { --series: var(--series-dual); }
.series--instructor { --series: var(--series-instructor); }
.series--picus { --series: var(--series-picus); }
.series--simulator { --series: var(--series-simulator); }
.series--night { --series: var(--series-night); }
.series--ifr { --series: var(--series-ifr); }
.series--ifrday { --series: var(--series-ifrday); }
.series--ifrnight { --series: var(--series-ifrnight); }
.series--actual { --series: var(--series-actual); }
.series--siminst { --series: var(--series-siminst); }
.series--xc { --series: var(--series-xc); }
.series--multipilot { --series: var(--series-multipilot); }
.series--day { --series: var(--series-day); }
.series--sectors { --series: var(--series-sectors); }
.series--neutral { --series: var(--series-neutral); }

.swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.35rem;
  border-radius: 3px;
  background: var(--series, transparent);
  vertical-align: -0.05rem;
}

.swatch:not([class*="series--"]):not([style]) { display: none; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.1rem;
}

.filters .field { min-width: 11rem; }

.analysis-columns {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--gap);
  align-items: start;
}

.bars { display: grid; gap: 0.35rem; }

.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 5rem minmax(3rem, 2fr);
  gap: 0.75rem;
  align-items: center;
  font-size: 0.92rem;
}

.bars--compact .bar-row { font-size: 0.85rem; grid-template-columns: minmax(0, 1.8fr) 4rem minmax(2.5rem, 1fr); gap: 0.5rem; }

.bar-row__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row__value { text-align: right; font-family: var(--font-numeric); }

.bar-row__track {
  display: block;
  height: 0.8rem;
  border-radius: 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  overflow: hidden;
}

.bar-row__fill {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--series, var(--accent));
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--gap);
}

/* The route map. Lines and dots use non-scaling strokes and the labels are sized in screen pixels (--px,
   set by fligenta.map), so they stay the same size at every zoom; only the coastline grows. */
:root {
  --map-sea: #e6eef8;
  --map-land: #fbfcfd;
  --map-border: #c3cedc;
  --map-route: #0d74e3;
  --map-airport: #0b2852;
}

@media (prefers-color-scheme: dark) {
  :root {
    --map-sea: #0a111d;
    --map-land: #1a2a42;
    --map-border: #33496b;
    --map-route: #4ea1f5;
    --map-airport: #e9eef7;
  }
}

.route-map { position: relative; margin-top: 0.75rem; }

.route-map__svg {
  display: block;
  width: 100%;
  height: clamp(16rem, 55vh, 30rem);
  border-radius: var(--radius);
  background: var(--map-sea);
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.route-map__svg:active { cursor: grabbing; }
.route-map__sea { fill: var(--map-sea); }
.route-map__land { fill: var(--map-land); stroke: var(--map-border); stroke-width: 0.75px; vector-effect: non-scaling-stroke; fill-rule: evenodd; }
.route-map__route { fill: none; stroke: var(--map-route); stroke-opacity: 0.75; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route-map__airport { stroke: var(--map-airport); stroke-linecap: round; vector-effect: non-scaling-stroke; }

.route-map__label {
  font-size: calc(var(--px, 1px) * 12);
  font-weight: 600;
  fill: var(--map-airport);
  stroke: var(--map-land);
  stroke-width: calc(var(--px, 1px) * 3);
  paint-order: stroke;
  pointer-events: none;
}

.route-map__controls {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.25rem;
}

.route-map__controls .button { width: auto; min-width: 2.25rem; }

/* The star that puts a type first. Outlined until pressed; a 2rem target, larger than the glyph. */
.star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.35rem 0 -0.35rem -0.4rem;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.star svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.star:hover:not(:disabled) { background: var(--surface-sunken); color: var(--accent); }
.star[aria-pressed="true"] { color: var(--accent); }
.star[aria-pressed="true"] svg { fill: currentColor; }
.star:disabled { opacity: 0.6; cursor: default; }

.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.legend__item { display: inline-flex; align-items: center; }

.monthly { display: block; width: 100%; height: auto; overflow: visible; }
.monthly__grid { stroke: var(--border); stroke-width: 1; }
.monthly__segment { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.monthly__bar:hover .monthly__segment { filter: brightness(1.12); }
.monthly__label { fill: var(--ink-muted); font-size: 11px; font-family: var(--font); }

.meter {
  height: 0.55rem;
  margin: 0.25rem 0;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  overflow: hidden;
}

.meter > span { display: block; height: 100%; border-radius: 999px; }
.meter--ok > span { background: var(--ok); }
.meter--warn > span { background: var(--warn); }
.meter--danger > span { background: var(--danger); }

/* The flight form's "use the whole flight time" button, and the +/- steppers for counts. */
.input-with-action { display: flex; gap: 0.35rem; align-items: stretch; }
.input-with-action input { flex: 1; min-width: 0; }
.input-with-action .button { white-space: nowrap; }

.stepper { display: flex; gap: 0.35rem; align-items: stretch; }
.stepper input { flex: 1; min-width: 0; text-align: center; }
.stepper .button { min-width: 2.25rem; font-size: 1rem; }

.chips { display: flex; flex-wrap: wrap; }
.chip--button { cursor: pointer; color: var(--ink); font: inherit; font-size: 0.8rem; }
.chip--button:hover { border-color: var(--accent); }
.chip--button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.colour-choices { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.colour-choice {
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--series);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}

.colour-choice--on { box-shadow: 0 0 0 2px var(--ink); }

/* Side by side only where both columns have room for a readable bar. */
@media (max-width: 1100px) {
  .analysis-columns { grid-template-columns: 1fr; }
}

/* On a phone the name gets the line and the bar goes underneath, rather than cutting the name to a stub. */
@media (max-width: 720px) {
  .bar-row,
  .bars--compact .bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.5rem; }
  .bar-row__track { grid-column: 1 / -1; }
  .bars { gap: 0.55rem; }
}

/* ---------- Pro ---------- */

.pill--pro { color: var(--accent); }

.pro-notice h2 { display: flex; align-items: center; gap: 0.5rem; margin-top: 0; }
.pro-notice p:last-child { margin-bottom: 0; }

/* ---------- Pricing ---------- */

.pricing { width: 100%; max-width: 1080px; margin: 0 auto; }
.pricing h1 { text-align: center; margin-bottom: 0.4rem; }
.pricing__intro { text-align: center; color: var(--ink-muted); max-width: 40rem; margin: 0 auto 1rem; }
.pricing__beta { max-width: 40rem; margin: 0 auto 1.5rem; text-align: center; }

.pricing__plans {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

.plan { display: flex; flex-direction: column; }
.plan h2 { margin: 0; }
.plan--featured { border-color: var(--accent); border-width: 2px; }
.plan__for { margin: 0.25rem 0 0.9rem; font-size: 0.9rem; }

.plan__price { margin: 0; }
.plan__price strong { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan__price span { color: var(--ink-muted); }

.plan__terms { font-size: 0.82rem; margin: 0.35rem 0 0.5rem; }

.plan__points { padding-left: 1.1rem; margin: 0.6rem 0 1rem; flex: 1; }
.plan__points li { margin: 0.3rem 0; }

.plan__action { align-self: stretch; text-align: center; margin-top: auto; }

/* ---------- Terms and privacy ---------- */

.legal { width: 100%; max-width: 760px; margin: 0 auto; }
.legal__body h1 { margin-top: 0; }
.legal__body h2 { font-size: 1.1rem; margin: 1.5rem 0 0.4rem; }
.legal__body li { margin: 0.25rem 0; }
.legal__table { font-size: 0.88rem; margin: 0.5rem 0 0.8rem; }
.legal__table td { vertical-align: top; }
.legal__links { text-align: center; font-size: 0.8rem; margin: 1.1rem 0 0; line-height: 1.7; }
.auth__card .legal__links { margin-top: 0.9rem; }

/* On a phone three columns of prose do not fit; each row becomes a short block instead. */
@media (max-width: 600px) {
  .legal__table thead { display: none; }
  .legal__table, .legal__table tbody, .legal__table tr, .legal__table td { display: block; width: 100%; }
  .legal__table tr { border-bottom: 1px solid var(--border); padding: 0.5rem 0; }
  .legal__table td { border: 0; padding: 0.1rem 0; white-space: normal; }
  .legal__table td:first-child { font-weight: 600; }
  .legal__table td + td { color: var(--ink-muted); }
}