:root{font-family:system-ui,sans-serif;color:#142c3a;background:#f6f8f8;color-scheme:light}
*{box-sizing:border-box}
body{max-width:640px;margin:auto;padding:12px 14px}
header,.city{display:flex;justify-content:space-between;align-items:center;gap:12px}
h1{font-size:1.55rem;margin:8px 0 12px}
h2{font-size:1rem;margin:0}
button,.file-button,input,select{font:inherit;color:inherit;border:1px solid #9cabb2;border-radius:6px;background:#fff}
button,.file-button{min-height:42px;padding:7px 10px;cursor:pointer;font-size:.88rem}
button:disabled{opacity:.55;cursor:default}
button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.file-button:focus-within{outline:3px solid #1470b4;outline-offset:2px}
.city{background:#e4eef1;border-left:4px solid #426d80;padding:11px 12px;margin:4px 0 12px;min-height:64px}
.city output{font-size:1.38rem;font-weight:750;white-space:nowrap}
.city p,.muted,footer{font-size:.8rem;color:#49606a;margin:3px 0 0}
#routes{border-top:1px solid #c9d4d9}
.route{border-bottom:1px solid #c9d4d9}
.route summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;padding:8px 3px;min-height:47px;cursor:pointer}
.route summary::-webkit-details-marker{display:none}
.route summary::after{content:'›';font-size:1.2rem;line-height:1;color:#4b6470}
.route[open] summary::after{transform:rotate(90deg)}
.name{font-weight:640;font-size:.92rem;overflow-wrap:anywhere}
.times{font-size:1rem;font-weight:730;white-space:nowrap;font-variant-numeric:tabular-nums}
.warn{color:#854600;font-weight:650}
.warning-icon{margin-left:5px}
.detail{background:#fff;padding:3px 10px 8px;font-size:.87rem}
.detail p{margin:7px 0}
.controls{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0}
.file-button{position:relative;display:inline-flex;align-items:center}
.file-button input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}
#status{min-height:1.15em;margin-top:8px}
#panel{background:#e4eef1;padding:12px;border-radius:6px;margin:10px 0}
#panel label{display:block;margin:8px 0 4px}
#panel input,#panel select{width:100%;min-height:40px;padding:7px;margin-bottom:5px}
#panel .lookup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:start}
footer{margin-top:15px}

[hidden]{display:none!important}
.city{flex-wrap:wrap}
.city output{white-space:normal}
.controls>*{max-width:100%}
#panel input[type="checkbox"]{width:1.2em;min-height:0;height:1.2em;margin:0;vertical-align:middle}
#panel .remember{display:flex;align-items:center;gap:8px}
#panel .remember input{flex:none}
#panel .lookup input{min-width:0}