/* triporganiser.app: the app's look (src/index.css) for a page that scrolls.
   Same tokens and names as the app, so the two read as one thing. Navy by
   default, cream when html has .light (theme.js), violet accent. No inline
   styles anywhere: the Content-Security-Policy (_headers) would block them. */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
}

:root {
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  --c-bg:       #101827;
  --c-surface:  #182338;
  --c-surface2: #202E45;
  --c-text:     #F4F2EB;
  --c-sub:      #A7B2C5;
  --c-muted:    #8592A6;
  --c-border:   #34445D;
  --c-control-border: #6B7D96;
  --accent:     #A78BFA;
  --accent-hover: #B9A3FC;
  --on-accent:  #101827;
  --accent-text:#A78BFA;
  --chip-accent: rgba(167, 139, 250, 0.16);
  --mark:       #A78BFA;
  --accent-line: var(--accent);
  --good:       #65D6A0;
  --chip-good:  rgba(101, 214, 160, 0.16);
  /* Kinds of place, as on the app's map. Always with the kind's word beside them. */
  --k-see:      #4F8DF7;
  --k-eat:      #F2545B;
  --k-coffee:   #B07A4F;
  --k-sweet:    #E862B0;
  --k-stay:     #8B5CF6;

  /* Spacing: one scale, 4px steps. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --radius: 12px;
  /* The dotted route down the left of the page: its width, and the room it takes. */
  --rail: 40px;
  color-scheme: dark;
}

html.light {
  --c-bg:       #F4F2EB;
  --c-surface:  #FFFFFF;
  --c-surface2: #E9E6DD;
  --c-text:     #101827;
  --c-sub:      #4B5567;
  --c-muted:    #5E6779;
  --c-border:   rgba(16, 24, 39, 0.14);
  --c-control-border: rgba(16, 24, 39, 0.50);
  --accent-hover: #9A7AF8;
  --accent-text:#6D28D9;
  --chip-accent: rgba(109, 40, 217, 0.10);
  --mark:       #6D28D9;
  --accent-line: var(--mark);
  --good:       #0B6B46;
  --chip-good:  rgba(11, 107, 70, 0.12);
  color-scheme: light;
}

@media (min-width: 900px) {
  :root { --rail: 72px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s5); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  background-color: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 10;
  padding: var(--s2) var(--s4); border-radius: 8px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--s3); }

/* The one content container. */
.shell {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-left: max(var(--s4), env(safe-area-inset-left));
  padding-right: max(var(--s4), env(safe-area-inset-right));
}
@media (min-width: 640px) {
  .shell { padding-left: max(var(--s5), env(safe-area-inset-left)); padding-right: max(var(--s5), env(safe-area-inset-right)); }
}

/* Type */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.005em;
}
.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-sub);
}
.accent { color: var(--accent-text); }
.sub { color: var(--c-sub); }
.muted { color: var(--c-muted); }
.nums { font-variant-numeric: tabular-nums lining-nums; }

/* Header */
.site-head { border-bottom: 1px solid var(--c-border); }
.site-head .shell { display: flex; align-items: center; gap: var(--s4); min-height: 60px; }
.lockup { display: inline-flex; align-items: center; gap: var(--s2); color: var(--c-text); text-decoration: none; min-height: 44px; }
/* The mark: violet pin, the page colour for the hole, a dotted route out of it. */
.mark { flex: none; }
.mark-line { fill: none; stroke: var(--mark); stroke-width: 2.4; stroke-linecap: round; }
.mark-pin { fill: var(--mark); }
.mark-hole { fill: var(--c-bg); }
.lockup-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 20px; line-height: 1; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
.site-nav a {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: 8px;
  color: var(--c-sub);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.site-nav a:hover { color: var(--c-text); background: var(--c-surface2); }
.site-nav a[aria-current='page'] { color: var(--c-text); }
@media (min-width: 520px) { .site-nav a { display: inline-flex; } }

.theme-toggle {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  margin-left: var(--s1);
  border-radius: 999px;
  border: 0;
  background: var(--c-surface2);
  color: var(--c-sub);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--c-text); }
