/* Island ferries · v6. Brand tokens from toursinalgarve.com css/brand.css; unslop passes (see NOTES-V6.md).
   One layer, no overrides: tokens → base → chrome → route line → timetable → empty → footer → mobile → motion. */
@font-face { font-family: Urbanist; src: url(fonts/urbanist-latin.woff2) format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+FEFF; }
@font-face { font-family: Urbanist; src: url(fonts/urbanist-latin-ext.woff2) format('woff2'); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Figtree; src: url(fonts/figtree-latin.woff2) format('woff2'); font-weight: 300 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+FEFF; }
@font-face { font-family: Figtree; src: url(fonts/figtree-latin-ext.woff2) format('woff2'); font-weight: 300 900; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* brand */
  --lagoon: #0d7f76;       /* the one accent */
  --deep: #0c3f44;
  --sea: #1a7178;
  --sun: #b06d0f;
  --warn-soft: #f8e6c6;
  --surface: #f6f3ec;
  --raised: #fffdf8;
  --line: #ddd6c6;
  /* derived neutrals (warm, no mint) */
  --ink: #0c3f44;
  --muted: #4f6a69;        /* 5.7:1 on raised */
  --faint: #66797a;        /* 4.5:1 on raised: past times */
  --sunk: #efeadf;
  --hair: rgba(12, 63, 68, .09);
  --sun-ink: #7a4a06;      /* 6.1:1 on warn-soft */
  --wake: #3ec3b3;         /* from the brand mark; only on deep */
  --sand: #e3a43c;         /* from the brand mark; only on deep */
  --on-deep: rgba(246, 243, 236, .88);

  /* type scale: size / line height on the 4px grid */
  --t-xs: 500 13px/16px var(--ui);
  --t-sm: 400 14px/20px var(--ui);
  --t-md: 400 16px/24px var(--ui);
  --t-lg: 600 20px/28px var(--display);
  --t-time: 500 24px/32px var(--display);

  /* 4px spacing rhythm */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* nested radii: card 20 → control 12 → tag 8 */
  --r-card: 20px;
  --r-ctl: 12px;
  --r-tag: 8px;

  --shadow: 0 0 0 1px var(--hair), 0 1px 2px rgba(12, 63, 68, .04), 0 8px 24px -12px rgba(12, 63, 68, .16);
  --shadow-sm: 0 0 0 1px var(--hair), 0 1px 2px rgba(12, 63, 68, .06);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --display: Urbanist, ui-sans-serif, system-ui, sans-serif;
  --ui: Figtree, ui-sans-serif, system-ui, sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: var(--t-md); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.page { max-width: 880px; margin: 0 auto; padding: var(--s4) var(--s6) var(--s10); }

/* ---------- header: quiet chrome ---------- */
.head { display: flex; align-items: center; gap: var(--s3); height: 48px; margin-bottom: var(--s4); }
.mark { border-radius: var(--r-tag); display: block; }
.title { font: 600 18px/24px var(--display); letter-spacing: -.01em; }
.proto { font: var(--t-xs); color: var(--muted); background: var(--sunk); border-radius: var(--r-tag); padding: 2px var(--s2); }
.older { margin-left: auto; display: flex; gap: var(--s1); font: var(--t-sm); }
.older a { color: var(--muted); text-decoration: none; padding: var(--s1) var(--s2); border-radius: var(--r-tag); transition: background-color .16s, color .16s; }
.older a:hover { color: var(--ink); background: var(--sunk); }

/* ---------- route switch: segmented, sliding thumb ---------- */
.routes { margin-bottom: var(--s4); }
.chips { --i: 0; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--sunk); border-radius: 14px; padding: 2px; box-shadow: inset 0 0 0 1px var(--hair); }
.chips::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 2);
  border-radius: var(--r-ctl); background: var(--raised); box-shadow: var(--shadow-sm);
  transform: translateX(calc(var(--i) * 100%)); transition: transform .28s var(--ease); }
.chip { position: relative; border: 0; background: none; border-radius: var(--r-ctl); height: 40px; padding: 0 var(--s5);
  font: 600 15px/20px var(--display); cursor: pointer; color: var(--muted); white-space: nowrap; transition: color .2s; }
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { color: var(--ink); }

/* ---------- signature: route line ---------- */
.diagram { background: var(--deep); color: var(--surface); border-radius: var(--r-card); padding: var(--s6) var(--s8) var(--s5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px -12px rgba(12, 63, 68, .5); }
.line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: auto 28px auto; grid-auto-flow: column; }
.stop, .seg { display: grid; grid-row: 1 / 4; grid-template-rows: subgrid; }
.stop { text-align: center; justify-items: center; }
.stop.start { justify-items: start; text-align: left; }
.stop:last-child:not(.start) { justify-items: end; text-align: right; }
.stop-name { font: 600 20px/28px var(--display); letter-spacing: -.01em; padding-bottom: var(--s2); }
.stop-sub { padding-top: var(--s2); font: var(--t-sm); color: var(--on-deep); white-space: nowrap; }
.stop-sub .dim { color: rgba(246, 243, 236, .72); }

