/* The case page's type, cards and controls; a readable route beside its writing box. */
.route-page .case-app { max-width: 1080px; }
.route-page .case-head { max-width: 760px; }
.route-page .route-columns { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.route-page .route-add { position: sticky; top: 16px; grid-column: 2; grid-row: 1; }
.route-page .route-steps { grid-column: 1; grid-row: 1; }
.route-page .route-step-list { padding-left: 24px; margin: 18px 0 0; }
.route-page .route-step-list > li { padding: 0 0 22px 6px; }
.route-page .route-step-list > li + li { border-top: 1px solid var(--line); padding-top: 22px; }
.route-page .route-step-list > li:last-child { padding-bottom: 0; }
.route-page .route-step-list p { line-height: 1.6; }
.route-page .route-deadline { color: var(--ink); }
.route-page details { color: var(--muted); font-size: 14px; line-height: 1.6; }
.route-page summary { cursor: pointer; }
.route-page form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.route-page textarea { box-sizing: border-box; width: 100%; min-height: 160px; resize: vertical; color: var(--ink); background: var(--ground); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px; font: 16px/1.55 var(--body); }
.route-page textarea:focus-visible { outline: 2px solid var(--amber); }
.route-page button:disabled { opacity: .6; cursor: wait; }
.route-page .card > ul { padding-left: 20px; line-height: 1.6; }
@media (max-width: 760px) {
  .route-page .route-columns { display: flex; flex-direction: column; }
  .route-page .route-columns > * { width: 100%; box-sizing: border-box; }
  .route-page .route-add { position: static; }
}