html.js .theme-toggle { display: grid; }
.theme-toggle .moon { display: none; }
html.light .theme-toggle .sun { display: none; }
html.light .theme-toggle .moon { display: block; }

/* Hero: the headline, and a real day from the app as the picture. */
.hero { padding: var(--s7) 0 var(--s8); }
.hero .shell { display: grid; gap: var(--s7); }
.hero h1 { font-size: clamp(56px, 14vw + 10px, 128px); }
.hero h1 .accent { display: block; }
.lede { margin-top: var(--s5); max-width: 30rem; font-size: 19px; line-height: 1.55; color: var(--c-sub); }
.lede strong { color: var(--c-text); font-weight: 600; }
.soon {
  margin-top: var(--s6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  font-size: 15px; color: var(--c-sub);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  background: var(--chip-accent); color: var(--accent-text);
}
@media (min-width: 900px) {
  .hero { padding: var(--s9) 0 var(--s10); }
  .hero .shell { grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: var(--s8); }
  /* "On one map." stays on one line beside the day card. */
  .hero h1 { font-size: min(108px, 8.2vw); }
}

/* The day card, drawn like the app's Days screen. */
.day {
  margin: 0;
  background: var(--c-surface);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: var(--s5) var(--s4) var(--s4);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
}
html.light .day { border-color: var(--c-border); box-shadow: 0 24px 60px -34px rgba(16, 24, 39, 0.35); }
@media (min-width: 640px) { .day { padding: var(--s5); } }
.day-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); padding-bottom: var(--s4); border-bottom: 1px solid var(--c-border); }
.day-date { font-size: 40px; }
.day-where { text-align: right; font-size: 14px; color: var(--c-sub); line-height: 1.35; }
.day-where strong { display: block; color: var(--c-text); font-weight: 600; font-size: 15px; }

.plan { padding-top: var(--s4); }
.plan li { display: grid; grid-template-columns: 48px 22px 1fr; column-gap: var(--s3); }
.plan .time { font-size: 14px; font-weight: 600; color: var(--c-sub); padding-top: 1px; }
.plan .pin { position: relative; display: flex; justify-content: center; }
.plan .stop .pin::after {
  content: '';
  position: relative; z-index: 1;
  width: 14px; height: 14px; margin-top: 4px;
  border-radius: 999px;
  background: var(--kind, var(--k-see));
  box-shadow: 0 0 0 3px var(--c-surface);
}
.plan .walk .pin::after,
.plan .stop:not(:first-child) .pin::before,
.plan .stop:not(:last-child) .pin::before {
  content: '';
  position: absolute; left: 50%; top: 0; bottom: 0;
  transform: translateX(-50%);
  border-left: 2px dotted var(--accent-line);
}
/* The line runs from the first dot to the last, not past them. */
.plan .stop:first-child .pin::before { top: 11px; }
.plan .stop:last-child .pin::before { bottom: auto; height: 11px; }
.plan .stop .body { padding-bottom: 2px; min-width: 0; }
.plan .name { font-weight: 600; font-size: 16px; line-height: 1.35; }
.plan .meta { font-size: 13px; line-height: 1.45; color: var(--c-sub); }
.plan .kind { font-weight: 600; color: var(--c-text); }
.plan .walk .body { padding: 6px 0 8px; font-size: 13px; color: var(--c-muted); }
.plan .booked {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 10px; border-radius: 8px;
  background: var(--chip-good); color: var(--good);
  font-size: 12px; font-weight: 600;
}
.plan .booked .ref { color: var(--c-text); font-weight: 400; }
.k-stay   { --kind: var(--k-stay); }
.k-coffee { --kind: var(--k-coffee); }
.k-see    { --kind: var(--k-see); }
.k-eat    { --kind: var(--k-eat); }
.k-sweet  { --kind: var(--k-sweet); }

.day-foot { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--c-border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.day-foot p { font-size: 13px; color: var(--c-sub); }
.fake-btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 40px; padding: 0 14px; border-radius: 8px;
  background: var(--accent); color: var(--on-accent);
  font-size: 14px; font-weight: 600;
}
.day figcaption { margin-top: var(--s3); font-size: 13px; color: var(--c-muted); text-align: center; }

