/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · genre: atmospheric · macrostructure: Catalogue/card rail · variation: enlarged tilted cards + direct tap-to-centre + activity-image ambient field · theme: studied-DNA (user video reference) · paper: oklch(98.5% .006 78) · accent: oklch(70% .19 49) · display: Avenir Next · body: SF Pro Text/Noto Sans TC · nav: N9 · footer: Ft2 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34,49,50–57) */
:root{
  color-scheme:dark;
  --font-display:"Avenir Next","Helvetica Neue","Noto Sans TC","PingFang TC",sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Noto Sans TC","PingFang TC",sans-serif;
  --color-ink:oklch(20% .018 260);
  --color-ink-2:oklch(35% .025 260);
  --color-paper:oklch(98.5% .006 78);
  --color-paper-2:oklch(94.5% .008 78);
  --color-paper-3:oklch(90% .01 78);
  --color-muted:oklch(44% .018 260);
  --color-neutral:oklch(35% .02 260);
  --color-rule:oklch(79% .012 260);
  --color-night:oklch(14% .022 260);
  --color-night-text:oklch(97% .006 78);
  --color-night-muted:oklch(83% .012 78);
  --color-shadow:oklch(8% .025 260 / .38);
  --color-scrim:oklch(8% .026 260 / .58);
  --color-scrim-heavy:oklch(7% .025 260 / .8);
  --color-ambient-scrim-top:oklch(7% .026 260 / .5);
  --color-ambient-scrim-mid:oklch(9% .024 260 / .32);
  --color-ambient-scrim-bottom:oklch(7% .026 260 / .62);
  --color-surface-dark:oklch(20% .025 260 / .9);
  --color-surface-dark-hover:oklch(25% .027 260 / .94);
  --color-surface-light:oklch(99% .006 78 / .15);
  --color-surface-light-hover:oklch(99% .006 78 / .24);
  --color-transparent:oklch(8% .025 260 / 0);
  --color-focus:#315efb;
  --color-accent:#f28c28;
  --color-accent-deep:#a84b00;
  --color-accent-ink:#3b1a00;
  --color-danger:oklch(60% .19 25);
  --color-success:oklch(69% .14 155);
  --color-future-line:oklch(61% .012 260);
  --color-complete-bg:oklch(28% .02 260);
  --color-complete-ink:oklch(93% .008 78);
  --color-current-bg:oklch(99% .01 78);
  --color-current-ink:oklch(18% .02 260);
  --color-upcoming-bg:oklch(96.5% .008 78);
  --color-upcoming-ink:oklch(24% .02 260);
  --color-placeholder-a:oklch(49% .09 232);
  --color-placeholder-b:oklch(68% .12 72);
  --color-placeholder-c:oklch(42% .11 162);
  --color-placeholder-d:oklch(70% .08 32);
  --placeholder-0:linear-gradient(145deg,var(--color-placeholder-a),var(--color-placeholder-b));
  --placeholder-1:linear-gradient(145deg,var(--color-placeholder-c),var(--color-placeholder-d));
  --placeholder-2:linear-gradient(145deg,var(--color-placeholder-b),var(--color-placeholder-a));
  --placeholder-3:linear-gradient(145deg,var(--color-placeholder-d),var(--color-placeholder-c));
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --radius-sm:.75rem;
  --radius-md:1.1rem;
  --radius-lg:1.65rem;
  --radius-pill:999px;
  --shadow-card:0 .15rem .45rem oklch(8% .025 260 / .16);
  --dur-instant:100ms;
  --dur-short:180ms;
  --dur-medium:280ms;
  --dur-long:480ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --z-background:0;
  --z-base:1;
  --content-max:68rem;
  --card-width:clamp(13.75rem,72vw,19rem);
  --card-edge-fade:clamp(.3rem,.55vw,.45rem);
}

