/* flight-log
   ------------------------------------------------------------------------
   One stylesheet for the whole site, served under a name that contains a hash
   of its contents so it is fetched once and then never again.

   It is written as tokens first and components second. Anything a page wants
   to look different about should be a variable here rather than a style
   attribute there. */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light dark;

  /* Surfaces, furthest to nearest: the page, the cards on it, the things that
     sit on a card, and a well for the things that sit under one. */
  --bg: #f4f6f8;
  --surface: #ffffff;
  --raised: #fafbfc;
  --sunken: #eceff3;

  --text: #141a21;
  --muted: #5f6c7b;
  --faint: #8e9aa8;
  --line: #e0e5eb;
  --line-strong: #c9d1da;

  /* A cold, high-altitude blue for the furniture and a warm one for the
     flights, so the lines on the map are never the same colour as the map. */
  --accent: #1f6feb;
  --accent-hover: #1859c4;
  --accent-text: #ffffff;
  --accent-weak: #eaf1fd;
  --accent-line: #cfe0fb;

  --error-bg: #fdecea;
  --error-text: #a3251b;
  --ok-bg: #e8f5ec;
  --ok-text: #1c6b39;

  /* The map. The ocean is a surface rather than a colour of its own, so a
     dark page gets a dark sea without a second set of decisions. */
  --sea: #e5edf5;
  --land: #ffffff;
  --land-line: #c4cfdb;
  --leg: #e2603a;
  --marker: #12324f;
  --marker-ring: #ffffff;

  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 26, 33, 0.05);
  --shadow-md: 0 1px 3px rgba(20, 26, 33, 0.06), 0 6px 16px -6px rgba(20, 26, 33, 0.10);
  --shadow-lg: 0 2px 6px rgba(20, 26, 33, 0.07), 0 18px 40px -18px rgba(20, 26, 33, 0.20);

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Numbers line up in columns when they are all the same width, and this page
     is mostly numbers in columns. */
  --font-figures: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --page: 1180px;
  --gutter: 24px;

  /* 44px is the smallest thing a thumb hits reliably. */
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e131a;
    --surface: #171e27;
    --raised: #1e262f;
    --sunken: #0b1016;

    --text: #eef2f6;
    --muted: #9aa7b4;
    --faint: #6f7d8b;
    --line: #2a333d;
    --line-strong: #3b4551;

    --accent: #59a0ff;
    --accent-hover: #7ab3ff;
    --accent-text: #06182e;
    --accent-weak: #14263c;
    --accent-line: #1f3b5c;

    --error-bg: #3a1a17;
    --error-text: #ffb0a5;
    --ok-bg: #12291d;
    --ok-text: #8ed6a7;

    --sea: #0c1620;
    --land: #1c2833;
    --land-line: #33424f;
    --leg: #ff8355;
    --marker: #ffd9a0;
    --marker-ring: #0c1620;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.45), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 40px -18px rgba(0, 0, 0, 0.75);
  }
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  padding: var(--gutter) var(--gutter) 64px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Signed out pages are a single centred card; signed in pages are a page. */
body.centred {
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

body.centred main {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px;
}

main {
  max-width: var(--page);
  margin: 0 auto;
}

main.wide { max-width: var(--page); }

h1 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

p { margin: 0 0 16px; color: var(--muted); }
p.tight { margin-bottom: 6px; }
p.crumb { margin-bottom: 8px; }

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

strong { color: var(--text); font-weight: 600; }

.muted-small { color: var(--faint); font-size: 13px; }

.spacer { flex: 1; }

/* The icons. Every one sits beside its own label, so a kit that never loads
   leaves a site with no icons on it rather than one with holes in it.

   1.25em is the width of the widest glyph in the set - fa-user-shield,
   fa-plane-departure, fa-users, fa-city. At 1em each of those overhangs its
   box by two or three pixels and lands on the first letter of the label
   beside it, which is what made the bar look squashed.

   There is no ":empty" rule here any more. A kit configured for web fonts
   draws its glyph from a ::before, which leaves the <i> element itself
   childless - so :empty matched a loaded icon exactly as readily as a missing
   one, and took the gap away from both. What separates the two instead is the
   width: font mode makes these inline-block, and width does nothing at all to
   the plain inline <i> a kit that never arrives leaves behind. */
.ico { margin-right: 7px; width: 1.25em; text-align: center; }
.ico-accent { color: var(--accent); }
.big { font-size: 34px; display: block; margin: 0 0 12px; }

/* --------------------------------------------------------------- the bar */

.bar {
  max-width: var(--page);
  margin: 0 auto 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.bar nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  flex-wrap: wrap;
}

.brand {
  font-weight: 700;
  color: var(--text);
  margin-right: 10px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand:hover { text-decoration: none; }

/* A link keeps its own width and wraps onto a second row rather than being
   squeezed: flex would otherwise shrink these past their labels, and a tab
   narrower than the words in it is how "Flights" ends up under its own icon. */
.tab {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.tab:hover { background: var(--sunken); color: var(--text); text-decoration: none; }
.tab.on { background: var(--accent-weak); color: var(--accent); }

.who {
  color: var(--faint);
  font-size: 13px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The same links along the bottom, for a phone. */
.tabbar { display: none; }

/* ------------------------------------------------------------- the forms */

label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

input, select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  margin: 0 0 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font: inherit;
  font-size: 16px; /* Anything smaller and iOS zooms the page on focus. */
}

textarea { min-height: 0; resize: vertical; line-height: 1.5; }

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

input[type="checkbox"] { min-height: 0; height: 20px; width: 20px; accent-color: var(--accent); }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 18px;
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:hover, .button:hover { background: var(--accent-hover); text-decoration: none; }

button.block, .button.block { width: 100%; }

button.link {
  background: none;
  color: var(--muted);
  padding: 0 8px;
  min-height: 36px;
  font-weight: 500;
}

button.link:hover { background: var(--sunken); color: var(--text); }
button.link.danger { color: var(--error-text); }
button.link.danger:hover { background: var(--error-bg); }

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin: 0 0 22px;
}

.card summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
}

.card[open] summary { margin-bottom: 16px; }

.notes-card p { margin: 0; color: var(--text); white-space: pre-wrap; }

/* A row of fields that wraps rather than scrolling, so the same form works on
   a laptop and on a phone without a second layout. */
.fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  align-items: flex-start;
}