/* dots sit on the track; the track runs dot centre to dot centre */
.dot { position: relative; align-self: stretch; justify-self: stretch; width: 100%; min-width: 16px; }
.dot::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--wake); }
.stop.start .dot::before { left: 8px; }
.stop:first-child:not(.start) .dot::before { left: 50%; }
.stop:last-child .dot::before { right: 8px; }
.dot::after { content: ""; position: absolute; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--deep); box-shadow: inset 0 0 0 3px var(--wake); left: 50%; margin-left: -8px; }
.stop.start .dot::after { left: 0; margin-left: 0; background: var(--sand); box-shadow: 0 0 0 4px rgba(227, 164, 60, .22); }
.stop:last-child:not(.start) .dot::after { left: auto; right: 0; margin-left: 0; }
.seg { position: relative; }
.track { grid-area: 2 / 1; align-self: start; margin-top: 13px; height: 2px; background: var(--wake); }
.leg { grid-area: 2 / 1; justify-self: center; align-self: center; position: relative; z-index: 1;
  font: var(--t-xs); color: var(--surface); background: var(--deep); padding: 2px var(--s2); border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(62, 195, 179, .55); white-space: nowrap; }

/* ---------- meta: plain icon + text ---------- */
.meta { list-style: none; margin: var(--s3) 0 var(--s8); padding: 0 var(--s1); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.meta li, .meta a { display: inline-flex; align-items: center; gap: 6px; font: var(--t-sm); color: var(--muted); }
.meta .ic { color: var(--faint); }
.meta a { text-decoration: none; transition: color .16s; }
.meta a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- day + live line ---------- */
.dayline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4);
  margin-bottom: var(--s3); min-height: 32px; }
.day { margin: 0; font: var(--t-lg); letter-spacing: -.01em; }
.day.rolled { color: var(--sea); }      /* lagoon is 4.4:1 on surface; sea 5.2:1 */
.live { display: flex; align-items: center; gap: var(--s3); font: var(--t-sm); color: var(--muted); }
.live strong { color: var(--ink); font-weight: 600; }
.hint { display: inline-flex; align-items: center; gap: var(--s2); }
.pick { min-width: 0; }
.hint .ic { color: var(--faint); }
.clear { border: 0; background: var(--sunk); border-radius: var(--r-tag); padding: var(--s1) var(--s3); font: 500 14px/20px var(--ui);
  cursor: pointer; color: var(--ink); transition: background-color .16s; }
.clear:hover { background: var(--line); }

/* ---------- the hero: timetable ---------- */
.tt { background: var(--raised); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 0 var(--s1) var(--s1); }
.tr { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); position: relative; }
.tr:not(.th) + .tr { box-shadow: inset 0 1px 0 var(--hair); }

/* sticky column headers inside the card */
.th { position: sticky; top: 0; z-index: 2; margin: 0 calc(-1 * var(--s1)); padding: 0 var(--s1);
  background: rgba(255, 253, 248, .96); -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px);
  border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: inset 0 -1px 0 var(--line); }
.thc { padding: var(--s4) var(--s4) var(--s3); display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.thc .hd { font: 600 15px/20px var(--display); }
.thc small { font: var(--t-xs); font-weight: 400; color: var(--muted); }

.td { min-height: 56px; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); padding: var(--s3) var(--s4); min-width: 0; position: relative; }
.td.c0:has(button) { padding: var(--s1); }
.td:not(.c0) { column-gap: var(--s5); }
.td > button { all: unset; box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--s2) var(--s3);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); cursor: pointer; border-radius: var(--r-ctl);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease); }
.td > button:hover { background: var(--sunk); }
.td > button:active { transform: scale(.98); }
.td > button:focus-visible { outline: 2px solid var(--lagoon); outline-offset: -2px; }
.time { position: relative; font: var(--t-time); letter-spacing: -.01em; transition: color .2s var(--ease); }
.tags { display: contents; }

.soon { font: 600 14px/20px var(--ui); color: var(--lagoon); transition: color .2s var(--ease); }
.tag { font: var(--t-xs); padding: 2px 6px; border-radius: 6px; background: var(--sunk); color: #5c6a6a; }
.tag.last { background: var(--warn-soft); color: var(--sun-ink); }

.gone .time { color: var(--faint); font-weight: 400; }
.blank .time { color: var(--line); }

/* next out: lagoon bar + lagoon times */
.tr.next .c0::before { content: ""; position: absolute; left: 0; top: var(--s3); bottom: var(--s3); width: 3px; border-radius: 0 3px 3px 0; background: var(--lagoon); }
.td.nextc .time { color: var(--lagoon); font-weight: 600; }
.tr.next.picked .c0::before { opacity: 0; }

/* tap an out time: deep thumb, fitting returns get ink + a lagoon dot, the rest go faint */
.tr.picked .c0 > button { background: var(--deep); color: var(--surface); }
.tr.picked .c0 > button .time, .tr.picked .c0 > button .soon { color: var(--surface); }
.tr.picked .c0 > button .tag.last { background: rgba(248, 230, 198, .95); }
.td:not(.c0) .time::after { content: ""; position: absolute; right: -12px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--lagoon); transform: scale(0); transition: transform .24s var(--ease); }
.td.fit .time { color: var(--ink); font-weight: 600; }
.td.fit .time::after { transform: scale(1); }
.td.nofit .time, .td.nofit .soon { color: var(--faint); font-weight: 400; }