*{box-sizing:border-box}
html{min-width:320px;scroll-behavior:smooth;background:var(--color-night);overflow-x:hidden;overflow-x:clip;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{
  min-width:320px;
  min-height:100vh;
  min-height:100svh;
  margin:0;
  color:var(--color-night-text);
  background:var(--color-night);
  font-family:var(--font-body);
  line-height:1.5;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
button,input,a{font:inherit}
button{touch-action:manipulation}
a{color:inherit}
[hidden]{display:none!important}

.ambient{position:fixed;inset:-2rem;z-index:var(--z-background);overflow:hidden;background:var(--color-night);pointer-events:none}
.ambient__layer{
  position:absolute;
  inset:-2rem;
  background-position:center;
  background-size:cover;
  filter:blur(3rem) saturate(1.02) brightness(.72);
  opacity:0;
  transform:scale(1.12);
  transition:opacity var(--dur-long) var(--ease-in-out);
}
.ambient__layer.is-visible{opacity:1}
.ambient__scrim{position:absolute;inset:0;background:linear-gradient(180deg,var(--color-ambient-scrim-top),var(--color-ambient-scrim-mid) 48%,var(--color-ambient-scrim-bottom))}

.app-shell{position:relative;z-index:var(--z-base);min-height:100vh;min-height:100svh;padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom))}
.topbar{
  width:min(100%,var(--content-max));
  min-height:4.25rem;
  margin:0 auto;
  padding:calc(var(--space-3) + env(safe-area-inset-top)) max(var(--space-4),env(safe-area-inset-right)) var(--space-2) max(var(--space-4),env(safe-area-inset-left));
  display:grid;
  grid-template-columns:2.25rem minmax(0,1fr) 2.25rem;
  align-items:center;
  column-gap:var(--space-2);
}
.view-switch{
  width:2.25rem;
  height:2.25rem;
  display:grid;
  place-items:center;
  border:1px solid var(--color-surface-light-hover);
  border-radius:var(--radius-pill);
  background:var(--color-surface-dark);
  color:var(--color-night-text);
  box-shadow:0 .4rem 1.2rem var(--color-shadow);
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-instant) var(--ease-out),opacity var(--dur-short) var(--ease-out);
}
.view-switch{position:relative;grid-column:1;grid-row:1 / span 2;font-size:1.05rem;font-weight:700;line-height:1}
.view-switch::before,.cover-upload::before{content:"";position:absolute;inset:-.25rem;border-radius:inherit}
.topbar__copy{grid-column:2;min-width:0;text-align:center}
.topbar__eyebrow{margin:0;color:var(--color-night-muted);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.topbar__title{margin:0;font-family:var(--font-display);font-size:clamp(.84rem,3.7vw,1.08rem);font-weight:720;line-height:1.2;letter-spacing:-.02em;text-align:center;text-wrap:balance;overflow-wrap:anywhere}
.sync-state{grid-column:2;max-width:100%;margin-top:var(--space-1);color:var(--color-night-muted);font-size:.72rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sync-state[data-tone="success"]{color:var(--color-success)}
.sync-state[data-tone="error"]{color:var(--color-night-muted)}

.catalogue{padding:var(--space-1) 0 var(--space-3)}
.swipe-tutorial{
  width:max-content;
  max-width:calc(100% - 2rem);
  min-height:2rem;
  margin:0 auto var(--space-1);
  padding:var(--space-1) var(--space-3);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  border:1px solid var(--color-surface-light-hover);
  border-radius:var(--radius-pill);
  background:var(--color-surface-dark);
  color:var(--color-night-muted);
  box-shadow:0 .35rem 1rem var(--color-shadow);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
  opacity:1;
  transform:translateY(0);
  transition:opacity var(--dur-short) var(--ease-in),transform var(--dur-short) var(--ease-in);
}
.swipe-tutorial.is-hiding{opacity:0;transform:translateY(-.25rem);pointer-events:none}
.swipe-tutorial__arrows{display:inline-block;color:var(--color-night-text);font-size:.78rem;animation:swipe-tutorial-nudge 900ms var(--ease-in-out) 2}
@keyframes swipe-tutorial-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(.25rem)}}

.card-stage{
  position:relative;
  width:100%;
  margin:0 auto;
  overflow:hidden;
}
.keyboard-focus-hint{position:absolute;z-index:6;right:max(var(--space-4),env(safe-area-inset-right));bottom:var(--space-2);margin:0;padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);background:var(--color-surface-dark-hover);color:var(--color-night-text);font-size:.72rem;font-weight:700;opacity:0;pointer-events:none;transform:translateY(.2rem);transition:opacity var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out)}
.card-rail:focus-visible + .keyboard-focus-hint{opacity:1;transform:translateY(0)}
.card-rail{
  width:100%;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  overflow-x:auto;
  overflow-y:hidden;
  padding-block:var(--space-3) var(--space-4);
  padding-inline:max(var(--space-4),calc((100% - var(--card-width))/2));
  scroll-padding-inline:max(var(--space-4),calc((100% - var(--card-width))/2));
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  cursor:grab;
}
.card-rail::-webkit-scrollbar{display:none}
.card-rail.is-dragging{scroll-snap-type:none;cursor:grabbing}
.card-rail.is-dragging .day-card{cursor:grabbing}
.day-position{margin:0;color:var(--color-night-muted);font-size:.75rem;font-variant-numeric:tabular-nums;text-align:center}

