.route-desk {
  --route-ink: #172326;
  --route-paper: #fff8df;
  --route-coral: #e95f49;
  --route-blue: #257185;
  width: min(100% - 28px, 1120px);
  margin: 20px auto 44px;
  color: var(--route-ink);
  font-family: Arial, Helvetica, sans-serif;
}

.route-desk [hidden] { display: none !important; }

.route-desk-heading {
  display: flex;
  gap: 24px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 16px;
}

.route-desk-heading p,
.route-desk-form-heading p,
.route-desk-replay-panel header p,
.route-desk-footer { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-desk-heading p { max-width: 55ch; margin: 7px 0 0; font-size: 0.78rem; line-height: 1.5; }
.route-desk-heading > div > p:first-child { margin: 0 0 5px; color: var(--route-coral); font-weight: 900; letter-spacing: 0.08em; }
.route-desk-heading h1 { max-width: 760px; margin: 0; font-size: clamp(2rem, 5vw, 4.6rem); letter-spacing: -0.065em; line-height: 0.94; text-wrap: balance; }
.route-desk-office-mark { flex: 0 0 auto; padding: 10px 13px; border: 3px double var(--route-coral); color: var(--route-coral); font: 900 0.64rem/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em; text-align: center; transform: rotate(3deg); }

.route-desk-paper { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); min-width: 0; overflow: hidden; border: 2px solid var(--route-ink); background: var(--route-paper); box-shadow: 9px 10px 0 #d9caa8; }
.route-desk-paper::before { position: absolute; inset: 7px; border: 1px solid rgba(23, 35, 38, 0.24); content: ""; pointer-events: none; }
.route-desk-stub { position: relative; z-index: 1; display: grid; min-height: 390px; padding: 22px 12px; place-items: center; border-right: 2px dashed var(--route-ink); background: #f4cf68; text-align: center; }
.route-desk-stub span { font: 900 0.62rem/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace; writing-mode: vertical-rl; transform: rotate(180deg); }
.route-desk-stub strong { font-size: 4rem; letter-spacing: -0.09em; line-height: 1; }
.route-desk-stub small { font: 900 0.55rem/1.45 ui-monospace, "SFMono-Regular", Menlo, monospace; }

.route-desk-form,
.route-desk-saved-ticket { position: relative; z-index: 1; min-width: 0; padding: 26px; }
.route-desk-form-heading { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.route-desk-form-heading p { margin: 0; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.07em; }
.route-desk-form-heading span { flex: 0 0 auto; padding: 5px 7px; color: #fff; background: var(--route-blue); font: 900 0.62rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }

.route-desk-leaves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--route-ink); background: #fffdf5; }
.route-desk-leaf { position: relative; min-width: 0; margin: 0; padding: 17px; border: 0; }
.route-desk-leaf + .route-desk-leaf { border-left: 2px dashed var(--route-ink); }
.route-desk-leaf legend { padding: 0 4px; color: var(--route-blue); font: 900 0.61rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.05em; }
.route-desk-leaf legend span { color: var(--route-coral); }
.route-desk-leaf h2 { min-height: 2.4em; margin: 5px 0 13px; font-size: 1rem; line-height: 1.2; }
.route-desk-leaf h2:focus,
.route-desk-replay-panel:focus,
.route-desk-saved-ticket:focus { outline: 3px solid var(--route-blue); outline-offset: 4px; }
.route-desk-choices { display: grid; gap: 8px; }
.route-desk-choices button { display: grid; min-width: 0; min-height: 74px; padding: 9px; grid-template-columns: 25px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 7px; border: 1px solid var(--route-ink); color: var(--route-ink); background: transparent; text-align: left; cursor: pointer; }
.route-desk-choices button > span { grid-row: 1 / 3; color: var(--route-coral); font-size: 1.15rem; }
.route-desk-choices button strong { font-size: 0.79rem; line-height: 1.15; }
.route-desk-choices button small { margin-top: 3px; color: #465255; font-size: 0.66rem; line-height: 1.3; }
.route-desk-choices button:hover { background: #f7eabe; }
.route-desk-choices button:focus-visible,
.route-desk-finish button:focus-visible,
.route-desk-saved-summary button:focus-visible { outline: 3px solid var(--route-blue); outline-offset: 3px; }
.route-desk-choices button[aria-pressed="true"] { background: #f4cf68; box-shadow: inset 5px 0 0 var(--route-coral); }
.route-desk-stamp { position: absolute; right: 9px; bottom: 7px; display: none; padding: 5px 7px; border: 3px double var(--route-coral); border-radius: 50%; color: var(--route-coral); font: 900 0.48rem/1.1 ui-monospace, "SFMono-Regular", Menlo, monospace; text-align: center; transform: rotate(-9deg); pointer-events: none; }
.route-desk-leaf[data-stamp-state="stamped"] .route-desk-stamp { display: block; animation: route-stamp 240ms cubic-bezier(0.2, 0.9, 0.3, 1.35) both; }

.route-desk-finish { display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 14px; border: 2px solid var(--route-ink); background: #fffdf5; }
.route-desk-finish > div { display: grid; min-width: 0; gap: 3px; }
.route-desk-finish small { color: var(--route-coral); font: 900 0.55rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-desk-finish strong { overflow-wrap: anywhere; font-size: 1.15rem; }
.route-desk-finish p { margin: 0; color: #465255; font-size: 0.7rem; }
.route-desk-finish button,
.route-desk-saved-summary button { display: flex; flex: 0 0 auto; gap: 22px; align-items: center; padding: 10px 12px; border: 2px solid var(--route-ink); color: #fff; background: var(--route-ink); text-align: left; cursor: pointer; box-shadow: 4px 4px 0 var(--route-coral); }
.route-desk-finish button span,
.route-desk-saved-summary button span { display: grid; gap: 2px; }
.route-desk-finish button small,
.route-desk-saved-summary button small { color: #f4cf68; font: 800 0.5rem/1.1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-desk-finish button strong,
.route-desk-saved-summary button strong { font-size: 0.78rem; }
.route-desk-finish button b,
.route-desk-saved-summary button b { font-size: 1.3rem; }
.route-desk-status { margin: 12px 0 0; color: #465255; font-size: 0.73rem; line-height: 1.4; }

.route-desk-saved-ticket { display: grid; align-content: center; min-height: 390px; }
.route-desk-saved-summary { display: grid; min-width: 0; padding: 24px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; border: 2px solid var(--route-ink); background: #fffdf5; box-shadow: inset 0 -9px 0 #f4cf68; }
.route-desk-punches { display: flex; flex-direction: column; gap: 15px; }
.route-desk-punches i { display: block; width: 16px; height: 16px; border: 2px solid var(--route-ink); border-radius: 50%; background: var(--route-paper); box-shadow: inset 0 0 0 3px #fffdf5; }
.route-desk-saved-summary small { color: var(--route-coral); font: 900 0.57rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-desk-saved-summary h2 { margin: 4px 0; font-size: clamp(1.45rem, 4vw, 2.6rem); letter-spacing: -0.045em; line-height: 1; overflow-wrap: anywhere; }
.route-desk-saved-summary p { margin: 0; color: #465255; font-size: 0.73rem; line-height: 1.4; }
.route-desk-saved-summary button { box-shadow: 4px 4px 0 var(--route-blue); }

.route-desk-replay-panel { margin-top: -2px; padding: 20px; border: 2px solid var(--route-ink); background: #dceff0; }
.route-desk-replay-panel header p { margin: 0; color: var(--route-blue); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.08em; }
.route-desk-replay-panel h3 { margin: 4px 0 15px; font-size: 1.15rem; }
.route-desk-replay-panel ol { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; border: 2px solid var(--route-ink); background: #fffdf5; }
.route-desk-replay-panel li { display: grid; min-width: 0; padding: 11px; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; }
.route-desk-replay-panel li + li { border-left: 2px dashed var(--route-ink); }
.route-desk-replay-panel li > span { color: var(--route-coral); font: 900 1.2rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-desk-replay-panel li div { display: grid; min-width: 0; gap: 3px; }
.route-desk-replay-panel li small { color: var(--route-blue); font: 900 0.5rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-desk-replay-panel li strong { font-size: 0.72rem; line-height: 1.25; }
.route-desk-replay-note { margin: 12px 0 0; color: #465255; font-size: 0.66rem; line-height: 1.4; }

.route-postcard { margin-top: 14px; overflow: hidden; border: 2px solid var(--route-ink); background: #fffdf5; }
.route-postcard-envelope { position: relative; display: grid; min-width: 0; padding: 15px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 15px; align-items: center; background: repeating-linear-gradient(135deg, #fffdf5 0 13px, #dceff0 13px 19px, #fffdf5 19px 32px, #f6d5cc 32px 38px); }
.route-postcard-envelope::before { position: absolute; inset: 7px; border: 1px solid rgba(23, 35, 38, 0.25); background: rgba(255, 253, 245, 0.93); content: ""; }
.route-postcard-envelope > * { position: relative; z-index: 1; }
.route-postcard-seal { position: relative; display: grid; width: 74px; aspect-ratio: 1; place-items: center; border: 3px double var(--route-ink); border-radius: 50%; color: var(--route-ink); background: #f4cf68; transform: rotate(-5deg); }
.route-postcard-seal::before,
.route-postcard-seal::after { position: absolute; width: 2px; height: 52px; background: var(--route-ink); content: ""; opacity: 0.35; }
.route-postcard-seal::after { transform: rotate(90deg); }
.route-postcard-seal span { position: absolute; top: 7px; color: var(--route-coral); font: 900 0.48rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-postcard-seal i { width: 10px; height: 10px; border-radius: 50%; background: var(--route-coral); }
.route-postcard-seal b { position: absolute; bottom: 7px; font: 900 0.5rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-postcard-intro { min-width: 0; }
.route-postcard-intro small,
.route-postcard-address small,
.route-postcard-marks small { color: var(--route-blue); font: 900 0.55rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.07em; }
.route-postcard-intro h3 { margin: 4px 0; font-size: 1rem; }
.route-postcard-intro p { margin: 0; color: #465255; font-size: 0.7rem; line-height: 1.35; }
.route-postcard-envelope button,
.route-postcard-file-row button { display: flex; gap: 20px; align-items: center; padding: 10px 12px; border: 2px solid var(--route-ink); color: var(--route-ink); background: #f4cf68; text-align: left; cursor: pointer; box-shadow: 4px 4px 0 var(--route-coral); }
.route-postcard-envelope button span,
.route-postcard-file-row button span { display: grid; gap: 2px; }
.route-postcard-envelope button small,
.route-postcard-file-row button small { color: inherit; font: 800 0.48rem/1.1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-postcard-envelope button strong,
.route-postcard-file-row button strong { font-size: 0.78rem; }
.route-postcard-envelope button > b,
.route-postcard-file-row button > b { color: var(--route-coral); font-size: 1.5rem; }
.route-postcard button:focus-visible,
.route-postcard-window:focus { outline: 3px solid var(--route-blue); outline-offset: 3px; }

.route-postcard-window { display: grid; min-width: 0; padding: 18px; grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.2fr); gap: 20px; border-top: 2px dashed var(--route-ink); background: #f4cf68; transform-origin: top center; }
.route-postcard[data-postcard-state="open"] .route-postcard-window { animation: route-postcard-open 420ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.route-postcard-address { position: relative; min-width: 0; padding: 24px 18px 18px; border: 2px solid var(--route-ink); background: #fffdf5; box-shadow: 5px 5px 0 var(--route-coral); }
.route-postcard-airmail { position: absolute; top: 0; right: 0; left: 0; height: 8px; background: repeating-linear-gradient(135deg, var(--route-blue) 0 8px, #fffdf5 8px 13px, var(--route-coral) 13px 21px, #fffdf5 21px 26px); }
.route-postcard-address > p:first-of-type { margin: 23px 0 3px; color: var(--route-coral); font: 900 0.52rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em; }
.route-postcard-address h3 { margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.5rem); letter-spacing: -0.05em; line-height: 0.95; overflow-wrap: anywhere; text-wrap: balance; }
.route-postcard-address > p:last-of-type { margin: 0; color: #465255; font-size: 0.76rem; line-height: 1.5; }
.route-postcard-route-line { display: block; margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--route-ink); color: var(--route-blue); font: 900 0.5rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-postcard-marks { min-width: 0; align-self: center; }
.route-postcard-marks header h4 { margin: 4px 0 3px; font-size: 1.05rem; }
.route-postcard-marks header p { margin: 0; color: #465255; font-size: 0.68rem; }
.route-postcard-choices { display: grid; margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.route-postcard-choices button { position: relative; display: grid; min-width: 0; min-height: 106px; padding: 12px 12px 28px; border: 2px solid var(--route-ink); border-radius: 50% 45% 48% 44%; color: var(--route-ink); background: #fffdf5; text-align: center; cursor: pointer; transform: rotate(-1.5deg); }
.route-postcard-choices button + button { transform: rotate(1.5deg); }
.route-postcard-choices button span { color: var(--route-blue); font: 900 0.5rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.06em; }
.route-postcard-choices button strong { align-self: center; font-size: 0.7rem; line-height: 1.35; }
.route-postcard-choices button b { position: absolute; right: 12px; bottom: 8px; color: var(--route-coral); font: 900 0.5rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-postcard-choices button:hover { background: #dceff0; }
.route-postcard-choices button[aria-pressed="true"] { background: #dceff0; box-shadow: inset 0 0 0 5px #fffdf5; }
.route-postcard-choices button[aria-pressed="true"]::after { position: absolute; inset: 7px; display: grid; place-items: end center; border: 3px double var(--route-coral); border-radius: 50%; color: var(--route-coral); content: "KEPT"; font: 900 0.47rem/1 ui-monospace, "SFMono-Regular", Menlo, monospace; transform: rotate(-8deg); pointer-events: none; }
.route-postcard-file-row { display: flex; min-width: 0; margin-top: 12px; padding-top: 12px; gap: 14px; align-items: center; justify-content: space-between; border-top: 2px dashed var(--route-ink); }
.route-postcard-file-row > div { display: grid; min-width: 0; gap: 3px; }
.route-postcard-file-row > div strong { font-size: 0.7rem; line-height: 1.3; }
.route-postcard-file-row button { flex: 0 0 auto; color: #fffdf5; background: var(--route-ink); }
.route-postcard-file-row button:disabled { cursor: not-allowed; opacity: 0.48; box-shadow: none; }
.route-postcard-status { margin: 0; padding: 9px 15px; border-top: 1px solid rgba(23, 35, 38, 0.25); color: #465255; background: #fffdf5; font: 700 0.58rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-postcard-status:empty { display: none; }

.route-postcard-onward { display: flex; min-width: 0; padding: 12px 15px; gap: 16px; align-items: center; justify-content: space-between; border-top: 2px dashed var(--route-ink); background: #dceff0; }
.route-postcard-onward p { display: grid; min-width: 0; margin: 0; gap: 3px; }
.route-postcard-onward p small { color: var(--route-coral); font: 900 0.5rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em; }
.route-postcard-onward p strong { font-size: 0.72rem; line-height: 1.3; }
.route-postcard-onward button,
.carried-route-save-row button,
.carried-route-result button { display: flex; flex: 0 0 auto; gap: 18px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 2px solid var(--route-ink); color: #fffdf5; background: var(--route-ink); text-align: left; cursor: pointer; box-shadow: 4px 4px 0 var(--route-coral); }
.route-postcard-onward button span,
.carried-route-save-row button span,
.carried-route-result button span { display: grid; gap: 2px; }
.route-postcard-onward button small,
.carried-route-save-row button small,
.carried-route-result button small { color: #f4cf68; font: 800 0.48rem/1.1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.route-postcard-onward button strong,
.carried-route-save-row button strong,
.carried-route-result button strong { font-size: 0.76rem; }
.route-postcard-onward button b,
.carried-route-save-row button b,
.carried-route-result button b { color: var(--route-coral); font-size: 1.35rem; }
.route-postcard-onward button:focus-visible,
.carried-route button:focus-visible,
.carried-route:focus,
.carried-route-result:focus { outline: 3px solid var(--route-blue); outline-offset: 3px; }

.carried-route { position: relative; min-width: 0; margin-top: 14px; padding: 18px; border: 2px solid var(--route-ink); background: #f7eabe; box-shadow: inset 0 0 0 7px #fffdf5; }
.carried-route::before { position: absolute; top: -7px; right: 13%; width: 58px; height: 20px; border: 1px solid rgba(23, 35, 38, 0.2); background: rgba(220, 239, 240, 0.8); content: ""; transform: rotate(2deg); }
.carried-route[data-carried-state="draft"] { animation: carried-route-arrive 440ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
.carried-route-heading { display: flex; min-width: 0; gap: 18px; align-items: start; justify-content: space-between; }
.carried-route-heading > div { min-width: 0; }
.carried-route-heading small,
.carried-route-source > span,
.carried-route-stops small,
.carried-route-choice-panel small,
.carried-route-result > small { color: var(--route-blue); font: 900 0.52rem/1.25 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.07em; }
.carried-route-heading h3 { max-width: 650px; margin: 5px 0; font-size: clamp(1.45rem, 3vw, 2.35rem); letter-spacing: -0.045em; line-height: 1; text-wrap: balance; }
.carried-route-heading p { max-width: 64ch; margin: 0; color: #465255; font-size: 0.7rem; line-height: 1.45; }
.carried-route-stamp { flex: 0 0 auto; padding: 10px; border: 3px double var(--route-coral); border-radius: 50%; color: var(--route-coral); font: 900 0.48rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; text-align: center; transform: rotate(8deg); }
.carried-route-source { display: grid; min-width: 0; margin-top: 15px; padding: 11px 13px; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--route-ink); background: #fffdf5; }
.carried-route-source > span { color: var(--route-coral); }
.carried-route-source strong { min-width: 0; font: 700 0.68rem/1.35 ui-monospace, "SFMono-Regular", Menlo, monospace; overflow-wrap: anywhere; }
.carried-route-stops { display: grid; margin: 13px 0 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; border: 2px solid var(--route-ink); background: #fffdf5; }
.carried-route-stops li { position: relative; display: grid; min-width: 0; min-height: 120px; padding: 13px; align-content: start; gap: 5px; }
.carried-route-stops li + li { border-left: 2px dashed var(--route-ink); }
.carried-route-stops strong { font-size: 0.88rem; line-height: 1.2; }
.carried-route-stops span { color: #465255; font-size: 0.65rem; line-height: 1.4; }
.carried-route-stops .is-changed { z-index: 1; color: #fffdf5; background: var(--route-blue); box-shadow: 6px 6px 0 var(--route-coral); transform: rotate(-1deg) scale(1.025); }
.carried-route-stops .is-changed small { color: #f4cf68; }
.carried-route-stops .is-changed span { color: #fffdf5; }
.carried-route-stops .is-changed::after { position: absolute; right: 7px; bottom: 6px; padding: 5px; border: 2px solid #f4cf68; border-radius: 50%; color: #f4cf68; content: "WRONG\A ON FILE"; font: 900 0.42rem/1.1 ui-monospace, "SFMono-Regular", Menlo, monospace; text-align: center; white-space: pre; transform: rotate(-8deg); }
.carried-route-choice-panel { margin-top: 13px; padding: 14px; border: 2px solid var(--route-ink); background: #fffdf5; }
.carried-route-choice-panel h4 { margin: 4px 0 11px; font-size: 1rem; }
.carried-route-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.carried-route-choices button { display: grid; min-width: 0; min-height: 88px; padding: 11px; gap: 5px; border: 2px solid var(--route-ink); color: var(--route-ink); background: transparent; text-align: left; cursor: pointer; }
.carried-route-choices button strong { font-size: 0.78rem; }
.carried-route-choices button span { color: #465255; font-size: 0.66rem; line-height: 1.35; }
.carried-route-choices button:hover { background: #f7eabe; }
.carried-route-choices button[aria-pressed="true"] { background: #f4cf68; box-shadow: inset 6px 0 0 var(--route-coral); }
.carried-route-save-row { display: flex; min-width: 0; margin-top: 12px; gap: 14px; align-items: center; justify-content: space-between; }
.carried-route-save-row p { margin: 0; color: #465255; font-size: 0.68rem; line-height: 1.4; }
.carried-route-save-row button:disabled { cursor: not-allowed; opacity: 0.48; box-shadow: none; }
.carried-route-result { position: relative; margin-top: 14px; padding: 18px; border: 3px double var(--route-ink); background: #dceff0; }
.carried-route-result::after { position: absolute; top: 11px; right: 13px; padding: 7px; border: 3px double var(--route-coral); border-radius: 50%; color: var(--route-coral); content: "ROUTE\A ACCEPTED?"; font: 900 0.42rem/1.1 ui-monospace, "SFMono-Regular", Menlo, monospace; text-align: center; white-space: pre; transform: rotate(7deg); }
.carried-route-result h4 { max-width: calc(100% - 92px); margin: 5px 0 7px; font-size: clamp(1.3rem, 3vw, 2rem); letter-spacing: -0.035em; line-height: 1; overflow-wrap: anywhere; }
.carried-route-result p { max-width: 70ch; margin: 0 0 14px; color: #344548; font-size: 0.73rem; line-height: 1.45; }
.carried-route-result button { max-width: 310px; box-shadow: 4px 4px 0 var(--route-blue); }
.carried-route-status { margin: 10px 0 0; color: #465255; font: 700 0.58rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; }

.joined-route-ticket { position: relative; min-width: 0; margin-top: 30px; padding: 20px; overflow: hidden; border: 2px solid var(--route-ink); background: #eadcb8; box-shadow: 9px 10px 0 #c8b992; }
.joined-route-ticket::before { position: absolute; inset: 7px; border: 1px solid rgba(23, 35, 38, 0.24); content: ""; pointer-events: none; }
.joined-route-ticket::after { position: absolute; top: 83px; bottom: 63px; left: 50%; border-left: 2px dashed rgba(23, 35, 38, 0.35); content: ""; pointer-events: none; }
.joined-route-ticket[data-joined-state="saved"] { animation: joined-route-arrive 520ms cubic-bezier(0.2, 0.9, 0.3, 1.08) both; }
.joined-route-heading { position: relative; z-index: 2; display: flex; min-width: 0; gap: 20px; align-items: center; justify-content: space-between; padding: 10px 12px 15px; }
.joined-route-heading > div { min-width: 0; }
.joined-route-heading p { max-width: 58ch; margin: 5px 0 0; color: #465255; font-size: 0.7rem; line-height: 1.4; }
.joined-route-heading p:first-child { margin: 0; color: var(--route-coral); font: 900 0.56rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.08em; }
.joined-route-heading h2 { margin: 4px 0; font-size: clamp(1.6rem, 4vw, 3.1rem); letter-spacing: -0.055em; line-height: 0.96; text-wrap: balance; }
.joined-route-heading button,
.joined-route-actions button { display: flex; min-width: 0; gap: 18px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 2px solid var(--route-ink); color: #fffdf5; background: var(--route-ink); text-align: left; cursor: pointer; box-shadow: 4px 4px 0 var(--route-coral); }
.joined-route-heading button { flex: 0 0 auto; }
.joined-route-heading button span,
.joined-route-actions button span { display: grid; min-width: 0; gap: 2px; }
.joined-route-heading button small,
.joined-route-actions button small { color: #f4cf68; font: 800 0.47rem/1.15 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.joined-route-heading button strong,
.joined-route-actions button strong { font-size: 0.74rem; line-height: 1.2; }
.joined-route-heading button b,
.joined-route-actions button b { color: var(--route-coral); font-size: 1.25rem; }
.joined-route-fold { position: relative; z-index: 4; display: grid; width: min(72%, 620px); min-width: 0; margin: 8px auto -24px; padding: 9px; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; border: 2px solid var(--route-ink); background: repeating-linear-gradient(135deg, #fffdf5 0 11px, #dceff0 11px 17px, #fffdf5 17px 28px, #f6d5cc 28px 34px); box-shadow: 5px 5px 0 var(--route-coral); transform: rotate(-0.7deg); }
.joined-route-fold > div { display: grid; min-width: 0; padding: 9px 12px; gap: 3px; background: rgba(255, 253, 245, 0.94); }
.joined-route-fold small { color: var(--route-blue); font: 900 0.5rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.06em; }
.joined-route-fold strong { font-size: 0.82rem; line-height: 1.3; overflow-wrap: anywhere; }
.joined-route-fold span:not(.joined-route-fold-stamp) { color: #465255; font-size: 0.6rem; line-height: 1.35; }
.joined-route-fold-stamp { display: grid; width: 56px; aspect-ratio: 1; place-items: center; border: 3px double var(--route-coral); border-radius: 50%; color: var(--route-coral); background: #f4cf68; font: 900 0.45rem/1.15 ui-monospace, "SFMono-Regular", Menlo, monospace; text-align: center; transform: rotate(7deg); }
.joined-route-tabs { display: none; }
.joined-route-papers { position: relative; z-index: 2; display: grid; min-width: 0; padding-top: 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.joined-route-paper { min-width: 0; min-height: 285px; padding: 38px 16px 16px; border: 2px solid var(--route-ink); background: #fffdf5; box-shadow: inset 0 -8px 0 #f4cf68; transform: rotate(0.25deg); transform-origin: top center; }
.joined-route-paper-changed { background: #e4f0ee; box-shadow: inset 0 -8px 0 var(--route-coral); transform: rotate(-0.25deg); }
.joined-route-paper > small { color: var(--route-blue); font: 900 0.52rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: 0.07em; }
.joined-route-paper h3 { min-height: 2em; margin: 6px 0 13px; font-size: clamp(1.2rem, 2.5vw, 1.9rem); letter-spacing: -0.04em; line-height: 1; overflow-wrap: anywhere; }
.joined-route-paper ol { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; border: 1px solid var(--route-ink); }
.joined-route-paper li { display: grid; min-width: 0; padding: 10px; align-content: start; gap: 4px; }
.joined-route-paper li + li { border-left: 1px dashed var(--route-ink); }
.joined-route-paper li small { color: var(--route-coral); font: 900 0.45rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.joined-route-paper li strong { font-size: 0.7rem; line-height: 1.2; overflow-wrap: anywhere; }
.joined-route-paper li span { color: #465255; font-size: 0.58rem; line-height: 1.35; }
.joined-route-ticket[data-replay-side="source"] .joined-route-paper-source,
.joined-route-ticket[data-replay-side="changed"] .joined-route-paper-changed { box-shadow: inset 0 -8px 0 #f4cf68, 6px 6px 0 var(--route-blue); }
.joined-route-actions { position: relative; z-index: 2; display: grid; margin-top: 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.joined-route-actions button:last-child { box-shadow: 4px 4px 0 var(--route-blue); }
.joined-route-status { position: relative; z-index: 2; margin: 13px 0 0; color: #465255; font: 700 0.58rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.joined-route-ticket:focus,
.joined-route-paper:focus,
.route-desk-form:focus { outline: 3px solid var(--route-blue); outline-offset: 4px; }
.joined-route-heading button:focus-visible,
.joined-route-actions button:focus-visible,
.joined-route-tabs button:focus-visible { outline: 3px solid var(--route-blue); outline-offset: 3px; }

.route-desk-footer { display: flex; gap: 18px; justify-content: space-between; margin-top: 17px; color: #465255; font-size: 0.58rem; line-height: 1.4; }
.route-desk-footer a { color: inherit; text-underline-offset: 3px; }

@keyframes route-stamp {
  from { opacity: 0; transform: scale(1.6) rotate(-18deg); }
  to { opacity: 1; transform: scale(1) rotate(-9deg); }
}

@keyframes route-postcard-open {
  from { opacity: 0; transform: perspective(700px) rotateX(-12deg) translateY(-9px); }
  to { opacity: 1; transform: perspective(700px) rotateX(0) translateY(0); }
}

@keyframes carried-route-arrive {
  from { opacity: 0; transform: translateY(-12px) rotate(-0.7deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes joined-route-arrive {
  from { opacity: 0; transform: translateY(18px) rotate(-0.5deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@media (max-width: 760px) {
  .route-desk { width: min(100% - 20px, 580px); margin-top: 12px; }
  .route-desk-heading { align-items: start; }
  .route-desk-office-mark { display: none; }
  .route-desk-paper { grid-template-columns: 50px minmax(0, 1fr); box-shadow: 5px 6px 0 #d9caa8; }
  .route-desk-stub { min-height: 520px; padding-inline: 5px; }
  .route-desk-stub strong { font-size: 2.2rem; }
  .route-desk-stub small { font-size: 0.43rem; }
  .route-desk-form,
  .route-desk-saved-ticket { padding: 16px 13px; }
  .route-desk-form-heading { align-items: start; }
  .route-desk-form-heading p { font-size: 0.51rem; }
  .route-desk-leaves,
  .route-desk-replay-panel ol { grid-template-columns: minmax(0, 1fr); }
  .route-desk-leaf { padding-bottom: 43px; }
  .route-desk-leaf + .route-desk-leaf { border-top: 2px dashed var(--route-ink); border-left: 0; }
  .route-desk-leaf h2 { min-height: 0; }
  .route-desk-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-desk-choices button { min-height: 84px; padding: 8px; grid-template-columns: 18px minmax(0, 1fr); column-gap: 5px; }
  .route-desk-finish { align-items: stretch; flex-direction: column; }
  .route-desk-finish button { justify-content: space-between; }
  .route-desk-saved-ticket { min-height: 520px; }
  .route-desk-saved-summary { padding: 17px; grid-template-columns: auto minmax(0, 1fr); gap: 13px; }
  .route-desk-saved-summary button { grid-column: 1 / -1; justify-content: space-between; }
  .route-desk-replay-panel li + li { border-top: 2px dashed var(--route-ink); border-left: 0; }
  .route-postcard-envelope { grid-template-columns: 62px minmax(0, 1fr); gap: 11px; }
  .route-postcard-seal { width: 58px; }
  .route-postcard-seal::before,
  .route-postcard-seal::after { height: 40px; }
  .route-postcard-envelope button { grid-column: 1 / -1; justify-content: space-between; }
  .route-postcard-window { grid-template-columns: minmax(0, 1fr); }
  .route-postcard-file-row { align-items: stretch; flex-direction: column; }
  .route-postcard-file-row button { justify-content: space-between; }
  .route-postcard-onward { align-items: stretch; flex-direction: column; }
  .route-postcard-onward button { width: 100%; }
  .carried-route { padding: 15px 12px; }
  .carried-route-heading { align-items: start; }
  .carried-route-stamp { display: none; }
  .carried-route-source { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .carried-route-stops { grid-template-columns: minmax(0, 1fr); }
  .carried-route-stops li { min-height: 0; }
  .carried-route-stops li + li { border-top: 2px dashed var(--route-ink); border-left: 0; }
  .carried-route-stops .is-changed { transform: rotate(-0.5deg); }
  .carried-route-save-row { align-items: stretch; flex-direction: column; }
  .carried-route-save-row button,
  .carried-route-result button { width: 100%; max-width: none; }
  .joined-route-ticket { padding: 12px; box-shadow: 5px 6px 0 #c8b992; }
  .joined-route-ticket::after { display: none; }
  .joined-route-heading { align-items: stretch; padding: 8px 5px 13px; flex-direction: column; }
  .joined-route-heading button { width: 100%; }
  .joined-route-fold { width: calc(100% - 16px); margin: 5px auto 14px; }
  .joined-route-tabs { position: relative; z-index: 3; display: grid; margin: 0 0 -2px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .joined-route-tabs button { min-width: 0; padding: 10px 7px; border: 2px solid var(--route-ink); color: var(--route-ink); background: #eadcb8; font: 900 0.62rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; cursor: pointer; }
  .joined-route-tabs button + button { border-left: 0; }
  .joined-route-tabs button[aria-selected="true"] { color: #fffdf5; background: var(--route-blue); }
  .joined-route-papers { padding-top: 0; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .joined-route-ticket[data-active-side="source"] .joined-route-paper-changed,
  .joined-route-ticket[data-active-side="changed"] .joined-route-paper-source { display: none; }
  .joined-route-paper { min-height: 0; padding: 18px 12px; transform: none; }
  .joined-route-paper ol { grid-template-columns: minmax(0, 1fr); }
  .joined-route-paper li + li { border-top: 1px dashed var(--route-ink); border-left: 0; }
  .joined-route-actions { gap: 8px; }
  .joined-route-actions button { padding: 9px 8px; gap: 8px; }
  .joined-route-actions button b { display: none; }
  .route-desk-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 380px) {
  .route-desk-heading h1 { font-size: 2rem; }
  .route-desk-paper { grid-template-columns: 39px minmax(0, 1fr); }
  .route-desk-stub span { font-size: 0.52rem; }
  .route-desk-stub strong { font-size: 1.7rem; }
  .route-desk-stub small { display: none; }
  .route-desk-form,
  .route-desk-saved-ticket { padding-inline: 10px; }
  .route-desk-choices { grid-template-columns: minmax(0, 1fr); }
  .route-postcard-window { padding: 12px; }
  .route-postcard-choices { grid-template-columns: minmax(0, 1fr); }
  .route-postcard-choices button { min-height: 94px; }
  .carried-route-choices { grid-template-columns: minmax(0, 1fr); }
  .carried-route-result h4 { max-width: none; padding-top: 55px; }
  .joined-route-fold { grid-template-columns: 46px minmax(0, 1fr); }
  .joined-route-fold-stamp { width: 44px; }
  .joined-route-actions { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .route-desk *,
  .route-desk *::before,
  .route-desk *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}