/* castomo Travel: what the kit has no component for. Tokens only: no colour literal, no font, no
   letter-spacing, no pixel font size (dashkit rules 4 and 16). Switch layouts only at the kit's steps
   (860, 640, 560, 420, 400). */

/* ---------- Tiles: a collection of peers that line up (GUIDELINES §5e) ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap);
}
.tile {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: var(--s1);
  padding: 0;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tile:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }
:root[data-motion="reduce"] .tile:hover { transform: none; }
.tile-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--accent-wash);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tile-media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tile-media .ci { --ci-size: 40px; }
.tile-media .badge { position: absolute; inset-block-start: var(--s1); inset-inline-end: var(--s1); }
.tile-body, .tile-meta, .tile-foot { padding-inline: var(--card-pad); }
.tile-body h3 {
  font-size: var(--t1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-body p { color: var(--ink-2); margin-block-start: var(--s-1); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { display: flex; flex-wrap: wrap; align-items: start; gap: var(--s-1) var(--s1); color: var(--ink-3); font-size: var(--t-1); }
.tile-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1); padding-block-end: var(--card-pad); }
.tile-edge { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px; background: var(--tone, var(--rule)); }
.tile[data-status="travelling"], .tile[data-status="booked"] { --tone: var(--ok); }
.tile[data-status="planned"] { --tone: var(--info); }
.tile[data-status="dreaming"] { --tone: var(--accent); }
.price { font-weight: 700; font-size: var(--t1); font-variant-numeric: tabular-nums; }
.price small { color: var(--ink-3); font-weight: 500; font-size: var(--t-1); }
.match-pill { background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--radius-pill); padding: 2px var(--s1); font-weight: 700; font-size: var(--t-1); font-variant-numeric: tabular-nums; }

/* ---------- Choosing: chips that answer a question ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.ask { display: grid; gap: var(--s-1); }
.ask > b { font-weight: 650; }
.ask-grid { display: grid; gap: var(--s2) var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .ask-grid { grid-template-columns: 1fr; } }

/* ---------- Traveller DNA ---------- */
.dna-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; }
@media (max-width: 860px) { .dna-split { grid-template-columns: 1fr; } }
.radar { inline-size: 100%; max-inline-size: 22rem; margin-inline: auto; display: block; }
.radar .ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.radar .spoke { stroke: var(--rule); stroke-width: 1; }
.radar .shape { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; fill-opacity: .7; transition: d var(--dur) var(--ease-out); }
.radar .dot { fill: var(--accent); }
.radar text { fill: var(--ink-2); font-size: var(--t-1); }
.dial { display: grid; gap: var(--s-1); }
.dial-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); }
.dial-top b { font-weight: 650; }
.dial-top output { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.dial-ends { display: flex; justify-content: space-between; color: var(--ink-3); font-size: var(--t-1); }
input[type="range"].range { inline-size: 100%; accent-color: var(--accent); min-block-size: var(--target); margin: 0; }
.axes { display: grid; gap: var(--s1) var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .axes { grid-template-columns: 1fr; } }
.matches { display: grid; gap: var(--s1); list-style: none; }
.match { display: grid; gap: 4px; padding: var(--s1) var(--s2); border-radius: var(--radius-tile); border: var(--rule-w) solid var(--rule); }
.match[data-top] { border-color: var(--accent); background: var(--accent-wash); }
.match-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); }
.match-head b { font-weight: 650; }
.match-head span { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-ink); }
.match small { color: var(--ink-3); }

/* ---------- A journey: days of stops ---------- */
.days { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.day { display: grid; gap: var(--s1); }
.day-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); }
.day-head h3 { font-size: var(--t1); }
.day-head small { color: var(--ink-3); }
.stops { list-style: none; display: grid; gap: var(--s-1); }
.stop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s1); align-items: start; padding: var(--s1); border-radius: var(--radius-tile); background: var(--wash); }
.stop[data-done] .stop-title { text-decoration: line-through; color: var(--ink-3); }
.stop-time { font-variant-numeric: tabular-nums; color: var(--ink-3); min-inline-size: 3.2em; }
.stop-title { font-weight: 600; overflow-wrap: anywhere; }
.stop small { color: var(--ink-3); display: block; }
.stop-kind { color: var(--accent-ink); }
.stop-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 2px; }
.weather { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ink-2); font-size: var(--t-1); }
.weather .ci { --ci-size: 18px; }
.weather[data-kind="typical"] { color: var(--ink-3); }
.event { display: flex; gap: var(--s-1); align-items: baseline; color: var(--ink-2); font-size: var(--t-1); }

/* ---------- Booking ---------- */
.book { display: grid; gap: var(--s2); }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t1); border-block-start: var(--rule-w) solid var(--rule); padding-block-start: var(--s1); }
.total b { font-size: var(--t2); font-variant-numeric: tabular-nums; }
.stepper { display: inline-grid; grid-template-columns: auto 3.5ch auto; align-items: center; gap: var(--s-1); }
.stepper output { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.gallery { display: grid; gap: var(--s-1); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.gallery img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-tile); }
.hero { position: relative; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 21 / 8; background: var(--accent-wash); display: grid; place-items: center; color: var(--accent-ink); }
.hero img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 640px) { .hero { aspect-ratio: 16 / 9; } }
.why { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }

/* ---------- Sharing ---------- */
.linkbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1); align-items: center; }
.linkbox code { overflow-wrap: anywhere; padding: var(--s-1) var(--s1); background: var(--field); border-radius: var(--radius-control); }

/* ---------- Welcome strip on Home ---------- */
.next-trip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: center; }
.countdown { text-align: end; }
.countdown b { display: block; font-size: var(--t4); line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .next-trip { grid-template-columns: 1fr; } .countdown { text-align: start; } }
.steps-line { display: grid; gap: var(--s1); list-style: none; }
.steps-line li { display: flex; gap: var(--s1); align-items: center; }
.steps-line [data-done] { color: var(--ink-3); }
@media print {
  .side, .tabbar, .top, .page-actions, .btn, .icon-btn { display: none !important; }
  .card { box-shadow: none; border: var(--rule-w) solid var(--rule); break-inside: avoid; }
  .days { grid-template-columns: 1fr; }
}

/* A toolbar of controls that size themselves, not one control per row. */
.toolbar > .select, .toolbar > .segmented { inline-size: auto; flex: 0 0 auto; }
.page-actions .select { inline-size: auto; }
.chips { align-items: flex-start; }
.ask { align-content: start; }
a.stop-title { color: var(--accent-ink); text-decoration-thickness: 1px; }