.day-card{
  --card-tilt:-.9deg;
  position:relative;
  flex:0 0 var(--card-width);
  width:var(--card-width);
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:var(--radius-lg);
  isolation:isolate;
  background:transparent;
  color:var(--color-night-text);
  box-shadow:0 .1rem .35rem oklch(8% .025 260 / .14);
  opacity:.68;
  transform:rotate(var(--card-tilt)) scale(.94);
  transform-origin:center 58%;
  scroll-snap-align:center;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  transition:opacity var(--dur-short) var(--ease-out),transform var(--dur-medium) var(--ease-out),box-shadow var(--dur-medium) var(--ease-out);
}
.day-card__visual{
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  background:var(--card-placeholder,var(--placeholder-0));
  background-position:center;
  background-size:cover;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.72) 0,#000 var(--card-edge-fade),#000 calc(100% - var(--card-edge-fade)),rgba(0,0,0,.72) 100%),linear-gradient(to bottom,rgba(0,0,0,.72) 0,#000 var(--card-edge-fade),#000 calc(100% - var(--card-edge-fade)),rgba(0,0,0,.72) 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,rgba(0,0,0,.72) 0,#000 var(--card-edge-fade),#000 calc(100% - var(--card-edge-fade)),rgba(0,0,0,.72) 100%),linear-gradient(to bottom,rgba(0,0,0,.72) 0,#000 var(--card-edge-fade),#000 calc(100% - var(--card-edge-fade)),rgba(0,0,0,.72) 100%);
  mask-composite:intersect;
}
.day-card:nth-child(4n+1){--card-tilt:-1.1deg}
.day-card:nth-child(4n+2){--card-tilt:.75deg}
.day-card:nth-child(4n+3){--card-tilt:-.65deg}
.day-card:nth-child(4n){--card-tilt:1.05deg}
.day-card.is-selected{opacity:1;transform:translateY(-.25rem) rotate(var(--card-tilt)) scale(1);box-shadow:var(--shadow-card)}
.day-card:active{transform:rotate(var(--card-tilt)) scale(.92)}
.day-card.is-selected:active{transform:translateY(-.25rem) rotate(var(--card-tilt)) scale(.98)}
.day-card[aria-disabled="true"]{opacity:.42;cursor:not-allowed;pointer-events:none}
.day-card__image{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.day-card__shade{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,var(--color-surface-light) 0%,var(--color-transparent) 30%,var(--color-scrim-heavy) 100%);pointer-events:none}
.day-card__copy{position:absolute;z-index:2;inset:auto var(--space-4) var(--space-4);pointer-events:none;text-shadow:0 .12rem .65rem var(--color-shadow)}
.day-card__date{display:block;margin-bottom:var(--space-1);color:var(--color-night-muted);font-size:.75rem;font-weight:700;letter-spacing:.04em}
.day-card__title{display:block;font-family:var(--font-display);font-size:clamp(1.15rem,4.5vw,1.55rem);font-weight:760;line-height:1.06;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:anywhere}
.day-card__target{display:block;margin-top:var(--space-2);color:var(--color-night-muted);font-size:.72rem;line-height:1.35;overflow-wrap:anywhere}
.cover-upload{
  position:absolute;
  z-index:4;
  top:var(--space-3);
  right:var(--space-3);
  width:2.25rem;
  height:2.25rem;
  display:grid;
  place-items:center;
  border:1px solid var(--color-surface-light-hover);
  border-radius:var(--radius-pill);
  background:var(--color-surface-dark);
  color:var(--color-night-text);
  font-size:1.18rem;
  font-weight:350;
  line-height:1;
  cursor:pointer;
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-instant) var(--ease-out),opacity var(--dur-short) var(--ease-out);
}
.cover-upload[aria-busy="true"]{opacity:.62;cursor:wait}
.cover-upload[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.cover-upload[data-state="error"]{outline:2px solid var(--color-danger);outline-offset:2px}
.cover-upload[data-state="success"]{background:var(--color-success);color:var(--color-ink)}
.media-credit{
  position:absolute;
  z-index:3;
  top:var(--space-3);
  left:var(--space-3);
  max-width:calc(100% - 4.75rem);
  min-height:2.75rem;
  display:flex;
  align-items:center;
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--color-surface-light-hover);
  border-radius:var(--radius-pill);
  background:var(--color-surface-dark);
  color:var(--color-night-muted);
  font-size:.72rem;
  line-height:1.25;
  overflow:hidden;
}
.media-credit a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-underline-offset:.15rem}

