/* Standalone /reise. All measured hop addresses come from the probe API. */
.reise-page { width: min(1200px, 100%); max-width: 1200px; position: relative; z-index: 2; }
.reise-header { margin: 2rem 0 2.5rem; }
.reise-header h1 { font-size: clamp(1.8rem, 6vw, 3rem); color: #4cc2b4; font-weight: 500; }
.reise-header p { max-width: 62ch; color: #a0b3c2; }
.journey { color: #c9d5e1; }
.journey section { animation: none; }
.journey h2::before { content: none; }
.eyebrow { color: #819bab; font-size: .6rem; letter-spacing: .13em; }
.endpoint-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.endpoint { padding: 1.3rem; border: 1px solid #243a45; border-radius: 8px; background: #0d161de6; min-width: 0; }
.endpoint-heading { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.endpoint-heading h2 { font-size: .88rem; color: #d7e7e9; line-height: 1.5; margin: .25rem 0 0; }
.device-icon { width: 56px; height: 56px; flex: 0 0 56px; fill: none; stroke: #4cc2b4; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.endpoint dl { display: block; font-size: .7rem; line-height: 1.6; }
.endpoint dt { color: #839ba9; font-size: .6rem; margin: .8rem 0 .2rem; }
.endpoint dd { margin: 0; color: #d8e7e8; overflow-wrap: anywhere; }
.endpoint p { font-size: .65rem; }
.endpoint .device-note { color: #8197a7; font-size: .6rem; margin-top: 1.2rem; }
.trace-section { margin-top: 3.5rem; }
.trace-heading { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.trace-heading h2 { color: #e5d4b0; font-size: clamp(1.2rem, 4vw, 1.6rem); font-weight: 500; margin: .5rem 0; }
.trace-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .7rem; }
.trace-controls label { color: #9eb2bf; }
.trace-family { background: #0e1e26; border: 1px solid #32665f; color: #c9e7df; font: inherit; padding: .5rem; border-radius: 4px; margin-left: .3rem; }
.journey-button { color: #aaf0df; background: #102a2b; font: inherit; border: 1px solid #32665f; border-radius: 4px; padding: .6rem .85rem; cursor: pointer; }
.journey-button:hover:not(:disabled) { background: #183737; }
.journey-button:disabled, .trace-family:disabled { opacity: .5; cursor: wait; }
.journey-button:focus-visible, .trace-family:focus-visible { outline: 2px solid #d8b26a; outline-offset: 4px; }
.trace-note, .trace-footnote { font-size: .65rem; color: #8ca3b4; max-width: 100ch; line-height: 1.8; margin: 1rem 0; }
.trace-status { color: #afd6ce; font-size: .7rem; line-height: 1.8; overflow-wrap: anywhere; margin: 1.5rem 0; }
.trace-route { list-style: none; margin: 1rem 0 2rem; padding: 0; }
.trace-node { display: flex; align-items: center; gap: 1.3rem; min-height: 76px; padding: .6rem 0; position: relative; }
.trace-node:not(:last-child)::after { content: ''; position: absolute; top: 50%; left: 27px; height: 100%; width: 1px; background: #2f665e; z-index: -1; }
.trace-node:has(+ .unreached)::after, .silent-hop::after { background: repeating-linear-gradient(to bottom, #58675f 0 3px, transparent 3px 9px); }
.trace-symbol { width: 56px; flex: 0 0 56px; display: grid; place-items: center; background: #0a0e13; }
.trace-symbol .device-icon { height: 64px; }
.hop-number { border: 1px solid #32665f; border-radius: 50%; background: #0d1c22; color: #92d5c5; width: 30px; height: 30px; display: grid; place-items: center; font-size: .65rem; }
.silent-hop .hop-number { border-style: dashed; color: #8197a7; }
.trace-copy { min-width: 0; }
.trace-address { display: block; font-size: .82rem; color: #d7e7e9; overflow-wrap: anywhere; }
.trace-detail { display: block; font-size: .6rem; color: #8ca3b4; margin-top: .3rem; }
.trace-origin .trace-address, .reached .trace-address { color: #4cc2b4; }
.unreached .trace-detail, .silent-hop .trace-address { color: #b5a889; }
.journey[data-measuring="true"] .trace-origin .device-icon { animation: probing 1.5s ease-in-out infinite; }
@keyframes probing { 50% { opacity: .35; } }
.reise-controls { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 2rem 0; font-size: .7rem; }
.reise-fallback { border-left: 1px solid #4cc2b4; padding: 1rem; color: #a0b3c2; }
@media (max-width: 850px) {
  .endpoint-grid { grid-template-columns: 1fr; }
  .endpoint { padding: 1rem; }
  .endpoint dl { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .7rem; align-items: baseline; }
  .endpoint dt { margin: 0; }
  .endpoint-heading { margin-bottom: 1rem; }
  .trace-node { gap: .8rem; }
  .trace-section { margin-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .journey[data-measuring="true"] .trace-origin .device-icon { animation: none; }
}