/* Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. */
/* SPDX-License-Identifier: MIT-0 */

/* Dependency-free. No web fonts, no CDN, no framework: the site is served
   from one t3.small behind CloudFront, every byte here ships inside the
   deploy asset, and the site must never call a third party. Status is never
   signalled by colour alone: every badge, outcome and banner carries text. */

:root {
  --ink: #17202e;
  --ink-soft: #3c4a5c;
  --muted: #586678;
  --rule: #e2e8f0;
  --paper: #ffffff;
  --sand: #fff8f1;
  --mist: #f3f6fb;
  --coral: #e8462a;
  --coral-strong: #c7361d;
  --coral-soft: #ffe5dc;
  --navy: #14213d;
  --teal: #0b7f8a;
  --teal-soft: #d8f3f2;
  --sun: #ffb703;
  --plum: #6d3fa6;
  --plum-soft: #efe6fb;
  --star: #f59e0b;
  --star-off: #cfd7e3;
  --warn-bg: #fff4d6;
  --warn-ink: #6a4b00;
  --focus: #2563eb;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 33, 61, .06), 0 8px 24px rgba(20, 33, 61, .08);
  --shadow-lift: 0 2px 4px rgba(20, 33, 61, .08), 0 18px 40px rgba(20, 33, 61, .14);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 16px/1.55 var(--sans);
  color: var(--ink);
  background: var(--paper);
}

img, svg { max-width: 100%; }

a { color: var(--teal); text-underline-offset: 2px; }
a:hover { color: var(--coral-strong); }

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

h1, h2, h3 { line-height: 1.2; color: var(--navy); }
h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-size: 1.35rem; margin: 0 0 .5rem; }
h3 { font-size: 1.05rem; margin: 0 0 .35rem; }

