/* Tokens and the borderless rounded+shadow panel treatment are ported from
   glovebox's style.css.  Dropped: its --tire-winter/--tire-summer.  Added:
   --success/--danger, which glovebox hardcodes and Phase 3 needs for
   in-limits / out-of-limits states on the envelope chart. */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

:root {
  color-scheme: light dark;

  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --ink: #161b28;
  --ink-soft: #4b5468;
  --paper: #f5f6fb;
  --surface: #ffffff;
  --line: #d7dbe6;
  --line-soft: #e8eaf1;
  --code-bg: #eef1fa;
  --success: #16a34a;
  --danger: #dc2626;

  --shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.06), 0 1px 3px rgba(20, 24, 40, 0.08);
  --shadow-md: 0 2px 6px rgba(20, 24, 40, 0.08), 0 8px 20px rgba(20, 24, 40, 0.08);

  /* Cards visible at once.  Single source of truth: carousel.js reads this
     back with getComputedStyle, so the media query below is the only place
     the count is set. */
  --per-view: 3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #5b8def;
    --accent-strong: #7ea4f2;
    --ink: #e7e9f4;
    --ink-soft: #9aa1b8;
    --paper: #11141e;
    --surface: #191d2b;
    --line: #2b3145;
    --line-soft: #232838;
    --code-bg: #1f2536;
    --success: #4ade80;
    --danger: #f4767c;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #5b8def;
  --accent-strong: #7ea4f2;
  --ink: #e7e9f4;
  --ink-soft: #9aa1b8;
  --paper: #11141e;
  --surface: #191d2b;
  --line: #2b3145;
  --line-soft: #232838;
  --code-bg: #1f2536;
  --success: #4ade80;
  --danger: #f4767c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.35);
}

body {
  margin: 0 auto;
  max-width: 76rem;
  padding: 1.5rem 1rem 3rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
}

/* --- header ------------------------------------------------------------- */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.brand h1 {
  margin: 0;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
}

.tagline {
  margin: 0.15rem 0 0;
  font-size: 1rem;
  color: var(--ink-soft);
}

