.routes-notes-page { overflow: hidden; }
.routes-notes-page .routes-notes-hero { padding-block-start: clamp(3.5rem, 7vw, 6rem); }
.routes-notes-hero__grid, .routes-notes-archetypes, .routes-notes-sea-feature, .routes-notes-information-grid, .routes-notes-casino-grid, .routes-notes-final__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.routes-notes-hero__lead { grid-column: span 5; align-self: center; }
.routes-notes-hero__lead .lead { max-width: 56ch; }
.routes-notes-hero__image { grid-column: span 7; width: 100%; min-width: 0; margin: 0; }
.routes-notes-hero__image img { width: 100%; aspect-ratio: 16 / 9; clip-path: var(--clip-panel); }
.routes-notes-status-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.routes-notes-status-cell { min-width: 0; padding: var(--space-3); border: 1px solid var(--color-line); background: var(--color-void-elevated); transition: background-color var(--transition-base), border-color var(--transition-base); }
.routes-notes-status-cell:hover { border-color: var(--color-bio-signal); background: var(--color-surface-raised); }
.routes-notes-status-cell p { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: var(--text-meta); line-height: 1.45; }
.routes-notes-section__intro { width: 100%; max-width: 62ch; margin-bottom: var(--space-6); }
.routes-notes-section__intro--wide { max-width: 64ch; }
.routes-notes-card-grid { display: grid; gap: var(--space-5); }
.routes-notes-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.routes-notes-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.routes-notes-record, .routes-notes-process, .routes-notes-system-card, .routes-notes-infrastructure, .routes-notes-path, .routes-notes-step { min-width: 0; }
.routes-notes-record:hover, .routes-notes-system-card:hover, .routes-notes-path:hover { border-color: var(--color-bio-signal); }
.routes-notes-line-motif { display: flex; gap: var(--space-2); align-items: center; height: 18px; margin-bottom: var(--space-4); }
.routes-notes-line-motif span { display: block; width: 100%; height: 1px; background: var(--color-line); }
.routes-notes-line-motif span:nth-child(2) { width: 45%; background: var(--color-bio-signal); }
.routes-notes-warning-label { color: var(--color-warning); }
.routes-notes-record .signal-bar { margin-bottom: var(--space-3); }
.routes-notes-archetypes__image { grid-column: span 5; width: 100%; margin: 0; align-self: start; }
.routes-notes-archetypes__image img, .routes-notes-sea-feature__image img { width: 100%; aspect-ratio: 3 / 2; clip-path: var(--clip-panel); }
.routes-notes-archetypes__content { grid-column: span 7; }
.routes-notes-archetypes__content .lead { max-width: 62ch; }
.routes-notes-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.routes-notes-profile { min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.routes-notes-route-mark { height: 10px; margin-bottom: var(--space-4); background-repeat: no-repeat; }
.routes-notes-route-mark--dense { background-image: repeating-linear-gradient(90deg, var(--color-text-secondary) 0 12px, transparent 12px 18px); }
.routes-notes-route-mark--broad { background-image: linear-gradient(90deg, var(--color-bio-signal) 0 68%, var(--color-line) 68%); }
.routes-notes-route-mark--mixed { background-image: repeating-linear-gradient(90deg, var(--color-text-secondary) 0 18px, transparent 18px 28px, var(--color-bio-signal) 28px 34px, transparent 34px 48px); }
.routes-notes-process-diagram, .routes-notes-timing-line, .routes-notes-axis { display: flex; min-width: 0; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--color-text-secondary); font-family: var(--font-heading); font-size: var(--text-meta); }
.routes-notes-process-diagram i, .routes-notes-axis i { width: 100%; height: 1px; background: var(--color-warning); }
.routes-notes-timing-line { justify-content: space-between; gap: 0; border-bottom: 1px solid var(--color-line); padding-bottom: var(--space-3); }
.routes-notes-timing-line span { width: 33.333%; min-width: 0; font-size: var(--text-meta); }
.routes-notes-timing-line span:nth-child(2) { text-align: center; color: var(--color-bio-signal); }
.routes-notes-timing-line span:last-child { text-align: right; color: var(--color-warning); }
.routes-notes-weather-rule { width: 100%; height: 3px; margin-bottom: var(--space-4); background: var(--color-line); }
.routes-notes-steps { position: relative; }
.routes-notes-step { display: flex; flex-direction: column; gap: var(--space-3); }
.routes-notes-step h3, .routes-notes-step p { margin: 0; }
.routes-notes-review { display: flex; width: 100%; min-width: 0; min-height: 44px; align-items: center; justify-content: space-between; padding: 0; background: transparent; color: var(--color-text-primary); font-family: var(--font-heading); text-align: left; }
.routes-notes-review span { color: var(--color-bio-signal); font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.routes-notes-review small { color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .08em; }
.routes-notes-review[aria-pressed="true"] small { color: var(--color-bio-signal); }
.routes-notes-sea-feature { margin-bottom: var(--space-6); }
.routes-notes-sea-feature__image { grid-column: span 7; width: 100%; margin: 0; }
.routes-notes-sea-feature__note { grid-column: span 5; align-self: center; }
.routes-notes-sea-feature__note p:not(.coordinate) { max-width: 58ch; }
.routes-notes-deck-stack { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-4); }
.routes-notes-deck-stack span { display: block; width: 100%; padding: 2px var(--space-2); border-left: 2px solid var(--color-bio-signal); background: var(--color-void-elevated); color: var(--color-text-secondary); font-family: var(--font-heading); font-size: var(--text-meta); font-variant-numeric: tabular-nums; }
.routes-notes-axis span { flex: 0 1 auto; white-space: nowrap; }
.routes-notes-information-grid { align-items: stretch; }
.routes-notes-programme { grid-column: span 6; }
.routes-notes-programme p:not(.label):not(.coordinate) { max-width: 52ch; }
.routes-notes-information-stack { display: grid; grid-column: span 6; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-width: 0; }
.routes-notes-info-card { min-width: 0; }
.routes-notes-schedule-detail { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.routes-notes-schedule-detail > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.routes-notes-schedule-detail > div span { padding: var(--space-2); border: 1px solid var(--color-line); color: var(--color-text-secondary); font-size: var(--text-meta); }
.routes-notes-casino-grid { margin-bottom: var(--space-5); }
.routes-notes-casino-card { grid-column: span 6; }
.routes-notes-casino-card figure { margin: 0 0 var(--space-4); }
.routes-notes-casino-card figure img { width: 100%; aspect-ratio: 4 / 3; clip-path: var(--clip-panel); }
.routes-notes-responsible { width: 58.333%; max-width: 48ch; margin: 0; }
.routes-notes-path { display: flex; flex-direction: column; gap: var(--space-4); }
.routes-notes-path h3, .routes-notes-path p { margin: 0; }
.routes-notes-path .button { width: 100%; margin-top: auto; }
.routes-notes-path__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: auto; }
.routes-notes-final__grid { align-items: start; }
.routes-notes-checklist { grid-column: span 8; }
.routes-notes-checklist > ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.routes-notes-checklist li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); }
.routes-notes-checklist li > span { color: var(--color-bio-signal); font-family: var(--font-heading); font-size: var(--text-label); font-weight: 700; font-variant-numeric: tabular-nums; }
.routes-notes-checklist li h3, .routes-notes-checklist li p { margin: 0; }
.routes-notes-checklist li p { margin-top: var(--space-2); }
.routes-notes-checklist__close { max-width: 50ch; padding-top: var(--space-5); }
.routes-notes-coordinate-field { display: flex; grid-column: span 4; min-height: 100%; flex-direction: column; justify-content: flex-end; gap: var(--space-3); padding: var(--space-5); color: var(--color-text-dim); font-family: var(--font-heading); font-size: var(--text-meta); letter-spacing: .12em; }
@media (max-width: 1019px) { .routes-notes-archetypes, .routes-notes-sea-feature { grid-template-columns: repeat(8, minmax(0, 1fr)); } .routes-notes-archetypes__image, .routes-notes-archetypes__content, .routes-notes-sea-feature__image, .routes-notes-sea-feature__note { grid-column: span 8; } .routes-notes-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .routes-notes-profile:last-child { grid-column: span 2; } .routes-notes-sea-feature__note p:not(.coordinate) { max-width: none; } .routes-notes-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .routes-notes-hero__grid, .routes-notes-information-grid, .routes-notes-casino-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .routes-notes-hero__lead, .routes-notes-hero__image { grid-column: span 4; } .routes-notes-hero__lead .lead { max-width: none; } .routes-notes-card-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .routes-notes-card-grid--three > :last-child { grid-column: span 2; } .routes-notes-programme, .routes-notes-information-stack, .routes-notes-casino-card { grid-column: span 8; } .routes-notes-final__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .routes-notes-checklist { grid-column: span 8; } .routes-notes-coordinate-field { display: none; } .routes-notes-responsible { width: 75%; } }
@media (max-width: 799px) { .routes-notes-information-grid, .routes-notes-casino-grid { grid-template-columns: minmax(0, 1fr); } .routes-notes-programme, .routes-notes-information-stack, .routes-notes-casino-card { grid-column: 1; } }
@media (max-width: 639px) { .routes-notes-hero__grid, .routes-notes-archetypes, .routes-notes-sea-feature, .routes-notes-final__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .routes-notes-hero__lead { grid-column: 1; } .routes-notes-hero__image { grid-column: 1; order: 2; } .routes-notes-status-strip, .routes-notes-card-grid--four, .routes-notes-card-grid--three, .routes-notes-profile-grid { grid-template-columns: minmax(0, 1fr); } .routes-notes-card-grid--three > :last-child, .routes-notes-profile:last-child { grid-column: 1; } .routes-notes-archetypes__image, .routes-notes-archetypes__content, .routes-notes-sea-feature__image, .routes-notes-sea-feature__note, .routes-notes-checklist { grid-column: 1; } .routes-notes-archetypes__image { order: 2; } .routes-notes-archetypes__content { order: 1; } .routes-notes-profile-grid { margin-top: var(--space-5); } .routes-notes-sea-feature__image { order: 1; } .routes-notes-sea-feature__note { order: 2; } .routes-notes-section__intro, .routes-notes-section__intro--wide { max-width: none; } .routes-notes-responsible { width: 100%; max-width: none; } .routes-notes-timing-line { flex-direction: column; align-items: stretch; gap: var(--space-2); } .routes-notes-timing-line span, .routes-notes-timing-line span:nth-child(2), .routes-notes-timing-line span:last-child { width: 100%; text-align: left; } .routes-notes-schedule-detail > div { grid-template-columns: minmax(0, 1fr); } .routes-notes-page .lab-grid { background-image: none; } }
@media (prefers-reduced-motion: reduce) { .routes-notes-status-cell, .routes-notes-record, .routes-notes-system-card, .routes-notes-path { transition: none; } }