code { font-family: var(--mono); font-size: .88em; word-break: break-all; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute; left: 1rem; top: -3rem; z-index: 50;
  padding: .5rem .9rem; background: var(--navy); color: #fff; border-radius: 8px;
}
.skip:focus { top: .75rem; color: #fff; }

.wrap { max-width: 76rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.page { padding-top: 2rem; padding-bottom: 3.5rem; }
.page--narrow { max-width: 34rem; }

.icon { flex: none; vertical-align: -3px; }

.meta { color: var(--muted); font-size: .9rem; }
.withheld { color: var(--warn-ink); background: var(--warn-bg); padding: .6rem .75rem; border-radius: 8px; }

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

header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(1.4) blur(8px);
}
.site-inner {
  max-width: 76rem; margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em;
  color: var(--navy); text-decoration: none;
}
.brand:hover { color: var(--navy); }
.brand-accent { color: var(--coral); }
header.site nav { display: flex; flex-wrap: wrap; gap: .35rem; }
header.site nav a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: 999px;
  color: var(--ink-soft); font-weight: 600; text-decoration: none;
}
header.site nav a:hover { background: var(--mist); color: var(--navy); }
header.site nav a.nav-signals { background: var(--navy); color: #fff; }
header.site nav a.nav-signals:hover { background: #22345e; color: #fff; }

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-weight: 700;
  padding: .7rem 1.2rem; border: 2px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: var(--coral-strong); color: #fff; }
.btn-primary:disabled { background: #b8c0cc; cursor: not-allowed; }
.btn-ghost { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-block { width: 100%; }

input, button { font: inherit; }
input {
  padding: .6rem .8rem; border: 1.5px solid #c3ccd9; border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
}
input:disabled { background: var(--mist); }

/* ------------------------------------------------------------- art */

.art { position: relative; overflow: hidden; background: linear-gradient(135deg, #ffd6c2, #c9e7f2); }
.art > svg, .art > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- ratings */

.rating { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.stars {
  --pct: calc(var(--r, 0) * 20%);
  display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 1px;
  background: linear-gradient(90deg, var(--star) var(--pct), var(--star-off) var(--pct));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stars::before { content: "\2605\2605\2605\2605\2605"; }
.rating-num { font-weight: 700; color: var(--ink); font-size: .92rem; }

.price { font-weight: 700; color: var(--teal); letter-spacing: 1px; }
.price-rest { color: #b4bfcc; }

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em;
}
.badge .icon { width: 14px; height: 14px; }
.badge--choice { background: #fff1c2; color: #6b4a00; }
.badge--top { background: var(--coral-soft); color: #8a2410; }
.badge--value { background: var(--teal-soft); color: #075c63; }

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  font-size: .8rem; font-weight: 700; text-transform: capitalize;
}
.chip .icon { width: 15px; height: 15px; }

/* ------------------------------------------------------------- cards */

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1.25rem; }
.card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid #edf1f6;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover, .card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card-media { position: relative; aspect-ratio: 16 / 10; }
.card-media .art { position: absolute; inset: 0; }
.card-kind {
  position: absolute; left: .7rem; top: .7rem;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 999px;
  background: rgba(20, 33, 61, .82); color: #fff; font-size: .75rem; font-weight: 700;
}
.card-kind .icon { width: 14px; height: 14px; }
.card-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.card-badges { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1.5rem; }
.card-title { font-size: 1.08rem; margin: 0; text-transform: capitalize; }
.card-title a { color: var(--navy); text-decoration: none; }
.card-title a:hover { color: var(--coral-strong); text-decoration: underline; }
/* The whole card is the link's hit area; the title stays the accessible name. */
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card-place { display: flex; align-items: center; gap: .3rem; margin: 0; color: var(--muted); font-size: .88rem; }
.card-meta { display: flex; justify-content: space-between; align-items: center; }
.card-summary { margin: .2rem 0 0; color: var(--ink-soft); font-size: .9rem; }

/* ------------------------------------------------------------- home */

.hero { position: relative; min-height: 31rem; display: flex; align-items: center; color: #fff; }
.hero > .art { position: absolute; inset: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 18, 54, .78) 0%, rgba(14, 18, 54, .45) 55%, rgba(14, 18, 54, .05) 100%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: .4rem; }
.hero-kicker {
  display: inline-block; margin: 0 0 .9rem; padding: .3rem .8rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
}
.hero-lede { max-width: 34rem; font-size: 1.15rem; margin: 0 0 1.5rem; color: #f3f1ff; }
.hero-search {
  position: relative; display: flex; gap: .5rem; align-items: center;
  max-width: 40rem; padding: .45rem; background: #fff; border-radius: 999px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}
.hero-search-icon { display: inline-flex; padding-left: .8rem; color: var(--muted); }
.hero-search input { flex: 1; min-width: 0; border: 0; padding: .65rem .35rem; font-size: 1.05rem; background: transparent; }
.hero-search input:focus-visible { outline: none; }
.hero-search:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.1rem 0 0; }
.hero-chips a {
  display: inline-block; padding: .35rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .4);
  color: #fff; font-weight: 600; text-decoration: none; font-size: .9rem;
}
.hero-chips a:hover { background: #fff; color: var(--navy); }

.section { padding-top: 3rem; padding-bottom: 1rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: 1.25rem; }
.section-head h2 { font-size: 1.6rem; margin: 0; }
.section-sub { margin: 0; color: var(--muted); }

.dest-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 11rem; gap: 1rem;
}
.dest-card--wide { grid-column: span 2; grid-row: span 2; }
.dest-card a {
  position: relative; display: block; height: 100%;
  border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none;
  box-shadow: var(--shadow);
}
.dest-card .art { position: absolute; inset: 0; transition: transform .35s ease; }
.dest-card a:hover .art, .dest-card a:focus-visible .art { transform: scale(1.05); }
.dest-card a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(10, 14, 30, .78) 100%);
}
.dest-label { position: absolute; left: 1rem; right: 1rem; bottom: .85rem; z-index: 1; display: flex; flex-direction: column; }
.dest-name { font-size: 1.25rem; font-weight: 800; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.dest-card--wide .dest-name { font-size: 1.9rem; }
.dest-country { font-size: .85rem; opacity: .95; }

.recs-band {
  margin-top: 2.5rem; padding-bottom: 2rem;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 183, 3, .18), transparent 40%),
    radial-gradient(circle at 90% 100%, rgba(11, 127, 138, .16), transparent 45%),
    var(--sand);
}
.recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.rec { background: #fff; border-radius: var(--radius); padding: 1.1rem 1.1rem .6rem; box-shadow: var(--shadow); border-top: 5px solid var(--coral); }
.rec--trending { border-top-color: var(--plum); }
.rec--choice { border-top-color: var(--teal); }
.rec-title { display: flex; align-items: center; gap: .45rem; font-size: 1.1rem; margin-bottom: .6rem; }
.rec--picks .rec-title .icon { color: var(--coral); }
.rec--trending .rec-title .icon { color: var(--plum); }
.rec--choice .rec-title .icon { color: var(--teal); }
.rec-list { list-style: none; padding: 0; margin: 0; counter-reset: rec; }
.rec-list li { display: flex; gap: .8rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--rule); }
.rec-list li:first-child { border-top: 0; }
.rec-thumb {
  flex: none; width: 3.2rem; height: 3.2rem; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #ff8a5c, #ffc46b);
}
.rec-thumb .icon { width: 22px; height: 22px; }
.rec-thumb--lisbon { background: linear-gradient(135deg, #e86a3a, #ffb36b); }
.rec-thumb--kyoto { background: linear-gradient(135deg, #b8467a, #f49ab8); }
.rec-thumb--reykjavik { background: linear-gradient(135deg, #0f2a55, #2bb59a); }
.rec-thumb--valparaiso { background: linear-gradient(135deg, #118ab2, #ef476f); }
.rec-thumb--hoi-an { background: linear-gradient(135deg, #c4472b, #f6c453); }
.rec-thumb--tbilisi { background: linear-gradient(135deg, #5c4b7d, #c39bd3); }
.rec-thumb--queretaro { background: linear-gradient(135deg, #a8482a, #f2b05e); }
.rec-thumb--ljubljana { background: linear-gradient(135deg, #2f8f7d, #8ccfa8); }
.rec-thumb--hobart { background: linear-gradient(135deg, #275d8c, #8bb6e0); }
.rec-thumb--salvador { background: linear-gradient(135deg, #0096c7, #f4a261); }
.rec-text { display: flex; flex-direction: column; min-width: 0; }
.rec-text a { font-weight: 700; color: var(--navy); text-decoration: none; text-transform: capitalize; }
.rec-text a:hover { color: var(--coral-strong); text-decoration: underline; }
.rec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; color: var(--muted); font-size: .84rem; }
.rec-meta .stars { font-size: .85rem; }

.cat-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cat-tile {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  text-decoration: none; box-shadow: var(--shadow);
}
.cat-tile .art { position: absolute; inset: 0; transition: transform .35s ease; }
.cat-tile:hover .art, .cat-tile:focus-visible .art { transform: scale(1.06); }
.cat-label {
  position: absolute; left: .7rem; bottom: .7rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: 999px;
  background: #fff; color: var(--navy); font-weight: 700; font-size: .9rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.home .section:last-child { padding-bottom: 4rem; }

/* ------------------------------------------------------------- listing */

.listing-hero { position: relative; min-height: 18rem; display: flex; align-items: flex-end; color: #fff; }
.listing-hero > .art { position: absolute; inset: 0; display: flex; align-items: center; }
/* A wide banner crops a 16:10 illustration hard; centre the scene vertically instead of showing only its sky. */
.listing-hero > .art > svg { height: auto; min-height: 100%; flex: none; }
.listing-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 30, .1) 0%, rgba(10, 14, 30, .78) 100%);
}
.listing-hero-inner { position: relative; z-index: 1; width: 100%; padding-top: 3rem; padding-bottom: 1.6rem; }
.listing-hero h1 { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.place-name { text-transform: capitalize; }
.crumbs { margin: 0 0 .7rem; font-size: .88rem; }
.crumbs a { color: #fff; }
.crumbs a:hover { color: #ffe1d6; }
.listing-hero-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.listing-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; font-weight: 600; }
.listing-hero-meta .rating-num { color: #fff; }
.listing-hero-meta .price { color: #a7f3ef; }
.listing-hero-meta .price-rest { color: rgba(255, 255, 255, .45); }
.listing-hero-meta .stars { --star-off: rgba(255, 255, 255, .45); }
.dot { opacity: .7; }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--rule); margin-top: .25rem; overflow-x: auto; }
.tabs a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .9rem 1rem .8rem; border-bottom: 3px solid transparent;
  color: var(--ink-soft); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.tabs a:hover { color: var(--navy); border-bottom-color: #c3ccd9; }
.tabs a[aria-current="page"] { color: var(--coral-strong); border-bottom-color: var(--coral); }

.listing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2rem; padding-top: 1.75rem; padding-bottom: 3.5rem; }
.listing-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.panel { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.lede { font-size: 1.1rem; color: var(--ink-soft); margin-top: 0; }
.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.facts li { display: flex; gap: .6rem; align-items: center; padding: .65rem .8rem; background: var(--mist); border-radius: var(--radius-sm); }
.facts .icon { color: var(--coral); }
.link-more { font-weight: 700; color: var(--teal); }
.peek { display: grid; grid-template-columns: 2fr 1fr; gap: .6rem; margin-top: .6rem; border-radius: var(--radius-sm); overflow: hidden; }
.peek .art { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); }
.peek .art:last-child { aspect-ratio: auto; }

.listing-aside { position: relative; }
.glance {
  position: sticky; top: 5rem;
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.4rem; border-radius: var(--radius);
  background: linear-gradient(160deg, #fff 0%, var(--sand) 100%);
  border: 1px solid #f1e3d6; box-shadow: var(--shadow);
}
.glance-score { margin: 0; font-size: 2.8rem; font-weight: 800; color: var(--navy); line-height: 1; }
.glance-score span { font-size: 1.1rem; color: var(--muted); font-weight: 600; }
.glance .stars { font-size: 1.4rem; }
.glance-price { margin: 0; color: var(--ink-soft); }

/* ------------------------------------------------------------- reviews */

ol.reviews { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.review { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: 0 1px 2px rgba(20, 33, 61, .04); }
.review-head { display: flex; gap: .8rem; align-items: center; margin-bottom: .55rem; }
.review-head p { margin: 0; }
.review-author { font-weight: 700; color: var(--navy); }
.review-body { margin: .55rem 0 0; font-size: 1.02rem; }
.avatar {
  flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; letter-spacing: .02em;
}
.avatar--0 { background: #c7361d; }
.avatar--1 { background: #0b7f8a; }
.avatar--2 { background: #6d3fa6; }
.avatar--3 { background: #1d4e89; }
.avatar--4 { background: #9a5b00; }
.avatar--5 { background: #2f7a3e; }

.dist { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; gap: .35rem; font-size: .88rem; }
.dist li { display: grid; grid-template-columns: 3.4rem 1fr 1.2rem; align-items: center; gap: .5rem; }
.dist-bar { height: .55rem; background: #e7ecf3; border-radius: 999px; overflow: hidden; }
.dist-bar span { display: block; height: 100%; background: var(--star); border-radius: 999px; }
.dist-n { text-align: right; color: var(--muted); }

/* ------------------------------------------------------------- photos */

.gallery-count { display: inline-flex; align-items: center; gap: .4rem; margin: 1.5rem 0 1rem; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 13rem; gap: .8rem; margin-bottom: 1.5rem; }
.gallery-item { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gallery-item--1 { grid-column: span 2; grid-row: span 2; }
.gallery-item .art { position: absolute; inset: 0; }
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: .5rem;
  padding: 1.6rem .9rem .7rem; color: #fff; font-weight: 700;
  background: linear-gradient(180deg, transparent, rgba(10, 14, 30, .78));
}
.gallery-item figcaption span { font-weight: 500; font-size: .85rem; opacity: .9; }

/* ------------------------------------------------------------- search */

.search-hero {
  padding: 2.2rem 0 2.4rem;
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 183, 3, .35), transparent 35%),
    linear-gradient(120deg, #1d2a6b 0%, #6d3fa6 55%, #e8462a 100%);
  color: #fff;
}
.search-hero h1 { color: #fff; }
.search-label { display: block; margin: 0 0 .5rem; font-weight: 700; color: #fff; }
.search-hero .hero-search { flex-wrap: nowrap; }
.search-hero .search-label { position: absolute; top: -1.9rem; left: 0; }
.search-hero form { margin-top: 2.6rem; }
.result-count { font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-top: 0; }
.result-list { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .75rem; }
.result {
  position: relative; display: grid; grid-template-columns: 7rem 1fr auto; gap: 1rem; align-items: center;
  padding: .6rem; padding-right: 1rem; background: #fff;
  border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(20, 33, 61, .04);
}
.result:hover, .result:focus-within { box-shadow: var(--shadow); border-color: #cfd8e4; }
.result-media .art { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.result-title { font-weight: 800; color: var(--navy); text-decoration: none; text-transform: capitalize; font-size: 1.05rem; }
.result-title::after { content: ""; position: absolute; inset: 0; }
.result-title:hover { color: var(--coral-strong); text-decoration: underline; }
.result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.result-go { font-size: 1.8rem; color: #b4bfcc; }
.empty { padding: 1.5rem; background: var(--mist); border-radius: var(--radius); }
.suggest-title { margin-top: 1.5rem; font-size: 1.15rem; }
.suggest { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.suggest a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .85rem; border-radius: 999px; background: var(--mist);
  color: var(--navy); font-weight: 600; text-decoration: none; font-size: .9rem;
}
.suggest a:hover { background: var(--coral-soft); color: #8a2410; }

/* ------------------------------------------------------------- misc pages */

.page-head h1 { display: flex; align-items: center; gap: .5rem; }
.page-head h1 .icon { width: 28px; height: 28px; color: var(--coral); }
.page-head { margin-bottom: 1rem; }
.section-title { margin-top: 2rem; }
.note {
  padding: 1rem 1.2rem; border-radius: var(--radius);
  background: var(--plum-soft); border-left: 5px solid var(--plum); color: #2e1a4d;
}
.note p { margin: 0; }
.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }

.signin, .oops {
  margin-top: 1rem; padding: 2rem; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--rule); box-shadow: var(--shadow);
}
.signin form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.signin-icon {
  display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center;
  margin: 0 0 .8rem; border-radius: 50%; background: var(--navy); color: #fff;
}
.oops .art { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); margin-bottom: 1.2rem; }

/* ------------------------------------------------------------- footer */

.site-footer { background: var(--navy); color: #c9d3e6; margin-top: 0; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; padding-top: 2.8rem; padding-bottom: 2rem; }
.footer-logo { font-weight: 800; font-size: 1.4rem; color: #fff; margin: 0 0 .5rem; }
.footer-logo .brand-accent { color: #ff8a6b; }
.footer-brand p { margin-top: 0; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: #ffb59f; }
.footer-col h2 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin: .3rem 0 .8rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.footer-col a { color: #c9d3e6; text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1rem; padding-bottom: 1.4rem; color: #9fb0cc; font-size: .82rem; }
.footer-legal p { margin: 0; }
.site-footer :focus-visible { outline-color: #8fb8ff; }

/* ------------------------------------------------------------- tables */

table.kv, table.terms { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
table.kv th, table.kv td, table.terms th, table.terms td {
  text-align: left; vertical-align: top; padding: .4rem .55rem;
  border-bottom: 1px solid var(--rule); font-size: .92rem;
}

/* ================================================================
   The console: /signals and the backend refusal page.
   A dark security-operations monitor. Every colour below is paired
   with a word or glyph, so no state is colour-only.
   ================================================================ */

body.console {
  --c-bg: #070b16;
  --c-panel: #0e1526;
  --c-panel-2: #121c33;
  --c-line: #22304f;
  --c-text: #d7e3f7;
  --c-dim: #93a4c3;
  --c-key: #7cc4ff;
  --c-val: #f1f5ff;
  --c-allow: #34d399;
  --c-inspect: #fbbf24;
  --c-block: #ff5f6d;
  background:
    linear-gradient(rgba(124, 196, 255, .035) 1px, transparent 1px) 0 0 / 100% 28px,
    radial-gradient(circle at 50% -20%, #13213f 0%, var(--c-bg) 60%);
  background-color: var(--c-bg);
  color: var(--c-text);
}
html:has(body.console) { background: #050810; }
body.console :focus-visible { outline-color: #8fb8ff; }
body.console a { color: var(--c-key); }
body.console a:hover { color: #fff; }
body.console h1, body.console h2, body.console h3 { color: #fff; }
body.console header.site { background: rgba(7, 11, 22, .92); border-bottom-color: var(--c-line); }
body.console .brand { color: #fff; }
body.console header.site nav a { color: var(--c-dim); }
body.console header.site nav a:hover { background: var(--c-panel-2); color: #fff; }
body.console header.site nav a.nav-signals { background: #1b2a4d; color: #fff; box-shadow: inset 0 0 0 1px #34508a; }
body.console .site-footer { background: #050810; border-top: 1px solid var(--c-line); }
body.console .meta { color: var(--c-dim); }
body.console code { color: var(--c-val); }

.monitor { max-width: 84rem; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; font-family: var(--mono); font-size: 14px; }
.monitor--narrow { max-width: 52rem; }

.statusbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.4rem;
  padding: .6rem 1rem; margin-bottom: 1.25rem;
  background: #0a1122; border: 1px solid var(--c-line); border-radius: 10px;
  font-size: 12.5px; color: var(--c-dim);
}
.sb-k { color: #6f82a6; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-right: .45rem; }
.sb-item code { color: var(--c-val); font-size: 12.5px; }
.sb-live { display: inline-flex; align-items: center; gap: .45rem; color: var(--c-allow); font-weight: 700; letter-spacing: .12em; }
.sb-live--block { color: var(--c-block); }
.sb-dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); animation: pulse 2s ease-in-out infinite; }
.sb-live--block .sb-dot { box-shadow: 0 0 0 3px rgba(255, 95, 109, .2); }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sb-dot { animation: none; } .card, .dest-card .art, .cat-tile .art { transition: none; } }
.sb-outcome { margin-left: auto; padding: .2rem .7rem; border-radius: 6px; font-weight: 800; letter-spacing: .1em; border: 1px solid currentColor; }
.sb-outcome .sb-k { color: inherit; opacity: .75; }
.sb-outcome--allow { color: var(--c-allow); background: rgba(52, 211, 153, .08); }
.sb-outcome--inspect { color: var(--c-inspect); background: rgba(251, 191, 36, .08); }
.sb-outcome--block { color: var(--c-block); background: rgba(255, 95, 109, .1); }

.monitor-head { margin-bottom: 1.25rem; }
.monitor-head h1 { font-family: var(--mono); font-size: 1.9rem; margin-bottom: .25rem; }
.monitor-head h1::before { content: "> "; color: var(--c-allow); }
.monitor-head .meta { max-width: 60rem; margin: 0; font-family: var(--sans); }

.monitor-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "waf policy" "other policy" "trace trace";
  align-items: start;
}
.mpanel--waf { grid-area: waf; }
.mpanel--other { grid-area: other; }
.mpanel--policy { grid-area: policy; }
.mpanel--trace { grid-area: trace; }

.mpanel {
  background: linear-gradient(180deg, var(--c-panel-2) 0%, var(--c-panel) 60px);
  border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
}
.mpanel > :not(.mpanel-bar):not(.outcome) { margin-left: 1rem; margin-right: 1rem; }
.mpanel > :last-child { margin-bottom: 1rem; }
.mpanel .meta { font-family: var(--sans); font-size: 13px; }
.mpanel-bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem 1rem; border-bottom: 1px solid var(--c-line); background: rgba(255, 255, 255, .02);
}
.mpanel-dots {
  flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff5f6d; box-shadow: 14px 0 0 #fbbf24, 28px 0 0 #34d399; margin-right: 30px; }
.mpanel-bar h2 { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.mpanel-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-dim); }
.mpanel-count { margin-left: auto; font-size: 11.5px; color: var(--c-dim); padding: .1rem .5rem; border: 1px solid var(--c-line); border-radius: 999px; }
.mpanel--waf { border-color: #2a4a7a; }
.mpanel--waf .mpanel-bar { background: rgba(124, 196, 255, .06); }

body.console table.kv { margin: .75rem 1rem 1rem; width: calc(100% - 2rem); }
body.console table.kv thead th { color: #6f82a6; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; border-bottom-color: var(--c-line); }
body.console table.kv th, body.console table.kv td { border-bottom: 1px dashed #1c2843; padding: .42rem .5rem; font-size: 13px; }
body.console table.kv tbody th { width: 46%; font-weight: 500; }
body.console table.kv tbody th code { color: var(--c-key); }
body.console table.kv tbody tr:hover { background: rgba(124, 196, 255, .05); }
.mpanel--waf table.kv tbody th code { color: #8fe3ff; }
.mpanel--waf table.kv tbody td code { color: #fff; }
body.console table.kv tr.is-redacted td code { color: var(--c-inspect); }
body.console table.kv tr.is-absent td code { color: #6f82a6; font-style: italic; }
body.console code { user-select: text; }

body.console .withheld {
  background: rgba(251, 191, 36, .07); color: #fcd98a;
  border: 1px dashed rgba(251, 191, 36, .45); border-radius: 8px;
  margin-top: .9rem; font-family: var(--sans); font-size: .9rem;
}
body.console .withheld code { color: #ffe7b0; }

.outcome {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center;
  margin: 0; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--c-line);
  --tone: var(--c-allow);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 16%, transparent), transparent 75%);
}
.outcome--inspect { --tone: var(--c-inspect); }
.outcome--block { --tone: var(--c-block); }
.outcome-glyph {
  grid-row: span 3; width: 4.2rem; height: 4.2rem; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800; color: var(--tone);
  border: 2px solid var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--tone) 35%, transparent);
}
.outcome-word { font-size: 2.6rem; font-weight: 800; letter-spacing: .12em; color: var(--tone); line-height: 1; text-shadow: 0 0 18px color-mix(in srgb, var(--tone) 45%, transparent); }
.outcome .decision { margin: .35rem 0 0; color: var(--c-dim); font-size: 13px; }
.outcome .decision code { color: var(--tone); font-weight: 700; font-size: 14px; }
.outcome-status { margin: .15rem 0 0; color: var(--c-dim); font-size: 13px; font-family: var(--sans); }
.outcome-status code { color: #fff; font-weight: 700; }
.outcome h1 { margin: .3rem 0 0; font-size: 1.35rem; font-family: var(--sans); }

.sub { margin-top: 1.1rem; margin-bottom: 0; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #a9b9d6; }
.sub-note { text-transform: none; letter-spacing: 0; color: #6f82a6; font-weight: 400; margin-left: .4rem; }

table.ladder { width: calc(100% - 2rem); border-collapse: separate; border-spacing: 0 6px; margin-top: .4rem; font-size: 12.5px; }
table.ladder thead th { text-align: left; color: #6f82a6; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; padding: 0 .55rem; }
table.ladder tbody th, table.ladder tbody td { padding: .55rem; background: #0b1222; border-top: 1px solid #1c2843; border-bottom: 1px solid #1c2843; text-align: left; vertical-align: middle; color: var(--c-dim); }
table.ladder tbody th { border-left: 3px solid #1c2843; border-radius: 8px 0 0 8px; width: 6.5rem; }
table.ladder tbody td:last-child { border-right: 1px solid #1c2843; border-radius: 0 8px 8px 0; white-space: nowrap; }
.ladder-row--allow { --tone: var(--c-allow); }
.ladder-row--inspect { --tone: var(--c-inspect); }
.ladder-row--block { --tone: var(--c-block); }
table.ladder tr.is-hit th, table.ladder tr.is-hit td { background: color-mix(in srgb, var(--tone) 12%, #0b1222); border-color: color-mix(in srgb, var(--tone) 55%, transparent); color: #fff; }
table.ladder tr.is-hit th { border-left: 3px solid var(--tone); }
.hit-mark { color: var(--tone); font-weight: 800; margin-left: .3rem; }
.tag { display: inline-block; padding: .1rem .5rem; border-radius: 5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--tone); border: 1px solid currentColor; }
.tag--allow { --tone: var(--c-allow); }
.tag--inspect { --tone: var(--c-inspect); }
.tag--block { --tone: var(--c-block); }

.matched { margin-top: .9rem; }
.matched > p { margin: 0 0 .5rem; font-family: var(--sans); font-size: .92rem; }
.matched > p code { color: #fff; font-weight: 700; }
.matched--block, .matched--inspect {
  --tone: var(--c-allow);
  padding: .8rem .9rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent);
  background: color-mix(in srgb, var(--tone) 7%, transparent);
}
.matched--block { --tone: var(--c-block); }
.matched--inspect { --tone: var(--c-inspect); }
.matched-kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem; margin: .4rem 0 .5rem; font-size: 13px; }
.matched-kv dt { color: #6f82a6; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; align-self: center; }
.matched-kv dd { margin: 0; }
.matched-kv dd code { color: var(--tone, #fff); font-weight: 700; }

.trace { margin-top: .9rem; font-size: 13px; }
.trace code { color: #8fe3ff; }
.trace--ok::before { content: "\2713  "; color: var(--c-allow); font-weight: 800; }
.trace--fail::before { content: "!  "; color: var(--c-inspect); font-weight: 800; }

.mpanel--refusal { margin-top: .25rem; }
.mpanel--refusal table.kv tbody th { color: #6f82a6; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; width: 34%; }
.mpanel--refusal table.kv td { color: var(--c-text); }
.mpanel--refusal table.kv td code { color: #fff; font-weight: 700; }
.mpanel--refusal .meta { font-family: var(--sans); }

/* "Trace a run": the token search above the per-request view. */
.mpanel--search { margin-bottom: 1.1rem; border-color: #2a4a7a; }
.mpanel--search .mpanel-bar { background: rgba(52, 211, 153, .06); }
.trace-search { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .9rem; }
.trace-search label { color: var(--c-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.trace-search input {
  flex: 1 1 24rem; min-width: 16rem; padding: .5rem .65rem; font-family: var(--mono); font-size: 13px;
  color: var(--c-val); background: #0a1122; border: 1px solid var(--c-line); border-radius: 8px;
}
body.console button.copy, .trace-search button {
  padding: .45rem .9rem; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: #04120c; background: var(--c-allow); border: 0; border-radius: 8px; cursor: pointer;
}
body.console button.copy { padding: .15rem .5rem; margin-left: .35rem; font-size: 11px; }
.trace-scroll { overflow-x: auto; }
body.console table.trace-results td { vertical-align: top; }
body.console table.trace-results td div { margin: .1rem 0; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .monitor-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "waf" "other" "policy" "trace"; }
  .recs { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .dest-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .listing-layout { grid-template-columns: 1fr; }
  .glance { position: static; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10rem; }
  .sb-outcome { margin-left: 0; }
}
@media (max-width: 560px) {
  .site-inner { padding: .6rem 1rem; }
  header.site nav a span { display: none; }
  header.site nav a { padding: .5rem; }
  .hero { min-height: 26rem; }
  .hero-search { border-radius: var(--radius); flex-wrap: wrap; }
  .hero-search input { flex-basis: 70%; }
  .hero-search .btn { width: 100%; }
  .dest-card--wide { grid-column: span 2; grid-row: span 1; }
  .result { grid-template-columns: 5rem 1fr; }
  .result-go { display: none; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-item--1 { grid-column: auto; grid-row: span 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .outcome-word { font-size: 2rem; }
  /* Stack each header row so a long name never breaks mid-word in a narrow column. */
  body.console table.kv thead { display: none; }
  body.console table.kv tr { display: block; padding: .35rem 0; border-bottom: 1px dashed #1c2843; }
  body.console table.kv th, body.console table.kv td { display: block; width: auto; border: 0; padding: .1rem .5rem; }
  body.console table.kv tbody th { width: auto; }
}

/* Trace a run: the selected result row and the caption above blocks 1 and 2. */
body.console table.kv tbody tr.is-selected { background: rgba(124, 196, 255, .14); outline: 1px solid #7cc4ff; }
body.console .detail-caption { margin: 0 0 1rem; padding: .6rem 1rem; border: 1px solid #7cc4ff; border-radius: 8px; background: #0b1222; }
body.console .detail-caption p { margin: .2rem 0; font-size: 13px; }
body.console button.row-detail[aria-pressed="true"] { outline: 2px solid #7cc4ff; }