:root{font:16px system-ui,sans-serif;color:#202923;background:#f4efe4;--green:#245d4b;--deep:#173f35;--border:#dedfd7}
*{box-sizing:border-box}
body{margin:0} [hidden]{display:none!important}
button,input,select{font:inherit} button,select{cursor:pointer}
button{padding:.65rem 1rem;border:1px solid var(--green);border-radius:.65rem;background:var(--green);color:white;font-weight:650}
button:disabled{opacity:.45;cursor:default}
button.outline,.editor-heading button,#reload,#logout{color:var(--green);background:white;border-color:#aac3b8}
button.danger{color:#9e3032;background:white;border-color:#c9a4a4}
:focus-visible{outline:3px solid #dd773c;outline-offset:3px}
#workspace{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:100vh}
aside{position:sticky;top:0;height:100vh;background:linear-gradient(var(--deep),var(--green));color:white;padding:1.4rem .75rem;display:flex;align-items:center;flex-direction:column;gap:.65rem}
aside img{width:60px;height:60px;border-radius:15px}
aside strong{font-size:1.25rem}
#workspaceName{padding:.28rem .65rem;border-radius:1rem;background:#ffffff29;font-size:.82rem;font-weight:650}
aside nav{display:grid;width:100%;gap:.25rem;margin-top:1rem;border-top:1px solid #ffffff35;padding-top:1rem}
aside button{border:0;background:transparent;text-align:left}
aside button[aria-current=page]{color:var(--deep);background:white}
.content{width:min(100%,1140px);padding:1.6rem 2rem;margin:auto;align-self:start}
.top,.heading,.row,.actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.top{justify-content:flex-end}.top label{display:flex;align-items:center;gap:.55rem;margin:0}
.heading,.row{justify-content:space-between}
.heading{border-bottom:1px solid var(--border);margin:1rem 0;padding-bottom:1rem}
.heading h1,.heading p{margin:.2rem 0}.heading p,.muted,small{color:#526059}
.editor-heading{justify-content:flex-start}.editor-heading h1{flex:1;text-align:center;margin-right:5rem}
.row,.card,#login{background:#fff;border:1px solid var(--border);border-radius:15px;padding:1rem;margin-bottom:.7rem}
.row small{display:block;margin-top:.3rem}.row .actions{width:100%}
.card h2{font-size:1.1rem;color:var(--deep);text-align:center;border-bottom:1px solid var(--border);padding-bottom:.8rem;margin-top:0}
.card label,#login label{display:grid;gap:.35rem;margin:.7rem 0;font-weight:600}
input:not([type=checkbox]),select{border:1px solid var(--border);border-radius:.45rem;background:white;padding:.55rem;min-width:0;max-width:100%}
.card label:has([type=checkbox]){display:flex;justify-content:space-between}
.vehicle-fields{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem}
.ada{display:inline-block;background:#e9f2ff;color:#005a9c;border-radius:.4rem;padding:.2rem .4rem;margin-top:.4rem;font-size:.8rem;font-weight:750}
#login{max-width:27rem;margin:4rem auto 1rem}
#status:not(:empty){position:fixed;bottom:.75rem;right:.75rem;margin:0;max-width:min(32rem,calc(100% - 1.5rem));padding:.65rem 1rem;background:white;border:1px solid #aac3b8;border-radius:.65rem;color:var(--deep)}
@media(max-width:700px){#workspace{display:block}aside{height:auto;z-index:1;flex-direction:row;flex-wrap:wrap;padding:.5rem .9rem}aside img{width:34px;height:34px}aside nav{display:flex;width:auto;flex:1;justify-content:flex-end;margin:0;border:0;padding:0}.content{padding:1rem}.top{justify-content:flex-start}}
.workspace-card h2{border:0;text-align:left;padding:0;margin:0 0 .65rem}
.workspace-card p{color:#526059}
.workspace-card .row:last-child{margin-bottom:0}
.workspace-card summary{cursor:pointer;color:var(--deep);font-weight:650}
.support-links{list-style:none;padding:0;display:grid;gap:.6rem}
.support-links a{color:var(--green)}
.motto{text-align:center;font-size:.85rem;padding-top:.5rem}
@media(max-width:700px){aside nav{width:100%;flex-basis:100%;justify-content:space-between;flex-wrap:wrap}aside nav button{padding:.55rem .7rem}}

/* Match the iPad workspace: a stationary sidebar and a shared heading baseline. */
#workspace { height: 100dvh; min-height: 0; overflow: hidden; }
aside { height: 100%; min-height: 0; overflow-y: auto; }
.content { height: 100%; min-height: 0; margin: 0 auto; overflow-y: auto; }
.content > section > .heading { min-height: 5.5rem; align-content: center; }
.route-tabs { display: flex; gap: .35rem; margin-bottom: .75rem; padding: .35rem; background: #e8e8df; border-radius: .75rem; }
.route-tabs button { flex: 1; min-width: 0; background: transparent; color: var(--deep); border-color: transparent; padding: .55rem .25rem; }
.route-tabs button[aria-pressed=true] { background: white; }
@media(max-width:700px) {
  #workspace { display: flex; flex-direction: column; }
  aside { height: auto; flex-shrink: 0; }
  .content { flex: 1; width: 100%; }
}
.map-workspace canvas { display: block; width: 100%; height: clamp(260px, 48vh, 520px); margin-top: .65rem; border-radius: .6rem; touch-action: none; cursor: crosshair; }
.map-workspace > a { display: block; text-align: right; font-size: .75rem; color: var(--deep); }
.map-workspace details { border-top: 1px solid var(--border); padding: .55rem 0; }
.tour-messages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; }
dialog { max-width: min(90vw, 45rem); border: 1px solid var(--border); border-radius: 1rem; }
dialog img { display: block; max-width: 100%; max-height: 70vh; margin-bottom: .75rem; }

#logout.sidebar-sign-out { margin-top: auto; width: 100%; color: white; background: transparent; border: 1px solid #ffffff55; }
@media (max-width: 700px) { #logout.sidebar-sign-out { width: auto; margin: 0 0 0 auto; } }