.details{
  width:100%;
  margin:0 auto;
  padding-block:var(--space-4) var(--space-6);
  padding-left:max(var(--space-4),env(safe-area-inset-left));
  padding-right:max(var(--space-4),env(safe-area-inset-right));
  background:var(--color-paper);
  color:var(--color-ink);
}
.details__head{width:min(100%,var(--content-max));margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-1);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-rule)}
.details__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-width:0}
.details__kicker{min-width:0;margin:0;color:var(--color-muted);font-size:.75rem;font-weight:720;letter-spacing:.08em;text-transform:uppercase;overflow-wrap:anywhere}
.details__title{min-width:0;margin:0;font-family:var(--font-display);font-size:clamp(1.42rem,5vw,2.6rem);font-weight:760;line-height:1.04;letter-spacing:-.045em;text-wrap:balance;overflow-wrap:anywhere}
.details__status{flex:0 0 auto;padding:var(--space-1) var(--space-2);border:1px solid var(--color-rule);border-radius:var(--radius-pill);color:var(--color-neutral);font-size:.72rem;font-weight:700;white-space:nowrap}
.details__hint{width:min(100%,var(--content-max));margin:var(--space-2) auto 0;color:var(--color-muted);font-size:.75rem}

.timeline{position:relative;width:min(100%,var(--content-max));margin:var(--space-4) auto 0;padding:0;list-style:none}
.timeline-item{position:relative;display:grid;grid-template-columns:2.125rem minmax(0,1fr);gap:var(--space-2);padding-bottom:var(--space-4)}
.timeline-item:last-child{padding-bottom:0}
.timeline-item__time{padding-top:var(--space-2);color:var(--color-muted);font-size:.7rem;font-weight:700;text-align:right;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.timeline-item__rail{position:absolute;top:0;bottom:0;left:2.59rem;width:.14rem;border-left:.1rem dashed var(--color-future-line)}
.timeline-item:first-child .timeline-item__rail{top:1rem}
.timeline-item:last-child .timeline-item__rail{bottom:auto;height:1rem}
.timeline-item__node{position:absolute;z-index:1;top:.78rem;left:2.31rem;width:.58rem;height:.58rem;border:.1rem solid var(--color-future-line);border-radius:50%;background:var(--color-paper)}
.timeline-block{min-width:0;padding:var(--space-3);border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-upcoming-bg);color:var(--color-upcoming-ink)}
.timeline-block__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2)}
.timeline-block__meta.is-state-only{justify-content:flex-end}
.timeline-block__kind{color:var(--color-muted);font-size:.7rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase}
.timeline-block__meta-actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap}
.timeline-block__state{color:var(--color-muted);font-size:.7rem;white-space:nowrap}
.navigation-link::before{content:"";position:absolute;inset:-.25rem;border-radius:inherit}
.timeline-block__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
.timeline-block__layout.has-note{grid-template-columns:minmax(0,1fr) minmax(5.25rem,28%);align-items:start;gap:var(--space-2)}
.timeline-block__main{min-width:0}
.timeline-block__destination-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-2)}
.timeline-block__title{margin:0;font-family:var(--font-display);font-size:clamp(.92rem,3vw,1.12rem);font-weight:730;line-height:1.25;overflow-wrap:anywhere}
.timeline-block__sub{max-width:68ch;margin:var(--space-2) 0 0;color:var(--color-neutral);font-size:.72rem;overflow-wrap:anywhere}
.timeline-block__note{min-width:0;padding-inline-start:var(--space-2);border-inline-start:1px solid var(--color-rule)}
.timeline-block__note-label{display:block;margin-bottom:var(--space-1);color:var(--color-muted);font-size:.7rem;font-weight:760;letter-spacing:.07em}
.timeline-block__note-text{margin:0;color:var(--color-neutral);font-size:.75rem;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.navigation-actions{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap}
.timeline-block__destination-row .navigation-actions{margin-top:0}
.location-navigation-actions{justify-content:flex-end}
.location-logo-actions{align-self:center}
.navigation-link{
  position:relative;
  min-height:2.75rem;
  display:inline-flex;
  align-items:center;
  padding:0 var(--space-2);
  border:1px solid var(--color-rule);
  border-radius:var(--radius-pill);
  background:var(--color-paper);
  color:var(--color-neutral);
  font-size:.72rem;
  font-weight:700;
  text-decoration:none;
  white-space:normal;
  transition:background-color var(--dur-short) var(--ease-out),transform var(--dur-instant) var(--ease-out);
}
.navigation-link--quiet{text-decoration:underline;text-underline-offset:.18rem}
.activity-routes{margin-top:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--color-rule)}
.activity-routes__label{margin:0 0 var(--space-1);color:var(--color-muted);font-size:.7rem;font-weight:760;letter-spacing:.07em}
.activity-route{padding:var(--space-2) 0;border-top:1px solid color-mix(in oklch,var(--color-rule) 68%,var(--color-transparent))}
.activity-route:first-of-type{border-top:0}
.activity-route__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.activity-route__title{min-width:0;color:var(--color-neutral);font-size:.7rem;line-height:1.3;overflow-wrap:anywhere}
.activity-route__path,.activity-route__meta{margin:var(--space-1) 0 0;color:var(--color-neutral);font-size:.72rem;line-height:1.4;overflow-wrap:anywhere}
.activity-route__meta{color:var(--color-muted)}
.activity-route__related{position:relative;min-height:2.75rem;display:inline-flex;align-items:center;margin-top:var(--space-1);color:var(--color-neutral);font-size:.72rem;font-weight:700;text-underline-offset:.18rem}
.activity-route__related::before{content:"";position:absolute;inset:-.25rem}
.route-logo-actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--space-1)}
.route-logo-link{
  position:relative;
  width:2.75rem;
  height:2.75rem;
  display:grid;
  place-items:center;
  border:0;
  border-radius:0;
  background:transparent;
  text-decoration:none;
  transition:transform var(--dur-instant) var(--ease-out),opacity var(--dur-short) var(--ease-out);
}
.route-logo-link::before{content:"";position:absolute;inset:-.25rem}
.route-logo-link img{display:block;width:1.85rem;height:1.85rem;object-fit:contain}
.timeline-item.is-current .timeline-item__rail{border-left-style:solid;border-left-color:var(--color-accent)}
.timeline-item.is-current .timeline-item__node{border-color:var(--color-accent);background:var(--color-accent);box-shadow:0 0 0 .3rem color-mix(in oklch,var(--color-accent) 20%,var(--color-transparent))}
.timeline-item.is-current .timeline-block{border-color:var(--color-rule);background:var(--color-current-bg);color:var(--color-current-ink);box-shadow:0 .55rem 1.4rem var(--color-shadow-soft)}
.timeline-item.is-current .timeline-block__kind,.timeline-item.is-current .timeline-block__state{color:var(--color-muted)}
.timeline-item.is-completed .timeline-block{border-color:var(--color-complete-bg);background:var(--color-complete-bg);color:var(--color-complete-ink);filter:saturate(.55)}
.timeline-item.is-completed .timeline-block__kind,.timeline-item.is-completed .timeline-block__state,.timeline-item.is-completed .timeline-block__sub,.timeline-item.is-completed .timeline-block__note-label,.timeline-item.is-completed .timeline-block__note-text{color:var(--color-night-muted)}
.timeline-item.is-completed .timeline-block__note{border-inline-start-color:var(--color-surface-light-hover)}
.timeline-item.is-completed .activity-routes,.timeline-item.is-completed .activity-route{border-color:var(--color-surface-light-hover)}
.timeline-item.is-completed .activity-route__title,.timeline-item.is-completed .activity-route__path,.timeline-item.is-completed .activity-route__meta,.timeline-item.is-completed .activity-route__related{color:var(--color-night-muted)}
.timeline-item.is-completed .navigation-link{border-color:var(--color-surface-light-hover);background:var(--color-surface-dark);color:var(--color-night-text)}
.timeline-item.is-completed .route-logo-link{opacity:.72}

