/* Design pass, Oct 27: Rubik, MyTravel's blue (Mathew's reference) with orange icons,
   away from CRKC's teal and amber. Every text color passes WCAG AA. */
@font-face {
  font-family: Rubik;
  src: url(/fonts/rubik-latin-wght-5.2.5.woff2) format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --card: #fff;
  --head: #f8fafc;
  --fg: #3b444f;
  --muted: #5f6b75;
  --rule: #e7eaf3;
  --accent: #2672ad;
  --accent-deep: #1f5f91;
  --accent-soft: #eaf2f9;
  --on-accent: #fff;
  --icon: #dd6b10;
  --y: #1f7a4d;
  --y-bg: #e3f4ea;
  --n: #b3363b;
  --n-bg: #fdecec;
  --na: #5f6b75;
  --na-bg: #eef1f5;
  --shadow: 0 10px 40px rgb(59 68 79 / 0.12);
  --shade: rgb(16 30 44 / 0.46);
}
/* Dark: the device's setting, unless the toggle chose otherwise. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #10161d;
    --card: #18212a;
    --head: #141c24;
    --fg: #e6ebf0;
    --muted: #9aa7b4;
    --rule: #2a3540;
    --accent: #6cb0e6;
    --accent-deep: #8cc3ee;
    --accent-soft: #1a2b3a;
    --on-accent: #0b1520;
    --icon: #ff9a4d;
    --y: #7fd3a1;
    --y-bg: #15301f;
    --n: #ff9a9a;
    --n-bg: #3a1c1e;
    --na: #9aa7b4;
    --na-bg: #1f2730;
    --shadow: 0 10px 40px rgb(0 0 0 / 0.45);
    --shade: rgb(6 12 18 / 0.62);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10161d;
  --card: #18212a;
  --head: #141c24;
  --fg: #e6ebf0;
  --muted: #9aa7b4;
  --rule: #2a3540;
  --accent: #6cb0e6;
  --accent-deep: #8cc3ee;
  --accent-soft: #1a2b3a;
  --on-accent: #0b1520;
  --icon: #ff9a4d;
  --y: #7fd3a1;
  --y-bg: #15301f;
  --n: #ff9a9a;
  --n-bg: #3a1c1e;
  --na: #9aa7b4;
  --na-bg: #1f2730;
  --shadow: 0 10px 40px rgb(0 0 0 / 0.45);
  --shade: rgb(6 12 18 / 0.62);
}
/* Moving between the site's pages crossfades instead of flashing, where
   the browser supports it (Chrome, Edge, Safari 18.2 and later). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
* { box-sizing: border-box; }
[hidden] { display: none; }
html { scroll-padding-top: 16px; }
/* The footer sits at the bottom of the window even on a short page. */
body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.6 Rubik, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1232px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
h1, h2, legend { font-weight: 500; }
h2 { font-size: 24px; line-height: 1.25; margin: 0 0 8px; }

/* Top bar: the site's name on frosted glass over the photo (Mathew, Oct 27). */
.bar { position: relative; z-index: 2; background: rgb(255 255 255 / 0.12); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid rgb(255 255 255 / 0.22); }
.bar .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
/* The logo: the badge, then CRYSTAL RIVER in small orange capitals over
   Kayak Rentals (Mathew's pick, option D, Oct 27). The orange is the icon
   orange, lightened so it reads on the photo. */
.brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; text-shadow: 0 1px 8px rgb(0 0 0 / 0.3); }
.brand .mark { flex: none; width: 40px; height: 40px; filter: drop-shadow(0 1px 6px rgb(0 0 0 / 0.3)); }
/* Even space above the capitals and below the baseline (Mathew, Oct 27):
   the extra top padding moves the lettering down 1.5px, to match the badge. */
