/* Fleet design system — tokens.
   A site may override --ds-action and --ds-canvas. Do not invent a new scale. */

:root {
  --ds-canvas: #f5f5f7;
  --ds-surface: #ffffff;
  --ds-ink: #1d1d1f;
  --ds-muted: #6e6e73;
  --ds-line: #d2d2d7;
  --ds-action: #0071e3;
  --ds-action-hover: #0077ed;
  --ds-focus: #0071e3;
  --ds-danger: #b42318;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 80px;

  --ds-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --ds-text: 17px;
  --ds-text-sm: 12px;
  --ds-title: clamp(28px, 4vw, 40px);
  --ds-display: clamp(40px, 7vw, 64px);
  --ds-leading: 1.47;
  --ds-track: -0.022em;

  --ds-nav-h: 48px;
  --ds-radius-control: 12px;
  --ds-radius-pill: 980px;
  --ds-measure: 40rem;
  --ds-page: 980px;
  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fleet design system — components. Mobile first. */

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--ds-canvas); overflow-x: clip; }

body {
  margin: 0;
  background: var(--ds-canvas);
  color: var(--ds-ink);
  font-family: var(--ds-font);
  font-size: var(--ds-text);
  line-height: var(--ds-leading);
  letter-spacing: -0.012em;
  overflow-x: clip;
}

body::before,
body::after { content: none; display: none; }

.skip {
  position: absolute;
  left: var(--ds-space-4);
  top: -4rem;
  background: var(--ds-ink);
  color: var(--ds-surface);
  padding: var(--ds-space-2) var(--ds-space-3);
}
.skip:focus { top: var(--ds-space-2); z-index: 30; }

.wrap {
  width: min(var(--ds-page), 100%);
  margin-inline: auto;
  padding-inline: 20px;
}

header.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-4);
  width: 100%;
  min-height: var(--ds-nav-h);
  margin: 0;
  padding: 0 20px;
  background: var(--ds-canvas);
  border-bottom: 1px solid var(--ds-line);
}

.mark {
  margin-right: auto;
  color: var(--ds-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mark span { color: var(--ds-ink); }

header.top nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
}
header.top nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ds-ink);
  font-size: var(--ds-text-sm);
  text-decoration: none;
}
header.top nav a[aria-current="page"] { opacity: 0.56; }

h1, h2, h3 { font-weight: 600; letter-spacing: var(--ds-track); line-height: 1.07; color: var(--ds-ink); }
h1 { margin: 0 0 12px; font-size: var(--ds-display); }
h2 { margin: 0 0 12px; font-size: var(--ds-title); }
h3 { margin: 0 0 4px; font-size: 21px; }
p, li { color: var(--ds-muted); max-width: min(var(--ds-measure), 100%); }
a { color: var(--ds-action); }
.eyebrow, .kicker { display: none; }

.hero {
  display: grid;
  gap: var(--ds-space-7);
  padding: var(--ds-space-7) 0 var(--ds-space-6);
}
.lede { margin: 0 0 var(--ds-space-5); font-size: 19px; }

.btn, button.btn, button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-action);
  color: #fff;
  font: inherit;
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, button[type="submit"]:hover { background: var(--ds-action-hover); color: #fff; }
.btn.quiet {
  background: transparent;
  color: var(--ds-action);
  box-shadow: inset 0 0 0 1px var(--ds-action);
}

.pad {
  background: var(--ds-surface);
  border-radius: 16px;
  padding: 8px 8px 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.pad-head, .pad-foot {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 10px 12px;
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}
.task {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  border-top: 1px solid var(--ds-line);
}
.task button {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  cursor: pointer;
}
.task p {
  margin: 0;
  color: var(--ds-ink);
  font-size: 17px;
  position: relative;
}
.task.done p { color: var(--ds-muted); }
.strike-svg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 92%;
  height: 10px;
  transform: translateY(-50%);
  overflow: visible;
}
.strike-svg path {
  fill: none;
  stroke: var(--ds-danger);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: ds-rise 0.80s var(--ds-ease) both; }
}
@keyframes ds-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.band { padding: var(--ds-space-7) 0; border-top: 1px solid var(--ds-line); }
.split { display: grid; gap: var(--ds-space-5); }
.refuses { list-style: none; margin: 0; padding: 0; }
.refuses li { padding: var(--ds-space-4) 0; border-bottom: 1px solid var(--ds-line); }
.notes a.note {
  display: grid;
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--ds-line);
  color: var(--ds-ink);
  text-decoration: none;
}
.notes a.note time { color: var(--ds-muted); font-size: var(--ds-text-sm); }
.notes a.note strong { font-weight: 600; }