.notes{width:min(100%,var(--content-max));margin:var(--space-3) auto 0;padding:var(--space-3);border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-paper-2)}
.notes__label{margin:0 0 var(--space-2);color:var(--color-muted);font-size:.72rem;font-weight:760;letter-spacing:.08em;text-transform:uppercase}
.notes__text{max-width:68ch;margin:0;color:var(--color-neutral);font-size:.78rem;white-space:pre-wrap;overflow-wrap:anywhere}
.empty-timeline{padding:var(--space-6) 0;color:var(--color-muted);text-align:center}
.footer{width:min(calc(100% - 2rem),var(--content-max));margin:var(--space-5) auto 0;color:var(--color-night-muted);font-size:.72rem;text-align:center}
.toast{
  position:fixed;
  z-index:20;
  left:50%;
  bottom:calc(var(--space-5) + env(safe-area-inset-bottom));
  max-width:calc(100% - 2rem);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-surface-light-hover);
  border-radius:var(--radius-pill);
  background:var(--color-surface-dark-hover);
  color:var(--color-night-text);
  box-shadow:var(--shadow-card);
  font-size:.78rem;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,.5rem);
  transition:opacity var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.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}

:focus{outline:none}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.card-rail:focus-visible,.day-card:focus-visible{outline:none}
.view-switch:active,.cover-upload:active,.navigation-link:active,.route-logo-link:active{transform:translateY(1px)}
@media(hover:hover) and (pointer:fine){
  .view-switch:hover,.cover-upload:hover{background:var(--color-surface-dark-hover)}
  .day-card:not(.is-selected):hover{opacity:.84}
  .navigation-link:hover{background:var(--color-paper-2)}
  .route-logo-link:hover{opacity:.72}
  .timeline-item.is-completed .navigation-link:hover{background:var(--color-surface-dark-hover)}
}