.field { flex: 1 1 200px; min-width: 0; }
.field.narrow { flex: 0 1 150px; }
.field.tiny { flex: 0 1 92px; }
.field.actions { flex: 1 1 100%; display: flex; gap: 10px; align-items: center; }

.banner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  margin: 0 0 18px;
  background: var(--error-bg);
  color: var(--error-text);
  border-radius: var(--r-md);
  font-size: 15px;
}

/* ------------------------------------------------------------ the tables */

.list-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 12px;
}

.count {
  background: var(--sunken);
  border-radius: var(--r-pill);
  padding: 2px 10px;
}

/* A table wider than the screen scrolls inside its own box rather than making
   the whole page scroll sideways. */
.scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

th {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--raised); }

th.right, td.right { text-align: right; font-family: var(--font-figures); font-size: 14px; }
th.right { font-family: var(--font-body); }

table.log td { white-space: nowrap; }

.route { font-family: var(--font-figures); font-size: 14px; letter-spacing: 0.02em; }
.route .ico { color: var(--faint); margin: 0 4px; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.pill .ico { margin-right: 5px; }
.pill:hover { text-decoration: none; background: var(--accent-line); }

tr.editor td { background: var(--sunken); padding: 16px 14px; white-space: normal; }
tr.editor:hover td { background: var(--sunken); }

/* --------------------------------------------------------- the timeframe */

.timeframe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  margin: 0 0 18px;
}

.presets { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-figures);
}

.chip:hover { text-decoration: none; background: var(--line); color: var(--text); }
.chip.on { background: var(--accent); color: var(--accent-text); }