.footnote { margin-top: var(--s3); padding: 0 var(--s4); font: var(--t-sm); color: var(--muted); }

/* ---------- empty states ---------- */
.empty { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); margin-bottom: var(--s6);
  background: var(--raised); border-radius: var(--r-card); box-shadow: var(--shadow); }
.empty-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--deep); color: var(--wake); }
.empty-ic .ic { width: 24px; height: 24px; stroke-width: 1.5; }
.empty-txt { flex: 1; min-width: 0; }
.empty-h { font: 600 17px/24px var(--display); }
.empty-s { font: var(--t-sm); color: var(--muted); }
.empty-s strong { color: var(--ink); font-weight: 600; }
.btn { flex: none; display: inline-flex; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s4); border-radius: var(--r-ctl);
  background: var(--sunk); font: 600 14px/20px var(--ui); text-decoration: none; transition: background-color .16s; }
.btn:hover { background: var(--line); }

/* ---------- footer ---------- */
.foot { margin-top: var(--s10); }
.ctas { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 48px; padding: 0 var(--s5);
  border-radius: 14px; background: var(--raised); box-shadow: var(--shadow-sm); text-decoration: none; font: 600 15px/20px var(--ui);
  transition: background-color .16s, box-shadow .16s, transform .12s var(--ease); }
.cta:hover { box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(12, 63, 68, .08); }
.cta:active { transform: scale(.98); }
.cta.primary { background: var(--lagoon); color: #fff; box-shadow: 0 1px 2px rgba(12, 63, 68, .2); }
.cta.primary:hover { background: var(--deep); }
.cta .num { font-weight: 400; }
.source { margin-top: var(--s6); font: var(--t-sm); color: var(--muted); }

/* ---------- mobile: three columns side by side, no horizontal scroll at 360 ---------- */
@media (max-width: 639px) {
  .page { padding: var(--s2) var(--s3) var(--s8); }
  .head { margin-bottom: var(--s2); }
  .chips { display: grid; width: 100%; }
  .chip { padding: 0 var(--s2); }
  .diagram { padding: var(--s5) var(--s4) var(--s4); border-radius: 16px; }
  .stop-name { font-size: 17px; line-height: 24px; }
  .line { grid-template-rows: auto 28px auto; }
  .meta { margin-bottom: var(--s6); gap: var(--s1) var(--s4); }
  .live { width: 100%; justify-content: space-between; }

  .tt { border-radius: 16px; padding: 0 2px 2px; }
  .th { margin: 0 -2px; padding: 0 2px; border-radius: 16px 16px 0 0; }
  .thc { padding: var(--s3) var(--s2) var(--s2); flex-direction: column; align-items: flex-start; gap: 0; }
  .td { min-height: 56px; padding: var(--s2); gap: 2px var(--s1); flex-direction: column; align-items: flex-start; justify-content: center; }
  .td.c0:has(button) { padding: 2px; }
  .td > button { min-height: 52px; padding: 6px; border-radius: 10px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
  .tags { display: flex; gap: var(--s1); flex-wrap: wrap; }
  .time { font-size: 18px; line-height: 24px; }
  .soon { font: 600 13px/16px var(--ui); }
  .tag { padding: 0 6px; line-height: 16px; }
  .tr.next .c0::before { top: var(--s2); bottom: var(--s2); }

  .empty { display: grid; grid-template-columns: 40px 1fr; padding: var(--s3); gap: var(--s3); border-radius: 16px; }
  .empty .btn { grid-column: 2; justify-self: start; margin-top: calc(-1 * var(--s1)); }
  .empty-ic { width: 40px; height: 40px; border-radius: 12px; }
  .empty-ic .ic { width: 20px; height: 20px; }
  .btn { padding: 0 var(--s3); }

  .ctas { display: grid; grid-template-columns: 1fr 1fr; }
  .cta.primary { grid-column: 1 / -1; }
}

/* ---------- motion: once, short, never looping ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
@keyframes fade { from { opacity: 0; } }
.tt, .empty { animation: rise .32s var(--ease) backwards; }
.empty + .dayline, .empty ~ .tt { animation-delay: .06s; }
.line .dot, .line .track { animation: draw .36s cubic-bezier(.4, 0, .2, 1) backwards; animation-delay: calc(var(--k) * 90ms); }
.line .stop-name, .line .stop-sub { animation: fade .4s ease-out backwards; animation-delay: calc(var(--k) * 90ms); }
.line .leg { animation: pop .28s var(--ease) backwards; animation-delay: calc(var(--k) * 90ms + .2s); }
.live > * { animation: fade .2s ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}