.theme-toggle {
  display: flex;
  gap: 0.25rem;
  padding: 0.2rem;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.theme-btn {
  border: none;
  background: none;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.theme-btn.active {
  background: var(--accent);
  color: #fff;
}

/* --- fleet section ------------------------------------------------------ */

.fleet-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.fleet-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.fleet-count {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* --- carousel primitive ------------------------------------------------- */

.carousel {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.carousel-viewport {
  flex: 1;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.25s ease;
}

.carousel-panel {
  flex: 0 0 calc(100% / var(--per-view));
  min-width: 0;
}

.carousel-arrow {
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.6rem;
  color: var(--ink);
  cursor: pointer;
  /* Two quick taps on an arrow are a double-tap-to-zoom gesture otherwise.
     Scoped to the button, so pinch-zoom on the page still works. */
  touch-action: manipulation;
}

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}

.carousel-dot.active { background: var(--accent); }

/* --- aircraft card ----------------------------------------------------- */

.aircraft-card {
  height: 100%;
  margin: 0 0.35rem;
  padding: 1rem;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.carousel-panel:first-child .aircraft-card { margin-left: 0; }
.carousel-panel:last-child .aircraft-card { margin-right: 0; }

.aircraft-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--code-bg);
}

.aircraft-photo-none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.aircraft-info { margin-top: 0.8rem; }

.aircraft-tail {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.aircraft-model {
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 600;
}

/* --- aircraft page ------------------------------------------------------ */

.crumb { margin: 0 0 1rem; font-size: 0.9rem; }

/* Reads as a button rather than a breadcrumb — it is the only way back to the
   fleet, so it earns the same pill treatment as the theme switch. */
.crumb a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.crumb a:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.crumb a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Photo left, info right — glovebox's vehicle-tile arrangement, scaled up. */
.hero {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.hero-photo {
  flex: 0 0 22rem;
  width: 22rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--code-bg);
}

.hero-photo-none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.hero-info { min-width: 0; }

.hero-tail {
  margin: 0;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
}

.hero-model {
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.panel {
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.panel h3 {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
}

.spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1rem;
  margin: 0;
  font-size: 0.95rem;
}

.spec-wide { grid-template-columns: auto 1fr; max-width: 30rem; }
.spec dt { color: var(--ink-soft); }
.spec dd { margin: 0; font-variant-numeric: tabular-nums; }

.pending { color: var(--ink-soft); font-style: italic; }

.source {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* --- loading form ------------------------------------------------------- */

.wb-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
  margin-bottom: 1.25rem;
}

.wb-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.wb-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.wb-input input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.wb-input input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.wb-unit { font-size: 0.85rem; }

.wb-reset {
  justify-self: start;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.wb-out {
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  max-width: 30rem;
}

.wb-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.wb-row strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.wb-row-total {
  border-top: 1px solid var(--line-soft);
  margin-top: 0.3rem;
  padding-top: 0.6rem;
  font-size: 1.05rem;
}

.wb-row .good { color: var(--success); }
.wb-row .bad { color: var(--danger); }

.wb-note {
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.hint { color: var(--ink-soft); font-size: 0.85em; }

/* --- unverified-data warning -------------------------------------------- */

.warn {
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--danger);
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* --- envelope chart ----------------------------------------------------- */

/* Results and chart side by side on wide screens, stacked when narrow. */
.wb-split {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: flex-start;
}

.wb-split .wb-out { flex: 1 1 18rem; }

.envelope {
  flex: 1 1 24rem;
  margin: 0;
  min-width: 0;
}

.envelope-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.envelope figcaption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.env-grid line { stroke: var(--line-soft); stroke-width: 1; }
.env-axis { stroke: var(--line); stroke-width: 1.5; }

.env-region {
  fill: color-mix(in srgb, var(--accent) 16%, transparent);
  stroke: var(--accent);
  stroke-width: 1.5;
}

.env-label {
  fill: var(--ink-soft);
  font-size: 10px;
  font-family: inherit;
}

.env-label-y { text-anchor: end; }
.env-label-x { text-anchor: middle; }

.env-axis-title {
  fill: var(--ink-soft);
  font-size: 10px;
  font-family: inherit;
  text-anchor: middle;
}

/* Max zero fuel weight — dashed, as the cockpit unit draws it. */
.env-mzfw {
  stroke: var(--ink-soft);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
  fill: none;
}

.env-point-ok { fill: var(--success); stroke: var(--success); }
.env-point-bad { fill: var(--danger); stroke: var(--danger); }

/* Crosshair rules read the value off both axes; dashed so they don't compete
   with the envelope outline. */
.env-rule {
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.8;
}

/* --- problem list ------------------------------------------------------- */

.wb-problems {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem 0.7rem 2rem;
  list-style: disc;
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 600;
}

.wb-problems li + li { margin-top: 0.25rem; }

/* --- homepage card link ------------------------------------------------- */

.card-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.card-link:hover .aircraft-card { box-shadow: var(--shadow-md); }

.card-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 14px;
}

/* Mobile proper is Phase 5.  This single breakpoint only keeps the narrow view
   from being outright broken — glovebox shipping one unusable layout is listed
   as a flaw not to inherit. */
@media (max-width: 56rem) {
  :root { --per-view: 2; }
}

@media (max-width: 34rem) {
  :root { --per-view: 1; }
  .page-header { flex-direction: column; }
}

@media (max-width: 48rem) {
  .hero { flex-direction: column; }
  .hero-photo { flex: 0 0 auto; width: 100%; }

  /* Chart above the "Loading" heading.  display:contents dissolves .wb-split's
     box so the chart, the heading and the form become siblings that `order` can
     reach; the wide layout above this breakpoint is untouched.  Both children
     need their flex basis reset - in a column it would set height, not width. */
  .wb-panel { display: flex; flex-direction: column; }
  .wb-split { display: contents; }
  .wb-panel .envelope { order: -1; flex: 0 0 auto; margin-bottom: 1.25rem; }
  .wb-panel .wb-out { flex: 0 0 auto; }
}