/* The /tools pages: the tools index and the flight school finder.

   Everything here is built from the tokens in tokens.css and the primitives in
   base.css and components.css. The finder is the one place on this site that
   is an application rather than a document, so it earns a three-column shell
   and a sticky rail — but the type, the hairlines, the radii and the ink ramp
   are the landing page's, unchanged. */

/* -------------------------------------------------------------- tool index -- */

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  margin-top: 36px;
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface-2);
  transition:
    border-color var(--t-hover) var(--ease-out),
    transform var(--t-hover) var(--ease-out),
    box-shadow var(--t-hover) var(--ease-out);
}

a.tool-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-float);
}

.tool-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tool-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.tool-card__body {
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.tool-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.tool-card--soon {
  background: var(--surface);
  border-style: dashed;
}

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

.fs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin-top: 34px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.fs-stat {
  background: var(--surface);
  padding: 18px 20px;
}

.fs-stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.fs-stat__label {
  margin-top: 8px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ------------------------------------------------------------------ shell -- */

/* The finder is wider than the editorial measure — 1200px of text is right,
   1200px of a three-pane tool is not. */
.fs-band {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.fs-shell {
  width: 100%;
  max-width: 1520px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.fs {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

@media (min-width: 1180px) {
  .fs {
    grid-template-columns: 250px minmax(340px, 1fr) minmax(400px, 1.05fr);
  }
}

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

.fs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
}

.fs-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}

.fs-search svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-3);
  pointer-events: none;
}

.fs-input,
.fs-select {
  height: 44px;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface-2);
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
  padding-inline: 14px;
  transition: border-color var(--t-hover) var(--ease-out);
}

.fs-input {
  padding-left: 38px;
}

.fs-input::placeholder {
  color: var(--fg-3);
}

.fs-input:hover,
.fs-select:hover {
  border-color: var(--fg-3);
}

.fs-select {
  width: auto;
  min-width: 132px;
  padding-right: 34px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5' stroke='%230e161d' stroke-opacity='.63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.fs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding-inline: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface-2);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color var(--t-hover) var(--ease-out),
    border-color var(--t-hover) var(--ease-out),
    color var(--t-hover) var(--ease-out);
}

.fs-toggle:hover {
  border-color: var(--fg-3);
}

.fs-toggle.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.fs-toggle.is-busy {
  color: var(--fg-3);
}

.fs-toggle.is-busy .fs-toggle__dot {
  animation: fs-blink 1s var(--ease-io) infinite;
}

.fs-toggle__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

@keyframes fs-blink {
  50% { opacity: 0.2; }
}

/* ------------------------------------------------------------------ rail --- */

.fs-rail {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  max-height: calc(100vh - var(--nav-h) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

.fs-rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.fs-rail__title {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.fs-reset {
  font-size: 0.8125rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(53, 105, 111, 0.35);
}

.fs-reset:hover {
  text-decoration-color: currentColor;
}

.fs-group {
  border-bottom: 1px solid var(--line);
}

.fs-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0;
  cursor: pointer;
  list-style: none;
}

.fs-group__head::-webkit-details-marker {
  display: none;
}

.fs-group__title {
  font-size: 0.875rem;
  font-weight: 500;
}

.fs-group__mark {
  position: relative;
  width: 11px;
  height: 11px;
  flex: none;
  color: var(--fg-3);
}

.fs-group__mark::before,
.fs-group__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
}

.fs-group__mark::after {
  transform: rotate(90deg);
  transition: transform var(--t-hover) var(--ease-out);
}

.fs-group[open] .fs-group__mark::after {
  transform: rotate(0deg);
}

.fs-group__hint {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--fg-3);
  margin-bottom: 8px;
}

.fs-group__body {
  padding-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fs-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 5px 6px 5px 2px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--fg-2);
  transition: background-color var(--t-hover) var(--ease-out);
}

.fs-check:hover {
  background: rgba(14, 22, 29, 0.04);
}

.fs-check input {
  appearance: none;
  width: 15px;
  height: 15px;
  flex: none;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface-2);
  cursor: pointer;
  transition:
    background-color var(--t-press) var(--ease-out),
    border-color var(--t-press) var(--ease-out);
}

.fs-check input:checked {
  background: var(--ink);
  border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8' stroke='%23f7f8f9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.fs-check input:checked + .fs-check__label {
  color: var(--fg);
  font-weight: 500;
}

.fs-check__count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}

.fs-check.is-empty {
  opacity: 0.45;
}

/* --------------------------------------------------------------- results --- */

.fs-results {
  min-width: 0;
}

.fs-results__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.fs-summary {
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.fs-status {
  margin: 20px 0;
  font-size: 0.9375rem;
  color: var(--fg-2);
}

.fs-list {
  margin: 0;
}

.fs-row {
  border-bottom: 1px solid var(--line);
}

.fs-row__trigger {
  display: grid;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 15px 4px;
  transition: background-color var(--t-hover) var(--ease-out);
}

.fs-row__trigger:hover {
  background: rgba(14, 22, 29, 0.03);
}

.fs-row.is-open .fs-row__trigger {
  background: var(--surface-3);
}

.fs-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.fs-row__name {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.fs-row__where {
  font-size: 0.8125rem;
  color: var(--fg-3);
}

.fs-row__miles {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

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

.fs-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg-3);
  white-space: nowrap;
}

.fs-tag--key {
  border-color: rgba(53, 105, 111, 0.32);
  background: var(--horizon-wash);
  color: var(--accent-deep);
}

.fs-tag--mono {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* The disclosure trick from LANDING-DESIGN-LANGUAGE §7.7: visibility, not
   display, so the panel animates and is still absent from the a11y tree when
   closed. */
.fs-row__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--t-panel) var(--ease-io),
    opacity var(--t-panel) var(--ease-io),
    visibility 0s linear var(--t-panel);
}