.brand-name { display: inline-flex; flex-direction: column; line-height: 1.05; padding-top: 3px; }
.brand-top { margin-bottom: 4px; color: #ffb47a; font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.brand-main { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
/* The dark/light switch: sun at left, moon at right, a knob over the one in use. */
.theme-toggle { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: space-between; width: 58px; height: 30px; margin-left: auto; padding: 0 7px; border: 1px solid rgb(255 255 255 / 0.45); border-radius: 999px; background: rgb(255 255 255 / 0.14); color: #fff; cursor: pointer; }
.theme-toggle[hidden] { display: none; }
.theme-toggle .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform .25s ease; }
.theme-toggle[aria-checked="true"] .knob { transform: translateX(28px); }
.theme-toggle .sun, .theme-toggle .moon { position: relative; z-index: 1; display: flex; transition: color .25s ease; }
.theme-toggle .icon { width: 14px; height: 14px; }
.theme-toggle[aria-checked="false"] .sun, .theme-toggle[aria-checked="true"] .moon { color: #2b3540; }
@media (hover: hover) { .theme-toggle:hover { background: rgb(255 255 255 / 0.24); } }
@media (prefers-reduced-motion: reduce) { .theme-toggle .knob, .theme-toggle .sun, .theme-toggle .moon { transition: none; } }

/* The springs photo behind the headline, shaded so white text reads on it. */
.hero { position: relative; overflow: hidden; color: #fff; background: #1d3b52; text-align: center; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--shade), rgb(16 30 44 / 0.22) 75%, rgb(16 30 44 / 0.3)); }
.hero-text { position: relative; z-index: 1; padding-top: clamp(40px, 8vw, 84px); padding-bottom: clamp(104px, 13vw, 150px); }
.hero h1 { font-size: clamp(30px, 5.2vw, 52px); line-height: 1.12; margin: 0 auto 14px; max-width: 18em; text-wrap: balance; text-shadow: 0 2px 18px rgb(0 0 0 / 0.35); letter-spacing: -0.015em; }
.sub { margin: 0 auto; max-width: 40em; font-size: clamp(16px, 2vw, 18px); color: rgb(255 255 255 / 0.92); text-shadow: 0 1px 10px rgb(0 0 0 / 0.4); text-wrap: pretty; }
/* Footnote numbers in the lead: small, and they don't push the lines apart. */
.sub sup { font-size: .62em; line-height: 0; vertical-align: .7em; }
.sub sup a { color: #fff; text-decoration: none; font-weight: 600; padding: 0 2px; }
.hero :focus-visible { outline-color: #fff; }

/* The card that holds the questions or the results, lifted over the photo
   like MyTravel's search box. */
.stage { position: relative; z-index: 2; max-width: 680px; margin: clamp(-120px, -10vw, -76px) auto 40px; background: var(--card); border-radius: 10px; box-shadow: var(--shadow); padding: 26px 28px 24px; }

/* The questions, one at a time (Mathew, Oct 27). */
.wizard { margin: 0; }
.progress { height: 4px; background: var(--rule); border-radius: 999px; overflow: hidden; margin: 0 0 18px; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .4s ease; }
.step-count { color: var(--muted); font-size: 14px; margin: 0 0 4px; }
.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step legend { font-size: clamp(24px, 4.6vw, 30px); line-height: 1.2; padding: 0; margin: 0 0 6px; letter-spacing: -0.01em; }
.hint { color: var(--muted); margin: 0 0 18px; }
.choices { display: grid; gap: 10px; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.choice-body { display: grid; grid-template-columns: auto 1fr; align-items: center; min-height: 60px; padding: 13px 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.choice-body .icon { grid-row: span 2; width: 32px; height: 32px; margin-right: 16px; color: var(--icon); }
.choice-title { grid-column: 2; font-weight: 500; }
.choice-line { grid-column: 2; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.choice:hover .choice-body { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.choice input:checked + .choice-body { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.choice input:focus-visible + .choice-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.wizard-nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; min-height: 48px; }
.back-btn { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 500; cursor: pointer; padding: 10px 4px; }
.next-btn { margin-left: auto; min-height: 48px; padding: 0 30px; border-radius: 6px; border: 0; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 500; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease, background-color .25s ease; }
.next-btn.ready { opacity: 1; transform: none; }
.next-btn:disabled { cursor: default; }
@media (hover: hover) { .next-btn.ready:hover { background: var(--accent-deep); } }
.skip-list { text-align: center; margin: 16px 0 0; font-size: 14.5px; }
.step.enter { animation: step-in .38s ease both; }
@keyframes step-in { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .step.enter { animation: none; }
  .next-btn, .progress span, .choice-body { transition: none; }
}

/* Results: the businesses that fit, as cards. */
.found { margin: 0; }
.fit { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: 0 0 14px; }
.fit #fit { font-size: 24px; font-weight: 500; line-height: 1.25; outline: none; }
.sorted { color: var(--muted); font-size: 14px; }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.card { border: 1px solid var(--rule); border-radius: 8px; background: var(--card); padding: 15px 18px; }
.card-name { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.3; }
/* A small map pin, drawn in CSS, before the launch. */
.card-launch { display: flex; align-items: center; gap: 8px; margin: 5px 0 0; color: var(--muted); font-size: 14.5px; }
.card-launch::before { content: ""; flex: none; width: 9px; height: 9px; margin: 0 1px 2px 2px; border: 2px solid var(--icon); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.card-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 0; padding: 0; }
.card-tags li { font-size: 13px; padding: 2px 11px; border-radius: 999px; color: var(--y); background: var(--y-bg); }
.card-tags li.mode { color: var(--accent); background: var(--accent-soft); }
.found-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* Outline at rest; filled on hover and while pressed (Mathew, Oct 27). */
.change-btn, .compare-btn { flex: 1 1 160px; min-height: 46px; border-radius: 6px; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: inherit; font-weight: 500; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.change-btn:active, .compare-btn:active, .change-btn:focus-visible, .compare-btn:focus-visible { background: var(--accent); color: var(--on-accent); }
a.change-btn, a.compare-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* Hover only where there's a mouse, so a tap doesn't leave a button stuck filled. */
@media (hover: hover) {
  .change-btn:hover, .compare-btn:hover { background: var(--accent); color: var(--on-accent); }
}

/* Section headings: centered, with a short blue rule under them. */
.panel > h2, .browse > h2 { text-align: center; }
.panel > h2::after, .browse > h2::after { content: ""; display: block; width: 40px; height: 2px; margin: 12px auto 0; background: var(--accent); border-radius: 2px; }
.count { display: inline-block; margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--muted); }

/* The full tables, well below the questions card (Mathew, Oct 27). */
#compare { margin-top: clamp(72px, 10vw, 120px); }
.panel { margin: 8px 0 48px; min-width: 0; }
.legend { text-align: center; margin: 16px 0 6px; color: var(--muted); font-size: 14px; line-height: 2; }
.scroll-hint { text-align: center; color: var(--muted); font-size: 13.5px; margin: 0 0 14px; }
/* The table scrolls sideways with a swipe, a trackpad or the keyboard.
   A sideways swipe stays in the table instead of paging the browser back,
   and a soft shadow at the right edge shows there's more to see. */
.scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; border: 1px solid var(--rule); border-radius: 10px; max-width: 100%; box-shadow: 0 4px 24px rgb(59 68 79 / 0.06);
  background:
    linear-gradient(to left, var(--card) 40%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--fg) 22%, transparent), transparent) right center / 14px 100% no-repeat scroll,
    var(--card); }
table { border-collapse: collapse; font-size: 14px; min-width: 900px; }
th, td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
thead th { background: var(--head); font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--muted); min-width: 96px; }
th.op { position: sticky; left: 0; background: var(--card); min-width: 200px; max-width: 230px; z-index: 1; font-weight: 400; box-shadow: inset -1px 0 0 var(--rule), 6px 0 10px -8px rgb(0 0 0 / 0.25); }
thead th.op { z-index: 2; background: var(--head); }
thead .sort { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
thead .sort::after { content: " \2195\FE0E"; opacity: 0.45; }
thead .sort:hover { color: var(--fg); }
thead th[aria-sort] .sort { color: var(--fg); }
thead th[aria-sort] .sort::after { content: " \25BE"; opacity: 1; }
@media (hover: hover) { tbody tr:hover > * { background: var(--head); } }
.op .name { margin: 0; font-weight: 500; line-height: 1.35; }
.names-tag { display: inline-block; margin: 6px 0 0; padding: 0 9px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12px; font-weight: 500; line-height: 22px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; cursor: pointer; }
.names-tag::after { content: " \25BE"; }
.names-tag[aria-expanded="true"]::after { content: " \25B4"; }
.names-tag:hover, .names-tag:focus-visible { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.names-tag[hidden] { display: none; }
/* Every operator cell is the same height, other names or not (Mathew, Oct 26). */
tbody th.op { height: 88px; }
.aka { position: fixed; inset: auto; margin: 0; padding: 10px 14px 10px 30px; max-width: min(280px, calc(100vw - 16px)); border: 1px solid var(--rule); border-radius: 8px; background: var(--card); color: var(--fg); font-size: 14px; line-height: 1.6; list-style: disc; box-shadow: var(--shadow); }
.chip { display: inline-block; min-width: 30px; text-align: center; font-size: 13px; font-weight: 500; border-radius: 4px; padding: 1px 6px; }
.Y { color: var(--y); background: var(--y-bg); }
.N { color: var(--n); background: var(--n-bg); }
.NA { color: var(--na); background: var(--na-bg); }
.U { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
td.txt { min-width: 150px; max-width: 260px; }
td small { display: block; font-size: 12px; }
tbody tr:last-child > * { border-bottom: 0; }

/* Links to the other answer pages, as pills. */
.browse { margin: 8px 0 56px; }
.browse ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 880px; margin: 22px auto 0; padding: 0; }
.browse a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--fg); font-size: 15px; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.browse a[aria-current="page"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
@media (hover: hover) { .browse a:not([aria-current]):hover { border-color: var(--accent); color: var(--accent); } }

/* Footer band: the notes. */
.foot { margin-top: auto; background: var(--card); border-top: 1px solid var(--rule); padding: 36px 0 48px; }
#notes { max-width: 82ch; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
#notes h2 { font-size: 16px; color: var(--fg); }
#notes ol { margin: 14px 0 0; padding-left: 1.4em; }
#notes li { margin: 0 0 10px; }
#notes li:target { background: var(--accent-soft); }
.rights { margin: 18px 0 0; font-size: 12.5px; }
/* The page in other languages, at the foot of the page. */
.langs { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.langs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; font-size: 14px; }
.langs a { color: var(--muted); text-decoration: none; }
.langs a[aria-current="page"] { color: var(--fg); font-weight: 500; }
@media (hover: hover) { .langs a:not([aria-current]):hover { color: var(--accent); text-decoration: underline; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; top: -80px; left: 16px; padding: 10px; background: var(--card); z-index: 3; }
.skip:focus { top: 8px; }

/* Phones: a narrower operator column, so more of the table shows beside it. */
@media (max-width: 600px) {
  .bar .wrap { min-height: 56px; }
  .brand { gap: 10px; }
  .brand .mark { width: 34px; height: 34px; }
  .brand-top { font-size: 10px; }
  .brand-main { font-size: 21px; }
  .brand-name { padding-top: 2.4px; }
  .stage { padding: 20px 16px 18px; border-radius: 8px; }
  .choice-body { padding: 12px 14px; }
  .choice-body .icon { width: 28px; height: 28px; margin-right: 12px; }
  table { font-size: 13px; }
  th, td { padding: 10px 8px; }
  thead th { min-width: 78px; font-size: 12px; }
  th.op { min-width: 124px; max-width: 124px; }
  tbody th.op { height: 80px; }
  .op .name { font-size: 13px; line-height: 1.3; }
  .names-tag { font-size: 11px; padding: 0 7px; line-height: 20px; }
  td.txt { min-width: 112px; }
}