/* The day's stops arrive one after another, once, on load. theme.js adds
   .arrive in the first animation frame, so where frames never run (or motion
   is turned down) the rows simply show. */
@media (prefers-reduced-motion: no-preference) {
  .arrive .plan li { animation: arrive 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .arrive .plan li:nth-child(2)  { animation-delay: 0.08s; }
  .arrive .plan li:nth-child(3)  { animation-delay: 0.16s; }
  .arrive .plan li:nth-child(4)  { animation-delay: 0.24s; }
  .arrive .plan li:nth-child(5)  { animation-delay: 0.32s; }
  .arrive .plan li:nth-child(6)  { animation-delay: 0.40s; }
  .arrive .plan li:nth-child(7)  { animation-delay: 0.48s; }
  .arrive .plan li:nth-child(8)  { animation-delay: 0.56s; }
  .arrive .plan li:nth-child(9)  { animation-delay: 0.64s; }
  .arrive .plan li:nth-child(10) { animation-delay: 0.72s; }
  .arrive .plan li:nth-child(11) { animation-delay: 0.80s; }
}
@keyframes arrive {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* The route: a dotted line down the page, with a stop for each section. */
.route { position: relative; padding-left: var(--rail); }
.route::before {
  content: '';
  position: absolute; left: 10px; top: 0; bottom: 34px;
  border-left: 2px dotted var(--accent-line);
}
.leg { position: relative; padding: var(--s8) 0; border-top: 1px solid var(--c-border); }
.leg:first-child { border-top: 0; padding-top: var(--s4); }
.leg::before {
  content: '';
  position: absolute; left: calc(-1 * var(--rail)); top: calc(var(--s8) + 6px);
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--c-bg);
  border: 3px solid var(--accent-line);
}
.leg:first-child::before { top: calc(var(--s4) + 6px); }
.leg-end::before { display: none; }
.leg-end .end-pin { position: absolute; left: calc(-1 * var(--rail) - 4px); top: calc(var(--s8) - 2px); }
/* The route ends at the pin: cover the dotted line below it. */
.leg-end::after {
  content: '';
  position: absolute; left: calc(-1 * var(--rail)); width: 24px;
  top: calc(var(--s8) + 22px); bottom: 0;
  background: var(--c-bg);
}
@media (min-width: 900px) {
  .leg { padding: var(--s9) 0; }
  .leg::before { top: calc(var(--s9) + 10px); }
  .leg-end .end-pin { top: calc(var(--s9) + 2px); }
  .leg-end::after { top: calc(var(--s9) + 26px); }
}

.leg h2 { font-size: clamp(40px, 4.5vw + 16px, 72px); }
.leg-intro { margin-top: var(--s4); max-width: 32rem; color: var(--c-sub); font-size: 18px; }

/* What it does: a list, not cards. */
.tabs { margin-top: var(--s6); display: grid; }
.tabs li { display: grid; grid-template-columns: 28px 1fr; column-gap: var(--s4); padding: var(--s5) 0; border-top: 1px solid var(--c-border); }
.tabs svg { color: var(--accent-text); margin-top: 4px; }
.tabs h3 { grid-column: 2; font-family: var(--font-display); text-transform: uppercase; font-size: 30px; line-height: 1; }
.tabs p { grid-column: 2; margin-top: var(--s2); color: var(--c-sub); max-width: 34rem; }
@media (min-width: 900px) {
  .split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s8); align-items: start; }
  .split > :first-child { position: sticky; top: var(--s6); }
  .tabs { margin-top: 0; }
}
@media (min-width: 1100px) {
  .tabs li { grid-template-columns: 36px 160px 1fr; align-items: baseline; }
  .tabs svg { align-self: start; margin-top: 2px; }
  .tabs p { grid-column: 3; margin-top: 0; }
}

/* Left out on purpose: struck through. */
.struck { margin-top: var(--s6); display: grid; gap: var(--s2); }
.struck li { font-size: clamp(32px, 3vw + 12px, 56px); line-height: 1.02; color: var(--c-sub); }
.struck s {
  text-decoration-line: line-through;
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 0.09em;
}
.promise { margin-top: var(--s6); max-width: 30rem; font-size: 19px; line-height: 1.55; }
.promise strong { font-weight: 600; }
@media (min-width: 900px) {
  .struck-wrap { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s8); align-items: end; }
  .promise { margin-top: 0; padding-bottom: var(--s3); }
}

