/* SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0 OR LicenseRef-PolyForm-Internal-Use-1.0.0 */

/* shuttle's project page, in the terminal interface's palette
   (internal/tui/theme.go): dark by default, light where the visitor's
   system asks for it. */

:root {
  --page: #1b1e26;
  --panel: #22252d;
  --surface: #2b303b;
  --line: #3a4252;
  --text: #c9ced8;
  --bright: #eef1f6;
  --dim: #8e97a9;
  --sky: #61afef;
  --teal: #56c2cf;
  --mint: #98c379;
  --amber: #f5c451;
  --yellow: #f5c451;
  --orange: #f0975a;
  --coral: #f7848d;
  --ink: #1b1e26;
  --sign: #13151b;
  --glass: #cde3fb;
  --mono: "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Cantarell, "Noto Sans", sans-serif;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --page: #f6f7f9;
    --panel: #ffffff;
    --surface: #eef1f6;
    --line: #dfe6f0;
    --text: #1b1e26;
    --bright: #14171d;
    --dim: #646b7a;
    --sky: #1c64c8;
    --teal: #00788a;
    --mint: #2a7430;
    --amber: #8a5b00;
    --yellow: #f6d32d;
    --orange: #b25000;
    --coral: #c8303f;
    --sign: #241f31;
    --glass: #4787d6;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sky); text-underline-offset: 3px; }
a:hover { color: var(--teal); }

code, pre, .mono { font-family: var(--mono); }
code { font-size: 0.9em; background: var(--surface); padding: 0.1em 0.35em; border-radius: 4px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } body { font-size: 16px; } }

/* The top bar: shuttle's one-line header, as the TUI draws it when short. */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 52px; font-family: var(--mono); font-size: 14px; }
.topbar .brand { display: flex; align-items: center; gap: 8px; color: var(--amber); font-weight: 700; text-decoration: none; }
.sign { background: var(--sign); color: var(--yellow); padding: 0 6px; border-radius: 3px; font-weight: 700; }
.topbar nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; }
.topbar nav a { color: var(--text); text-decoration: none; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.topbar nav a:hover { background: var(--yellow); color: var(--ink); }
.topbar nav .n { color: var(--amber); font-weight: 700; margin-right: 4px; }
.topbar nav a:hover .n { color: var(--ink); }
@media (max-width: 760px) { .topbar nav .label { display: none; } }

/* The hero: the bus beside the wordmark, as the TUI's header. */
.hero { padding-top: 72px; padding-bottom: 40px; }
.hero-art { display: flex; align-items: center; gap: clamp(16px, 4vw, 40px); }
.bus { width: clamp(84px, 16vw, 150px); height: auto; flex: none; }
.wordmark { width: min(100%, 560px); height: auto; }
.bus .body { stroke: var(--sky); }
.bus .sign-plate { fill: var(--sign); }
.bus .arrows { fill: var(--yellow); font: 700 15px var(--mono); }
.bus .glass { fill: var(--glass); }
.bus .light { fill: var(--amber); animation: blink 1s steps(1) infinite; }
.bus .light.right { animation-delay: -0.5s; }
.bus .grille, .bus .wheel { fill: var(--dim); stroke: var(--dim); }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .bus .light { animation: none; } }

.tagline { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.4; color: var(--bright); max-width: 760px; margin: 28px 0 10px; }
.modes { font-family: var(--mono); color: var(--dim); margin: 0 0 28px; }
.modes b { color: var(--amber); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 6px; font: 600 15px var(--mono); text-decoration: none;
  border: 1px solid var(--line); color: var(--text); background: var(--panel);
}
.button:hover { border-color: var(--sky); color: var(--sky); }
.button.primary { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.button.primary:hover { filter: brightness(1.06); color: var(--ink); }

/* Sections, each headed like a table header in the TUI. */
section { padding: 56px 0; border-top: 1px solid var(--line); }
.kicker { font: 700 13px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); margin: 0 0 8px; }
h2 { font: 700 clamp(26px, 3.4vw, 34px)/1.25 var(--sans); color: var(--bright); margin: 0 0 16px; }
h3 { font: 700 18px/1.35 var(--sans); color: var(--bright); margin: 0 0 6px; }
.lead { font-size: 19px; max-width: 760px; }
p { margin: 0 0 14px; }