.between { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.between label { margin: 0; }
.between input { margin: 0; width: auto; min-width: 150px; }

/* ----------------------------------------------------------- the numbers */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}

.stat .figure {
  display: block;
  font-family: var(--font-figures);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.stat .label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
  margin-top: 2px;
}

.notes { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }

.note {
  flex: 1 1 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px 16px;
}

.note .label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
}

.note strong { font-family: var(--font-figures); font-size: 17px; }
.note .muted-small { display: block; }

.caption { margin: 12px 0 20px; line-height: 1.6; }

/* ------------------------------------------------------------- the stats */

/* A heading that starts a section of the stats page rather than a card. */
h2.section {
  display: flex;
  align-items: center;
  margin: 28px 0 12px;
  font-size: 20px;
}

.records { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }

.record {
  flex: 1 1 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 12px 16px;
}

.record .label {
  display: block;
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
}

.record strong { font-family: var(--font-figures); font-size: 17px; }
.record .muted-small { display: block; }

/* The breakdowns sit two to a row on a laptop and one to a row on anything
   narrower, which is what auto-fit does without a second set of rules. */
.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin: 0 0 20px;
  align-items: start;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}

.panel h2 { display: flex; align-items: center; margin: 0 0 12px; }
.panel p { margin: 12px 0 0; }

/* One breakdown. Each row is a grid of a name and a figure, with the bar
   painted behind both of them rather than beside them - so a long name and a
   big number never have to compete with the chart for the same width. */
.bars { list-style: none; margin: 0; padding: 0; }

.bars li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 15px;
}

.bars li + li { margin-top: 2px; }

.bars .track {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  min-width: 2px;
  background: var(--accent-weak);
  border-radius: var(--r-sm);
}

/* A row with nothing in it - a month never flown in - keeps its place and its
   label, and says nothing else. */
.bars li.none { color: var(--faint); }
.bars li.none .value { color: var(--faint); }

.bars .name {
  position: relative;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bars .name .muted-small { margin-left: 8px; }

.bars .value {
  position: relative;
  font-family: var(--font-figures);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.bars .value .muted-small { margin-left: 6px; font-family: var(--font-body); }

/* --------------------------------------------------------------- the map */

.mapwrap {
  position: relative;
  background: var(--sea);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.map {
  display: block;
  width: 100%;
  height: auto;
  /* The drag handler wants the pointer events, not the browser's scrolling. */
  touch-action: none;
  cursor: grab;
}

.map.dragging { cursor: grabbing; }

.land path {
  fill: var(--land);
  stroke: var(--land-line);
  stroke-width: 0.12;
  stroke-linejoin: round;
}

.legs path {
  fill: none;
  stroke: var(--leg);
  stroke-opacity: 0.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legs path:hover { stroke-opacity: 1; }

.markers circle {
  fill: var(--marker);
  stroke: var(--marker-ring);
  stroke-width: 0.18;
}

.maptools {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.maptools button {
  min-height: 34px;
  width: 34px;
  padding: 0;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  font-size: 17px;
  font-weight: 700;
}

.maptools button:hover { background: var(--sunken); color: var(--text); }
.maptools .ico { margin: 0; font-size: 13px; }

/* ------------------------------------------------------------- the empty */

.empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--muted);
}

.empty h2 { margin: 0 0 8px; }
.empty p { margin: 0 0 12px; }

/* ------------------------------------------------------------ the phone */

@media (max-width: 760px) {
  :root { --gutter: 14px; }

  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* The links move to the bar along the bottom, so the top of the screen is
     the page rather than the navigation. */
  .bar nav .tab { display: none; }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px -6px rgba(0, 0, 0, 0.3);
    z-index: 10;
  }

  .tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
  }

  .tabbar a:hover { text-decoration: none; }
  .tabbar a.on { color: var(--accent); }
  .tabbar .ico { margin: 0; font-size: 16px; }

  h1 { font-size: 22px; }

  .stat .figure { font-size: 20px; }

  .timeframe { justify-content: flex-start; }
  .between input { min-width: 0; flex: 1 1 130px; }
}