/* What leaves your phone. */
.leaves { margin-top: var(--s6); display: grid; border-top: 1px solid var(--c-border); max-width: 46rem; }
.leaves div { display: grid; gap: var(--s1); padding: var(--s4) 0; border-bottom: 1px solid var(--c-border); }
.leaves dt { font-weight: 600; }
.leaves dd { color: var(--c-sub); }
@media (min-width: 640px) {
  .leaves div { grid-template-columns: 14rem 1fr; gap: var(--s5); }
}
.more { margin-top: var(--s5); font-weight: 600; }

.end-text { margin-top: var(--s4); max-width: 34rem; font-size: 18px; color: var(--c-sub); }
.end-text + .end-text { margin-top: var(--s3); }
.end-text a { font-weight: 600; }

/* Footer */
.site-foot { border-top: 1px solid var(--c-border); padding: var(--s6) 0 calc(var(--s6) + env(safe-area-inset-bottom)); }
.site-foot .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.site-foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-sub); font-size: 15px; font-weight: 600; text-decoration: none; }
.site-foot nav a:hover { color: var(--c-text); }
.site-foot small { display: block; width: 100%; color: var(--c-muted); font-size: 13px; }

/* Text pages: privacy and support. */
.page { padding: var(--s7) 0 var(--s9); }
.page-col { max-width: 42rem; }
.page h1 { font-size: clamp(48px, 6vw + 20px, 88px); }
.updated { margin-top: var(--s3); color: var(--c-muted); font-size: 15px; }
.page .intro { margin-top: var(--s5); font-size: 19px; line-height: 1.55; color: var(--c-sub); }
.page h2 {
  margin-top: var(--s7);
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(26px, 1.5vw + 20px, 34px); line-height: 1.05;
}
.page h3 { margin-top: var(--s5); font-size: 17px; font-weight: 600; }
.page h2 + p, .page h3 + p, .page h2 + ul, .page h3 + ul { margin-top: var(--s3); }
.page p + p, .page ul + p, .page p + ul { margin-top: var(--s3); }
.page ul.dots li { position: relative; padding-left: 22px; }
.page ul.dots li + li { margin-top: var(--s2); }
.page ul.dots li::before {
  content: ''; position: absolute; left: 4px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--accent-line);
}
.short {
  margin-top: var(--s6);
  padding: var(--s5);
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid transparent;
}
html.light .short { border-color: var(--c-border); }
.short h2 { margin-top: 0; }
.short ul { margin-top: var(--s3); }

.contact {
  margin-top: var(--s6);
  padding: var(--s5);
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid transparent;
}
html.light .contact { border-color: var(--c-border); }
.page .contact .label { margin: 0; font-family: var(--font-sans); font-size: 12px; line-height: 1.4; letter-spacing: 0.12em; }
.contact-mail {
  display: inline-block;
  margin-top: var(--s2);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw + 16px, 40px); line-height: 1.05;
  overflow-wrap: anywhere;
}
.contact p:last-child { margin-top: var(--s3); color: var(--c-sub); }

.faq { margin-top: var(--s4); border-top: 1px solid var(--c-border); }
.faq details { border-bottom: 1px solid var(--c-border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 56px; padding: var(--s3) 0;
  font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none;
  width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--accent-line); border-bottom: 2px solid var(--accent-line);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details > div { padding: 0 0 var(--s5); color: var(--c-sub); max-width: 38rem; }
.faq details > div p + p { margin-top: var(--s3); }

.lost { padding: var(--s9) 0 var(--s10); }
.lost h1 { font-size: clamp(56px, 9vw + 16px, 120px); }
.lost p { margin-top: var(--s4); font-size: 19px; color: var(--c-sub); max-width: 28rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4); border-radius: 8px;
  background: var(--accent); color: var(--on-accent);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.btn:hover { background: var(--accent-hover); }
.lost .btn { margin-top: var(--s6); }

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