.fs-row.is-open .fs-row__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows var(--t-panel) var(--ease-io),
    opacity var(--t-panel) var(--ease-io),
    visibility 0s linear 0s;
}

.fs-row__panel > div {
  overflow: hidden;
}

.fs-detail {
  padding: 4px 4px 22px;
}

.fs-detail__blurb {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 62ch;
  margin-bottom: 16px;
}

.fs-facts {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 7px 18px;
  font-size: 0.875rem;
}

.fs-facts dt {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 3px;
}

.fs-facts dd {
  margin: 0;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

.fs-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(53, 105, 111, 0.35);
}

.fs-link:hover {
  text-decoration-color: currentColor;
}

.fs-detail__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}

.fs-detail__label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.fs-more {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-2);
  transition:
    background-color var(--t-hover) var(--ease-out),
    border-color var(--t-hover) var(--ease-out);
}

.fs-more:hover {
  background: rgba(14, 22, 29, 0.04);
  border-color: var(--fg-3);
}

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

.fs-mapcol {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The map's own four colours. Sea and land are the page's paper tiers — sea
   tracks --paper-3 so it follows the ground on any palette shift, land is the
   white tier; the two line weights are heavier than the page's hairlines
   because a coastline at 0.10 alpha on a tinted fill is not a coastline. */
.fs-map {
  --map-sea: var(--paper-3);
  --map-land: var(--paper-2);
  --map-border: rgba(14, 22, 29, 0.19);
  --map-coast: rgba(14, 22, 29, 0.34);
  /* Translucent, so a cluster does not hide the state it sits on. */
  --map-bubble: rgba(255, 255, 255, 0.92);

  position: relative;
  /* Framed to the shape of the lower 48 (about 1.5:1 in Mercator) so the
     default view is the country rather than the country plus two neighbours. */
  aspect-ratio: 1.46;
  max-height: 640px;
  min-height: 300px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--map-sea);
}

.fs-map canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.fs-map canvas:active {
  cursor: grabbing;
}

.fs-map__controls {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fs-mapbtn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: 0.9375rem;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(14, 22, 29, 0.06);
  transition:
    background-color var(--t-hover) var(--ease-out),
    color var(--t-hover) var(--ease-out);
}

.fs-mapbtn:hover {
  background: var(--surface-3);
  color: var(--fg);
}

.fs-mapbtn--wide {
  width: auto;
  padding-inline: 9px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Top-left: the scale bar owns the bottom-right corner, and on a 350px-wide
   map the two collided there. */
.fs-map__legend {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
  backdrop-filter: blur(6px);
  font-size: 0.6875rem;
  color: var(--fg-2);
}

.fs-map__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fs-key {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.fs-key--141 {
  box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 3.2px var(--accent-deep);
}

.fs-key--cluster {
  width: 13px;
  height: 13px;
  background: var(--surface-2);
  border: 1.5px solid var(--accent);
}

.fs-map__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--fg-3);
}

.fs-map__foot .mono {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ provenance --- */

.fs-sources {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-top: 26px;
}

.fs-sources th,
.fs-sources td {
  text-align: left;
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.fs-sources thead th {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 0;
  border-bottom-color: var(--line-strong);
}

.fs-sources tbody th {
  font-weight: 500;
  padding-right: 24px;
}

.fs-sources td {
  color: var(--fg-2);
}

.fs-sources .mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

.fs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fs-scroll table {
  min-width: 660px;
}

.fs-caveats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px 32px;
  margin-top: 34px;
}

.fs-caveat h3 {
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 7px;
}

.fs-caveat p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg-2);
}

/* ---------------------------------------------------------------- mobile --- */

.fs-tabs {
  display: none;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface-3);
}

.fs-tab {
  flex: 1;
  height: 34px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-3);
  transition:
    background-color var(--t-hover) var(--ease-out),
    color var(--t-hover) var(--ease-out);
}

.fs-tab[aria-selected="true"] {
  background: var(--surface-2);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(14, 22, 29, 0.06);
}

@media (max-width: 1179px) {
  .fs-mapcol {
    position: static;
    grid-column: 1 / -1;
    order: -1;
  }
  .fs-map {
    aspect-ratio: 2.1;
    max-height: 420px;
  }
}

@media (max-width: 599px) {
  .fs-map {
    aspect-ratio: 1.25;
  }
}

@media (max-width: 899px) {
  .fs {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .fs-tabs {
    display: flex;
  }

  .fs-rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .fs-mapcol {
    order: 0;
  }

  /* One pane at a time under a thumb — the tabs are the only way between
     them, so each view shows exactly its own pane. */
  .fs[data-mobile-view="list"] .fs-mapcol,
  .fs[data-mobile-view="list"] .fs-rail,
  .fs[data-mobile-view="map"] .fs-results,
  .fs[data-mobile-view="map"] .fs-rail,
  .fs[data-mobile-view="filters"] .fs-results,
  .fs[data-mobile-view="filters"] .fs-mapcol {
    display: none;
  }
}

/* Above the tab breakpoint the pane-hiding rules above do not apply at all,
   so data-mobile-view is inert and every pane is visible. Nothing to undo. */