@media(min-width:40rem){
  :root{--card-width:clamp(18.5rem,42vw,25rem)}
  .topbar{grid-template-columns:2.25rem minmax(0,1fr) 2.25rem}
  .catalogue{padding-top:var(--space-2)}
  .card-rail{gap:var(--space-4)}
  .details{padding-left:max(var(--space-5),env(safe-area-inset-left),calc((100% - var(--content-max))/2 + var(--space-5)));padding-right:max(var(--space-5),env(safe-area-inset-right),calc((100% - var(--content-max))/2 + var(--space-5)))}
  .timeline-item{grid-template-columns:3rem minmax(0,1fr);gap:var(--space-3)}
  .timeline-item__time{font-size:.64rem}
  .timeline-item__rail{left:3.63rem}
  .timeline-item__node{left:3.34rem}
  .timeline-block__layout.has-note{grid-template-columns:minmax(0,1fr) minmax(10rem,30%);gap:var(--space-3)}
  .timeline-block__note{padding-inline-start:var(--space-3)}
}

@media(max-height:30rem) and (orientation:landscape){
  :root{--card-width:clamp(10.5rem,48vh,13.5rem)}
  .topbar{min-height:3.5rem;padding-top:max(var(--space-2),env(safe-area-inset-top));padding-bottom:var(--space-1)}
  .catalogue{padding-top:0}
  .card-rail{padding-block:var(--space-2)}
}

@media(max-width:30rem){
  .timeline-block__layout.has-note{grid-template-columns:minmax(0,1fr)}
  .timeline-block__note{padding-top:var(--space-2);padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--color-rule)}
}

@media(min-width:60rem){
  :root{--card-width:clamp(23rem,31vw,31rem)}
  .card-rail{gap:var(--space-5)}
  .timeline-block{padding:var(--space-4)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ambient__layer{transition-duration:150ms}
  .toast{transition:opacity 150ms var(--ease-out)}
  .view-switch,.day-card,.cover-upload,.navigation-link,.route-logo-link,.swipe-tutorial{transition:none}
  .keyboard-focus-hint{transition:none}
  .swipe-tutorial__arrows{animation:none}
  .view-switch:active,.cover-upload:active,.navigation-link:active,.route-logo-link:active{transform:none}
  .day-card:active{transform:rotate(var(--card-tilt)) scale(.94)}
  .day-card.is-selected:active{transform:rotate(var(--card-tilt)) scale(1)}
}

@media print{
  .ambient,.topbar,.catalogue,.footer,.toast,.details__hint,.route-logo-actions{display:none!important}
  body{background:var(--color-paper);color:var(--color-ink)}
  .details{width:100%;padding:0}
  .timeline-item{break-inside:avoid}
}