:root { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #262628; background: #f4f4f5; font-size: 15px; --brand-red: #BB141A; --brand-grey: #636466; --accent: var(--brand-red); --muted: var(--brand-grey); --line: #d5d5d7; }
* { box-sizing: border-box; }
.login-page {min-height:100dvh;display:grid;place-items:center;padding:24px;border-top:5px solid var(--brand-red);}
.login-page .login-panel {display:block;width:min(100%,400px);padding:32px;background:#fff;border:1px solid var(--line);}
.login-panel img {max-width:100%;height:auto;margin-bottom:24px;}
.login-panel button {width:100%;margin-top:16px;}
body { margin: 0; }
header { padding: 14px 28px; background: #fff; color: #262628; border-bottom:3px solid var(--brand-red); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand-lockup {display:flex;align-items:center;gap:20px;min-width:0;} .company-logo {display:block;width:160px;height:auto;flex-shrink:0;} .brand-title {padding-left:20px;border-left:1px solid var(--line);min-width:0;}
.header-map-controls {display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;margin-left:auto;}
header strong { font-size: 23px; font-weight: 750; } header span { display:block;margin-top:3px;color:var(--brand-grey);font-size:13px; } header p { color:var(--brand-grey);font-size: 13px; margin: 0; max-width: 340px; }
main { display: grid; grid-template-columns: 350px minmax(0,1fr); }
aside { padding: 18px 24px; background: #fff; border-right: 1px solid var(--line); }
h1 { font-size: 27px; letter-spacing: -.6px; margin: 0 0 8px; } h2 { font-size: 17px; margin: 0 0 16px; } p { line-height: 1.5; } .intro { margin: 0 0 20px; color: var(--muted); }
section { margin: 0; } aside section { padding: 12px 0; border-top: 1px solid var(--line); }
aside h1 {font-size:24px;margin-bottom:4px;}
aside h2 {margin-bottom:8px;}
aside .intro {margin-bottom:10px;}
aside label {margin-top:8px;margin-bottom:4px;}
aside .hint {margin:6px 0;line-height:1.4;}
aside #catalog-status {margin:8px 0;}
aside .management-drawer {margin-top:2px;}
.step { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; background:var(--brand-red);color:#fff;border: 1px solid var(--brand-red); border-radius: 50%; margin-right: 8px; font-size: 13px; }
label { display: block; font-weight: 600; font-size: 13px; margin: 12px 0 6px; }
input, select, button { font: inherit; max-width: 100%; } input, select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid #909093; border-radius: 4px; background: #fff; color: #262628; }
input[type="checkbox"] { width: 18px; min-height: 18px; accent-color: var(--accent); }
button { min-height: 44px; border-radius: 4px; border: 1px solid transparent; padding: 10px 14px; font-weight: 650; cursor: pointer; }
.primary { background: var(--accent); color: #fff; }
.lookup-actions {display:flex;gap:10px;align-items:stretch;}
.lookup-actions button {min-width:0;padding:10px;font-size:13px;}
.lookup-actions #calculate {flex:1;}
.lookup-actions #clear-lookup {flex:0 0 auto;}
.result.has-transit-options {position:relative;}
.result.has-transit-options h3 {padding-right:104px;min-height:28px;}
.transit-carousel {position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap;}
.result .transit-carousel button {width:24px;min-width:24px;min-height:28px;padding:0;border:0;background:transparent;font-size:16px;}
.crossing-legend button {background:transparent;border:0;padding:4px 2px;min-height:32px;font-size:12px;}
.crossing-legend button[aria-pressed="true"] {text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;}
.crossing-legend {align-items:center;}
#show-all-crossings {color:var(--brand-grey);font-weight:700;}
.secondary { color: #262628; background: #fff; border-color: #909093; } button:hover:not(:disabled) { filter: brightness(.93); } button:disabled { cursor: not-allowed; background: #ebebed; color:var(--brand-grey); border-color: #c5c5c8; }
:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 3px; }
.hint { font-size: 13px; color: var(--muted); margin: 9px 0; } .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fields > div { min-width: 0; }
.hint:empty,.map-note:empty {display:none;}
details { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; } summary { cursor: pointer; font-weight: 650; padding: 10px 0; }
.management-drawer {margin-top:8px;padding-top:0;border-top:0;}
.management-drawer summary {min-height:44px;box-sizing:border-box;color:var(--brand-grey);}
.drawer-actions {display:grid;gap:8px;padding:4px 0 8px;}
.drawer-actions button {width:100%;text-align:left;margin:0;}
#crossing-record-edit {margin-top:0;}
.workspace { min-width: 0; padding: 24px 28px 12px; }
.map-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .map-toolbar h2 { font-size: 22px; margin: 0; } .map-toolbar p { font-size: 13px; color: var(--muted); margin: 5px 0 0; } .map-toolbar > div:last-child { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .check { display: flex; gap: 8px; align-items: center; margin: 0; min-height: 44px; }
#map { height: 470px; background: #e8e8e9; border: 1px solid #c5c5c8; border-radius: 6px; z-index: 0; } .map-note { font-size: 12px; color: var(--muted); margin: 9px 0 25px; }
.map-pin { background: var(--brand-grey); color: white; border: 3px solid white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 750; box-shadow: 0 1px 4px #26262880; }
.home-pin {width:36px;height:40px;filter:drop-shadow(0 1px 2px #26262880);} .home-pin svg {display:block;width:100%;height:100%;} .house-shell {fill:var(--brand-red);stroke:white;stroke-width:2;stroke-linejoin:round;}
.crossing-pin { width:30px;height:30px;border:3px solid white;border-radius:50%;color:white;display:flex;align-items:center;justify-content:center;font-weight:750;box-shadow:0 1px 4px #26262880; } .crossing-pin.vacant {background:var(--brand-red);} .crossing-pin.permanent {background:#176747;} .crossing-pin.casual {background:#245b94;} .crossing-pin.suggested {border-style:dashed;}
.map-pin.vacant {background:var(--brand-red);} .map-pin.permanent {background:#176747;} .map-pin.casual {background:#245b94;}
.crossing-legend {display:flex;flex-wrap:wrap;gap:14px;font-size:12px;margin:0 0 12px;} .crossing-legend .vacant {color:var(--brand-red);font-weight:700;} .crossing-legend .permanent {color:#176747;font-weight:700;} .crossing-legend .casual {color:#245b94;font-weight:700;}
#crossing-summary,#transit-context:not(:empty) {background:white;border:1px solid var(--line);padding:18px;margin:18px 0;} #crossing-summary li,#transit-context li {margin:7px 0;line-height:1.5;} #crossing-record-edit {margin-top:8px;} #crossing-record-dialog {max-width:760px;} #shift-editor fieldset {border:1px solid var(--line);margin:16px 0;padding:12px;} .shift-fields {display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;} .shift-fields>div {min-width:0;} .shift-days {display:flex;flex-wrap:wrap;gap:12px;margin:10px 0;} .shift-days label {display:flex;align-items:center;gap:5px;min-height:44px;margin:0;} .shift-days input {width:18px;min-height:18px;}
@media(max-width:480px){.shift-fields {grid-template-columns:1fr 1fr;} .shift-fields>div:first-child {grid-column:1 / -1;}}
.results { margin-top: 12px; } .results h2 { font-size: 22px; margin: 0 0 8px; } #results-summary { color: var(--muted); font-size: 13px; }
#results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } .result { padding: 17px; border: 1px solid #bcbcbf; border-radius: 5px; background: #fff; min-width: 0; } .result h3 { margin: 0 0 13px; font-size: 16px; } .result .duration { font-size: 28px; font-weight: 700; margin: 0; letter-spacing: -.5px; } .result p { font-size: 13px; overflow-wrap: anywhere; } .result.selected { border: 2px solid var(--accent); padding: 16px; } .result button { width: 100%; }
#itinerary { margin-top: 20px; } #itinerary h3 { font-size: 17px; } #itinerary li { padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.5; } #itinerary small { display: block; color: var(--muted); } footer { font-size: 12px; color: var(--muted); padding: 24px 0 12px; line-height: 1.6; } a { color: var(--brand-red); }
.stop-finder { margin: 0 0 24px; padding: 0; border: 0; max-width: 500px; }
.external-action {display:inline-flex;align-items:center;min-height:44px;background:var(--brand-red);color:white;padding:10px 14px;border-radius:4px;text-decoration:none;font-weight:650;}
.record-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;} .danger {background:var(--brand-red);color:#fff;} #delete-name {font-weight:750;overflow-wrap:anywhere;} #delete-final {margin-top:16px;} [hidden] {display:none !important;}
.map-filter {min-width:150px;} .map-filter label {margin:0 0 4px;} .ts-wrapper {font:inherit;margin:0;} .ts-control {min-height:44px;border:1px solid #909093;border-radius:4px;padding:10px;color:#262628;background:#fff;box-shadow:none;font-size:15px;} .ts-control input {min-height:0;padding:0;border:0;border-radius:0;box-shadow:none;font:inherit;color:#262628;} .ts-dropdown {font:inherit;color:#262628;border-color:#909093;border-radius:4px;z-index:1100;} .ts-dropdown .option {padding:11px 12px;min-height:44px;white-space:normal;overflow-wrap:anywhere;} .ts-dropdown .active {background:#fbeaec;color:#262628;} .ts-wrapper.focus .ts-control {border-color:var(--brand-red);outline:3px solid var(--brand-red);outline-offset:2px;box-shadow:none;} .ts-wrapper.single .ts-control .item {overflow-wrap:anywhere;} .ts-wrapper.plugin-clear_button .clear-button {color:var(--brand-grey);font-size:22px;}
.ts-dropdown .option.choice-missing,.ts-control .item.choice-missing {color:var(--brand-red);} .ts-dropdown .option.choice-unconfirmed,.ts-control .item.choice-unconfirmed {color:var(--brand-grey);} .ts-dropdown .choice-status {display:block;font-size:12px;margin-top:3px;} .ts-control .choice-status {font-size:12px;} .ts-wrapper.single .ts-control .item {white-space:normal;}
.route-finder { margin: 0 0 18px; padding: 0; border: 0; } .route-finder select { max-width: 600px; } #route-stop-list { max-height: 330px; overflow: auto; padding-left: 30px; } #route-stop-list li { padding: 3px 0; } #route-stop-list button { text-align: left; width: 100%; } #route-interruptions { font-size: 13px; color: var(--brand-grey); }
dialog { max-width: 600px; width: calc(100% - 32px); max-height: calc(100dvh - 32px); padding: 26px; border: 1px solid #909093; border-radius: 7px; color: #262628; } dialog::backdrop { background: #26262880; } .dialog-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } #search-results button { display: block; width: 100%; text-align: left; margin-top: 8px; font-size: 13px; } .error { color: #BB141A !important; } .confirmed { color:var(--brand-grey); font-weight: 600; }
@media (min-width: 1500px) { #map { height: 550px; } }
@media (max-width: 1000px) { main { grid-template-columns: 310px minmax(0,1fr); } .workspace { padding: 20px 16px; } .map-toolbar { align-items: flex-start; flex-direction: column; } #results { grid-template-columns: 1fr; } }
@media (max-width: 680px) { header { padding: 16px; align-items: flex-start; flex-direction: column; gap: 9px; } main { display: flex; flex-direction: column; } aside { padding: 22px 18px; border-right: 0; } .workspace { padding: 22px 18px; } #map { height: 360px; } .map-toolbar > div:last-child { flex-wrap: wrap; } #results { grid-template-columns: 1fr; } }
@media(max-width:680px){.brand-lockup {gap:12px;} .company-logo {width:120px;} .brand-title {padding-left:12px;} header strong {font-size:21px;} header span {font-size:12px;}}
@media(max-width:680px){.header-map-controls {margin-left:0;gap:12px;justify-content:flex-start;}}