/* Site-plan palette: cool drafting paper, ink, and the safety orange of construction marking for the swept envelope. Light/dark follows prefers-color-scheme unless the theme button sets data-theme on ; the dark token block appears twice for that reason. Keep the copies identical. */ :root { --bg: #eef0ea; --card: #fbfbf8; --text: #1f2422; --muted: #5d6660; --border: #d4d8cf; --accent: #d9551a; --accent-text: #ffffff; --tractor: #2f5d9a; --trailer: #7d8c9a; --path: #1f2422; --handle: #ffffff; --obstacle: #2b3a2f; --ok: #2e7d4f; --ok-bg: #e2f1e7; --warn: #b26a00; --warn-bg: #f7ecd6; --bad: #c43d2e; --bad-bg: #f7e4e0; --shadow: 0 1px 2px rgba(20, 30, 24, 0.07), 0 6px 20px rgba(20, 30, 24, 0.06); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #171a18; --card: #212522; --text: #e6e9e3; --muted: #a1aaa3; --border: #363c37; --accent: #f07a3d; --accent-text: #1a1108; --tractor: #7fa8e0; --trailer: #a9b6c2; --path: #f2f3ef; --handle: #1a1d1b; --obstacle: #d8e2d9; --ok: #63b883; --ok-bg: #1b3326; --warn: #e0a24a; --warn-bg: #3a2c12; --bad: #ef7160; --bad-bg: #3b221d; --shadow: none; } } :root[data-theme="dark"] { --bg: #171a18; --card: #212522; --text: #e6e9e3; --muted: #a1aaa3; --border: #363c37; --accent: #f07a3d; --accent-text: #1a1108; --tractor: #7fa8e0; --trailer: #a9b6c2; --path: #f2f3ef; --handle: #1a1d1b; --obstacle: #d8e2d9; --ok: #63b883; --ok-bg: #1b3326; --warn: #e0a24a; --warn-bg: #3a2c12; --bad: #ef7160; --bad-bg: #3b221d; --shadow: none; } * { box-sizing: border-box; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } html, body { height: 100%; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.4; background: var(--bg); color: var(--text); display: grid; grid-template-rows: auto 1fr auto; height: 100vh; overflow: hidden; } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } h2 { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } h3 { font-size: 14px; margin: 14px 0 4px; } p { margin: 0; } .hint { font-size: 12.5px; color: var(--muted); } .hint.bad { color: var(--bad); } a { color: var(--accent); } /* controls */ button, select, input[type="text"], input[type="number"], input[type="search"] { font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 5px 9px; min-height: 30px; } button { cursor: pointer; white-space: nowrap; } button:hover:not([disabled]) { border-color: var(--muted); } button[disabled] { opacity: 0.45; cursor: default; } button.primary { background: var(--text); color: var(--bg); border-color: var(--text); } button.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } button.danger { color: var(--bad); } button.link { border: 0; background: none; padding: 0 4px; color: var(--muted); min-height: 0; font-size: 12px; } button.link:hover { color: var(--bad); } input[type="number"] { width: 84px; text-align: right; font-family: ui-monospace, Menlo, monospace; } select { max-width: 100%; } .row { display: flex; gap: 6px; flex-wrap: wrap; } .row.end { justify-content: flex-end; margin-top: 16px; } .field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin: 6px 0; } .field > span:first-child { font-size: 13px; } .field select { min-width: 0; justify-self: stretch; } .field input[type="range"] { min-width: 0; justify-self: stretch; accent-color: var(--accent); } .field[hidden] { display: none; } .unit { display: inline-flex; align-items: center; gap: 4px; } .check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 8px 0; } .check input { accent-color: var(--accent); } .pill { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; } .pill.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); } .pill.warn { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); } .pill.bad { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); } /* header */ .topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--border); overflow-x: auto; } .brand { font-weight: 800; letter-spacing: 0.01em; padding-right: 8px; white-space: nowrap; } .brand::before { content: ""; display: inline-block; width: 14px; height: 14px; background: var(--accent); border-radius: 3px; margin-right: 8px; vertical-align: -1px; } .projects { display: flex; gap: 6px; align-items: center; } .projects select { max-width: 240px; } .spacer { flex: 1; } /* workspace */ .workspace { display: grid; grid-template-columns: 96px 1fr 320px; min-height: 0; } .rail { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; background: var(--card); border-right: 1px solid var(--border); overflow-y: auto; } .rail button { width: 100%; text-align: left; } .rail-gap { flex: 0 0 12px; } .stage { position: relative; overflow: hidden; background: var(--bg); } .stage.drop::after { content: "Drop an image to start a new project"; position: absolute; inset: 12px; border: 2px dashed var(--accent); border-radius: 8px; display: grid; place-items: center; color: var(--accent); background: rgba(217, 85, 26, 0.08); font-weight: 600; pointer-events: none; } canvas { display: block; position: absolute; inset: 0; touch-action: none; } .hud, .coords { position: absolute; font-size: 12px; background: var(--card); border: 1px solid var(--border); padding: 3px 8px; border-radius: 4px; pointer-events: none; max-width: calc(100% - 24px); } .hud { left: 12px; top: 10px; } .hud:empty { display: none; } .coords { right: 12px; top: 10px; color: var(--muted); } .coords:empty { display: none; } .panel { overflow-y: auto; background: var(--card); border-left: 1px solid var(--border); padding: 4px 0 24px; } .panel section { padding: 14px 16px; border-bottom: 1px solid var(--border); } .panel section:empty { display: none; } /* basemap */ .search { display: flex; gap: 6px; margin: 6px 0; } .search input { flex: 1; min-width: 0; } .results { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; } .result { text-align: left; white-space: normal; font-size: 12.5px; line-height: 1.3; } .calform { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 6px; background: rgba(217, 85, 26, 0.06); } /* vehicle */ .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 8px 0; } .stats div { display: flex; justify-content: space-between; font-size: 12.5px; border-bottom: 1px dotted var(--border); padding: 2px 0; } .stats span { color: var(--muted); } .dims summary { cursor: pointer; font-size: 13px; color: var(--muted); } .dimform { margin-top: 6px; } .unit { border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px 8px; margin: 8px 0; } fieldset.unit { display: block; } fieldset.unit legend { font-size: 12px; font-weight: 600; padding: 0 4px; } fieldset.unit label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin: 4px 0; font-size: 12.5px; } /* path */ .seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 8px; } .seg button { border: 0; border-radius: 0; } .seg button + button { border-left: 1px solid var(--border); } .seg button[aria-checked="true"] { background: var(--text); color: var(--bg); } /* obstacles */ .obstacles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .obstacle { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 6px; border: 1px solid transparent; } .obstacle.selected { border-color: var(--accent); } .obstacle .oname { min-width: 0; width: 100%; } .obstacle .kind { font-size: 11px; color: var(--muted); } .obstacle .oradius { width: 56px; } /* layers */ .legend { display: grid; grid-template-columns: 22px 1fr; gap: 6px 8px; align-items: center; font-size: 12px; margin-top: 8px; } .legend i { display: block; height: 10px; border-radius: 2px; } /* playback */ .playbar { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "transport scrub" "readouts readouts" "verdict foot"; gap: 8px 14px; align-items: center; padding: 10px 16px; background: var(--card); border-top: 1px solid var(--border); } .transport { grid-area: transport; display: flex; gap: 6px; align-items: center; } #scrub { grid-area: scrub; width: 100%; accent-color: var(--accent); } .readouts { grid-area: readouts; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 4px 16px; } .ro { display: flex; flex-direction: column; } .ro .k { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .ro .v { font-size: 15px; } .v.bad { color: var(--bad); } .v.warn { color: var(--warn); } .v.good { color: var(--ok); } .verdict { grid-area: verdict; font-size: 13.5px; font-weight: 600; } .verdict.ok { color: var(--ok); } .verdict.warn { color: var(--warn); } .verdict.bad { color: var(--bad); } .verdict.none { color: var(--muted); font-weight: 400; } .foot { grid-area: foot; justify-self: end; font-size: 12px; color: var(--muted); display: flex; gap: 10px; } /* dialogs and toasts */ dialog { border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); padding: 20px 22px; width: min(520px, 92vw); box-shadow: var(--shadow); } dialog::backdrop { background: rgba(0, 0, 0, 0.35); } dialog h2 { font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--text); margin-bottom: 10px; } dialog ul { padding-left: 18px; } dialog li { margin: 4px 0; } .toast { position: fixed; left: 50%; bottom: 150px; transform: translate(-50%, 20px); opacity: 0; transition: opacity .2s, transform .2s; background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-size: 13px; pointer-events: none; max-width: 90vw; z-index: 20; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.sticky { pointer-events: auto; } .toast.bad { background: var(--bad); color: #fff; } .toast button { margin-left: 8px; padding: 2px 8px; min-height: 0; } @media (prefers-reduced-motion: reduce) { .toast { transition: none; } } @media (max-width: 900px) { body { height: auto; overflow: auto; } .workspace { grid-template-columns: 1fr; grid-template-rows: auto 60vh auto; } .rail { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); } .rail button { width: auto; } .panel { border-left: 0; border-top: 1px solid var(--border); } .playbar { grid-template-columns: 1fr; grid-template-areas: "transport" "scrub" "readouts" "verdict" "foot"; } .foot { justify-self: start; } }