footer.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  margin-top: var(--ds-space-6);
  padding: 22px 0 40px;
  border-top: 1px solid var(--ds-line);
  color: var(--ds-muted);
  font-size: var(--ds-text-sm);
}
footer.foot a { color: var(--ds-muted); font-size: var(--ds-text-sm); }

form { display: grid; gap: 12px; max-width: 32rem; }
label { display: grid; gap: 6px; color: var(--ds-ink); font-size: var(--ds-text-sm); }
input, textarea, select {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--ds-radius-control);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font: inherit;
  box-shadow: inset 0 0 0 1px var(--ds-line);
}
textarea { min-height: 140px; resize: vertical; }

:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 3px; }

@media (min-width: 760px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; align-items: end; padding-top: 88px; }
  .split { grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
  .btn, button[type="submit"] { width: auto; }
}

@media (max-width: 759px) {
  .btn, button[type="submit"] { width: 100%; }
  header.top nav { flex: 1 1 100%; }
  h1, .lede, p { overflow-wrap: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}

/* Site theme. Only canvas and action. */
:root {
  --ds-canvas: #f4f1ea;
  --ds-action: #0071e3;
}

.hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ds-radius-control);
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 70%, var(--ds-line));
}
.legend { margin: 0; }
.legend dt { margin-top: var(--ds-space-4); color: var(--ds-ink); font-weight: 600; }
.legend dd { margin: 4px 0 0; }

/* Liquid glass. Mobile first.
   One blur, on the bar only. Sheets stay translucent with a light 1px edge
   and do not add a second filter. One load motion: the hero rise above. */

body {
  background-color: var(--ds-canvas);
  background-image: radial-gradient(90% 32% at 50% -18%, rgba(255, 255, 255, 0.45), transparent 68%);
}

.wrap { padding-top: var(--ds-space-2); }

header.top,
.hero,
.band {
  background-clip: padding-box;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border: 1px solid color-mix(in srgb, #fff 70%, var(--ds-line));
  border-radius: var(--ds-radius-control);
  box-shadow: none;
}

header.top {
  top: var(--ds-space-2);
  margin-top: 0;
  padding-block: var(--ds-space-2);
  padding-inline: var(--ds-space-4);
  background: rgba(244, 241, 234, 0.88);
  background: color-mix(in srgb, var(--ds-canvas) 88%, transparent);
}

.hero,
.band {
  margin-top: var(--ds-space-4);
  padding: var(--ds-space-5) var(--ds-space-4);
  background: rgba(255, 255, 255, 0.74);
  background: color-mix(in srgb, var(--ds-surface) 74%, transparent);
}

.hero > * { min-width: 0; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.top {
    background: rgba(244, 241, 234, 0.68);
    background: color-mix(in srgb, var(--ds-canvas) 68%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    backdrop-filter: blur(14px) saturate(1.12);
  }
}

.notes a.note:first-child { border-top: 0; }
.refuses li:last-child { border-bottom: 0; }

input,
textarea,
select {
  background: rgba(255, 255, 255, 0.92);
  background: color-mix(in srgb, var(--ds-surface) 92%, transparent);
  box-shadow: inset 0 0 0 1px rgba(210, 210, 215, 0.95);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 62%, var(--ds-line));
}

.btn,
button.btn,
button[type="submit"] {
  background: var(--ds-action);
  color: #fff;
  border: 0;
  box-shadow: none;
}

.btn:hover,
button.btn:hover,
button[type="submit"]:hover {
  background: var(--ds-action-hover);
  color: #fff;
}

.btn.quiet,
.btn.quiet:hover {
  background: transparent;
  color: var(--ds-action);
  box-shadow: inset 0 0 0 1px var(--ds-action);
}

@media (min-width: 760px) {
  header.top { padding-inline: var(--ds-space-5); }
  .hero,
  .band { padding: var(--ds-space-7) var(--ds-space-5); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.top {
    background: rgba(244, 241, 234, 0.96);
    background: color-mix(in srgb, var(--ds-canvas) 96%, var(--ds-surface));
  }
}

html[data-motion="reduce"] .hero { animation: none; }