/* The problem: what each tool leaves undone, in the TUI's error color. */
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 24px; }
.tool { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }
.tool .name { font: 700 15px var(--mono); color: var(--bright); }
.tool .gap { font: 13px var(--mono); color: var(--coral); margin: 6px 0 8px; }
.tool p { margin: 0; color: var(--dim); font-size: 15px; }

/* The mission, in a frame like the TUI's overlays. */
.mission {
  border: 2px solid var(--sky); border-radius: 12px; padding: 28px 32px; background: var(--panel);
  display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start;
}
.mission .glyph { font: 700 44px/1 var(--mono); color: var(--amber); }
@media (max-width: 600px) { .mission { grid-template-columns: 1fr; padding: 22px 20px; } }

/* What sets it apart: four, each marked in a state color. */
.distinct { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 24px; }
.distinct article { border-left: 4px solid var(--c, var(--sky)); background: var(--panel); padding: 18px 20px; border-radius: 0 8px 8px 0; }
.distinct p { margin: 0; font-size: 15.5px; }

/* Main features: a grid of cards with a glyph each. */
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 24px; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.feature .icon { font: 700 20px var(--mono); color: var(--c, var(--amber)); display: block; margin-bottom: 8px; }
.feature p { margin: 0; font-size: 15px; color: var(--text); }
.feature p .dim { color: var(--dim); }

/* The screenshot, in a terminal window. */
.window { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: 0 18px 50px rgb(0 0 0 / 0.28); }
.window .bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 13px var(--mono); color: var(--dim); }
.window .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.window img { display: block; width: 100%; height: auto; }
.caption { color: var(--dim); font-size: 15px; margin-top: 12px; }

/* How it fits together. */
.arch { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; align-items: center; gap: 12px; margin-top: 26px; font-family: var(--mono); font-size: 14px; }
.arch .col { display: grid; gap: 10px; }
.arch .box { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--panel); }
.arch .box b { color: var(--bright); display: block; }
.arch .box span { color: var(--dim); font-size: 13px; }
.arch .core { border: 2px solid var(--amber); }
.arch .core b { color: var(--amber); }
.arch .wire { color: var(--sky); text-align: center; font-size: 13px; line-height: 1.3; }
.arch .wire .arrow { font-size: 22px; display: block; }
@media (max-width: 820px) {
  .arch { grid-template-columns: 1fr; }
  .arch .wire .arrow { transform: rotate(90deg); }
}

/* Code, as in the terminal. */
pre.term {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 18px; overflow-x: auto; font-size: 14px; line-height: 1.55; margin: 0;
  scrollbar-color: var(--line) transparent;
}
.term .c { color: var(--dim); }
.term .k { color: var(--sky); }
.term .s { color: var(--mint); }
.term .p { color: var(--amber); user-select: none; }
.stack { display: grid; gap: 18px; margin-top: 22px; }
.stack .label { font: 700 13px var(--mono); color: var(--dim); margin: 0 0 -10px; }

.not { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.not span { font: 14px var(--mono); border: 1px dashed var(--line); border-radius: 999px; padding: 4px 12px; color: var(--dim); }

/* The FAQ: questions that open, the marker turning as the TUI's tree's does. */
.faq { display: grid; gap: 10px; margin-top: 24px; max-width: 880px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.faq details[open] { border-color: var(--sky); }
.faq summary {
  cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 600; color: var(--bright);
  display: flex; gap: 12px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "▸"; font-family: var(--mono); color: var(--amber); transition: transform 0.15s; }
.faq details[open] summary::before { transform: rotate(90deg); }
.faq summary:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 8px; }
.faq details p { margin: 0; padding: 0 18px 16px 42px; font-size: 15.5px; }
@media (prefers-reduced-motion: reduce) { .faq summary::before { transition: none; } }

/* Contributing: numbered steps, like the TUI's tabs. */
.steps { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.steps li { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.steps .n { display: inline-block; font: 700 14px var(--mono); background: var(--yellow); color: var(--ink); border-radius: 4px; padding: 1px 8px; margin-bottom: 10px; }
.steps p { margin: 0; font-size: 15px; }
.note { border-left: 4px solid var(--orange); background: var(--panel); border-radius: 0 8px 8px 0; padding: 18px 20px; margin: 22px 0; }
.note p { margin: 0; font-size: 15.5px; }

footer { border-top: 1px solid var(--line); padding: 36px 0 56px; color: var(--dim); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }