/* Trucking website demo, x-ray. Tokens only: var(--ao-*) and var(--tk-*). No hex here. Dark theme (design-system default).
   The canvas fills the screen; the location list, the pinned cards, the scene panel and the dock float over it on glass. */
html, body { margin: 0; height: 100dvh; overflow: hidden; background: var(--ao-void); color: var(--ao-t0); font-family: var(--ao-f-body); }
.tk-stage { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; touch-action: none; }
body[data-mode="walk"] .tk-stage { cursor: crosshair; }
button { font: inherit; }

/* top bar and the location list */
.tk-top { position: fixed; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: var(--ao-sp-3); padding: calc(var(--ao-sp-3) + env(safe-area-inset-top)) var(--ao-sp-4) var(--ao-sp-2); pointer-events: none; }
.tk-logo { display: block; pointer-events: auto; }
.tk-shot-title { display: none; margin: 0; font-family: var(--ao-f-display); font-weight: var(--ao-w-light); font-size: 22px; letter-spacing: var(--ao-ls-tight); }
.tk-count { margin: 0 0 0 auto; padding: 4px var(--ao-sp-3); border-radius: var(--ao-r-pill); background: var(--ao-glass-hi); border: 1px solid var(--ao-bd-1); font-family: var(--ao-f-mono); font-size: 12px; letter-spacing: var(--ao-ls-mono); text-transform: uppercase; color: var(--ao-t1); }
.tk-locs { position: fixed; z-index: 4; top: calc(52px + env(safe-area-inset-top)); left: 0; right: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tk-locs::-webkit-scrollbar { display: none; }
.tk-locs ul { list-style: none; margin: 0; padding: 0 var(--ao-sp-4); display: flex; gap: var(--ao-sp-2); width: max-content; }
.tk-loc { min-height: 40px; padding: 0 var(--ao-sp-3); white-space: nowrap; font-size: 14px; color: var(--ao-t0); background: var(--ao-glass-hi); border: 1px solid var(--ao-bd-2); border-radius: var(--ao-r-pill); cursor: pointer; backdrop-filter: blur(var(--ao-blur-panel)); -webkit-backdrop-filter: blur(var(--ao-blur-panel)); }
.tk-loc.is-on { border-color: var(--tk-solar); box-shadow: inset 0 -3px 0 var(--tk-solar); }

/* small cards pinned to each location in 3D (aria-hidden; the list above is the accessible version) */
.tk-pins { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.tk-pin { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; white-space: nowrap; font-size: 12px; color: var(--ao-t0); background: var(--ao-glass-hi); border: 1px solid var(--ao-bd-2); border-radius: var(--ao-r-pill); cursor: pointer; pointer-events: auto; }
.tk-pin::after { content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -7px; width: 1px; height: 7px; background: var(--ao-bd-2); }
.tk-pin-dot { width: 8px; height: 8px; border-radius: var(--ao-r-full); background: var(--tk-solar); box-shadow: 0 0 8px var(--tk-solar); }
.tk-pin.is-on { border-color: var(--tk-solar); background: var(--ao-charcoal); }
.tk-pin.is-edge { opacity: 0.8; }
.tk-pin[hidden] { display: none; }
body[data-nogl="true"] .tk-pins { display: none; }

/* the scene panel */
.tk-panel { position: fixed; z-index: 3; left: var(--ao-sp-4); right: var(--ao-sp-4); bottom: calc(76px + env(safe-area-inset-bottom)); max-width: 440px; max-height: 54dvh; overflow: auto; box-sizing: border-box; padding: var(--ao-sp-4); display: flex; flex-direction: column; gap: var(--ao-sp-2); background: var(--ao-glass-hi); border: 1px solid var(--ao-bd-1); border-top: 3px solid var(--tk-solar); border-radius: var(--ao-r-card); backdrop-filter: blur(var(--ao-blur-panel)); -webkit-backdrop-filter: blur(var(--ao-blur-panel)); }
.tk-title { margin: 0; font-family: var(--ao-f-display); font-weight: var(--ao-w-light); font-size: 24px; line-height: 1.15; letter-spacing: var(--ao-ls-tight); }
.tk-what { margin: 0; font-size: 15px; line-height: 1.35; color: var(--ao-t1); }
.tk-toggle { display: flex; gap: 0; border: 1px solid var(--ao-bd-2); border-radius: var(--ao-r-pill); overflow: hidden; align-self: flex-start; }
.tk-toggle[hidden] { display: none; }
.tk-tbtn { min-height: 40px; padding: 0 var(--ao-sp-3); font-size: 14px; color: var(--ao-t0); background: transparent; border: 0; cursor: pointer; }
.tk-tbtn[aria-pressed="true"] { background: var(--tk-solar); color: var(--ao-void); }
.tk-line { margin: 0; font-size: 16px; line-height: 1.35; }
.tk-line[hidden] { display: none; }
.tk-line-k { display: block; font-family: var(--ao-f-mono); font-size: 11px; letter-spacing: var(--ao-ls-mono); text-transform: uppercase; color: var(--ao-t1); margin-bottom: 2px; }
.tk-line[data-view="orbit"] .tk-line-k { color: var(--tk-solar); }
.tk-cap { margin: 0; min-height: 1.3em; font-size: 15px; line-height: 1.3; color: var(--ao-t1); }
.tk-cap.is-in { animation: tk-fade .5s ease both; }
.tk-flows { margin: 0; font-size: 12px; color: var(--ao-t2); }
.tk-flows[hidden] { display: none; }
.tk-close { margin: 0; font-family: var(--ao-f-display); font-size: 18px; color: var(--tk-solar); animation: tk-fade .8s ease both; }
.tk-close[hidden] { display: none; }
.tk-kpis { display: flex; flex-direction: column; gap: var(--ao-sp-2); }
.tk-kpis[hidden] { display: none; }
.tk-tag { align-self: flex-start; margin: 0; padding: 2px var(--ao-sp-3); border: 1px solid var(--ao-bd-2); border-radius: var(--ao-r-pill); font-family: var(--ao-f-mono); font-size: 11px; letter-spacing: var(--ao-ls-mono); text-transform: uppercase; color: var(--ao-t1); }
.tk-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--ao-sp-2); }
.tk-rail li { background: var(--ao-sf-1); border: 1px solid var(--ao-bd-1); border-radius: var(--ao-r-lg); padding: 6px var(--ao-sp-3); display: flex; flex-direction: column; gap: 1px; }
.tk-v { font-family: var(--ao-f-mono); font-size: 19px; font-variant-numeric: tabular-nums; color: var(--ao-t0); }
.tk-l { font-size: 12px; line-height: 1.25; color: var(--ao-t1); }
.tk-links { display: flex; flex-wrap: wrap; gap: var(--ao-sp-2); }
.tk-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--ao-sp-4); border: 1px solid var(--ao-bd-2); border-radius: var(--ao-r-lg); color: var(--ao-t0); background: var(--ao-sf-1); text-decoration: none; font-size: 15px; }
.tk-link--main { background: var(--tk-solar); border-color: var(--tk-solar); color: var(--ao-void); }
.tk-link:hover { color: var(--ao-t0); }
.tk-link--main:hover { color: var(--ao-void); }
.tk-honest { margin: 0; font-size: 11px; line-height: 1.35; color: var(--ao-t2); }
.tk-nogl { display: none; margin: 0; font-size: 13px; color: var(--ao-t1); }
body[data-nogl="true"] .tk-nogl { display: block; }
.tk-hint { margin: 0; padding: var(--ao-sp-2) var(--ao-sp-3); border-radius: var(--ao-r-lg); background: var(--ao-orbit-15); font-size: 14px; line-height: 1.3; }
.tk-hint[hidden] { display: none; }

/* panel header: title plus the minimize button; minimized, only the title and the Today / With switch stay */
.tk-head { display: flex; align-items: flex-start; gap: var(--ao-sp-2); }
.tk-head .tk-title { flex: 1; }
.tk-min { flex: none; min-height: 36px; padding: 0 var(--ao-sp-3); font-size: 13px; color: var(--ao-t1); background: transparent; border: 1px solid var(--ao-bd-2); border-radius: var(--ao-r-pill); cursor: pointer; }
.tk-min:hover { color: var(--ao-t0); border-color: var(--ao-t1); }
.tk-min:focus-visible { outline: 2px solid var(--ao-t0); outline-offset: 2px; }
body.is-min .tk-panel > :not(.tk-head):not(.tk-toggle) { display: none; }
body.is-min .tk-panel { overflow: hidden; }

/* the risk on the Today view, and the same spot covered With Agent Orbit: a panel block and a tag pinned in 3D */
.tk-risk { margin: 0; padding: var(--ao-sp-2) var(--ao-sp-3); border-left: 3px solid var(--ao-alert); background: var(--ao-alert-12); border-radius: 0 var(--ao-r-lg) var(--ao-r-lg) 0; }
.tk-risk[hidden] { display: none; }
.tk-risk[data-view="orbit"] { border-left-color: var(--tk-solar); background: var(--ao-orbit-15); }
.tk-risk-k { margin: 0; font-family: var(--ao-f-mono); font-size: 11px; letter-spacing: var(--ao-ls-mono); text-transform: uppercase; color: var(--ao-alert); }
.tk-risk[data-view="orbit"] .tk-risk-k { color: var(--tk-solar); }
.tk-risk-t { margin: 2px 0 4px; font-family: var(--ao-f-display); font-weight: 500; font-size: 17px; line-height: 1.25; }
.tk-risk-x { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ao-t0); }
.tk-flag { position: fixed; left: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 6px 12px 6px 8px; font-size: 13px; line-height: 1.2; color: var(--ao-t0); background: var(--ao-glass-hi); border: 1px solid var(--ao-alert); border-radius: var(--ao-r-lg); pointer-events: none; box-shadow: var(--ao-glow-alert); }
.tk-flag::after { content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -9px; width: 2px; height: 9px; background: var(--ao-alert); }
.tk-flag[hidden] { display: none; }
.tk-flag-k { padding: 2px 6px; border-radius: var(--ao-r-sm); font-family: var(--ao-f-mono); font-size: 10px; letter-spacing: var(--ao-ls-mono); text-transform: uppercase; color: var(--ao-void); background: var(--ao-alert); }
.tk-flag[data-view="orbit"] { border-color: var(--tk-solar); box-shadow: var(--ao-glow-orbit); }
.tk-flag[data-view="orbit"]::after, .tk-flag[data-view="orbit"] .tk-flag-k { background: var(--tk-solar); }
body[data-nogl="true"] .tk-flag, body.is-shot .tk-flag { display: none; }

/* Agent Orbit chat panel (T3). Hidden unless the build is made with TRUCKING_CHAT=1. */
.tk-ask[hidden], .tk-ask-body[hidden] { display: none; }
.tk-ask { position: fixed; z-index: 6; right: var(--ao-sp-4); bottom: calc(84px + env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 2 * var(--ao-sp-4))); display: flex; flex-direction: column; align-items: flex-end; gap: var(--ao-sp-2); }
.tk-ask-open { min-height: 44px; padding: 0 var(--ao-sp-4); font-size: 14px; color: var(--ao-t0); background: var(--ao-glass-hi); border: 1px solid var(--ao-bd-2); border-radius: var(--ao-r-pill); cursor: pointer; backdrop-filter: blur(var(--ao-blur-panel)); -webkit-backdrop-filter: blur(var(--ao-blur-panel)); }
.tk-ask-open[aria-expanded="true"] { border-color: var(--tk-solar); box-shadow: inset 0 -3px 0 var(--tk-solar); }
.tk-ask-body { box-sizing: border-box; align-self: stretch; max-height: 52dvh; overflow: auto; padding: var(--ao-sp-3); display: flex; flex-direction: column; gap: var(--ao-sp-2); background: var(--ao-glass-hi); border: 1px solid var(--ao-bd-1); border-top: 3px solid var(--tk-solar); border-radius: var(--ao-r-card); backdrop-filter: blur(var(--ao-blur-panel)); -webkit-backdrop-filter: blur(var(--ao-blur-panel)); }
.tk-ask-note { margin: 0; font-size: 12px; line-height: 1.35; color: var(--ao-t1); }
.tk-chips { display: flex; flex-wrap: wrap; gap: var(--ao-sp-1); }
.tk-chips:empty { display: none; }
.tk-chip { min-height: 36px; padding: 0 var(--ao-sp-3); font-size: 13px; color: var(--ao-t0); background: var(--ao-sf-1); border: 1px solid var(--ao-bd-2); border-radius: var(--ao-r-pill); cursor: pointer; }
.tk-chip:disabled { opacity: 0.5; cursor: default; }
.tk-ask-log { display: flex; flex-direction: column; gap: var(--ao-sp-2); max-height: 24dvh; overflow: auto; }
.tk-ask-log:empty { display: none; }
.tk-ask-you, .tk-ask-bot { margin: 0; padding: var(--ao-sp-2) var(--ao-sp-3); font-size: 14px; line-height: 1.35; border-radius: var(--ao-r-lg); }
.tk-ask-you { align-self: flex-end; background: var(--ao-sf-1); }
.tk-ask-bot { align-self: flex-start; border: 1px solid var(--ao-bd-1); }
.tk-ask-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tk-ask-row { display: flex; gap: var(--ao-sp-2); }
.tk-ask-q { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--ao-sp-3); font-size: 16px; color: var(--ao-t0); background: var(--ao-sf-1); border: 1px solid var(--ao-bd-2); border-radius: var(--ao-r-lg); }
.tk-ask-send { min-height: 44px; padding: 0 var(--ao-sp-4); font-size: 14px; color: var(--ao-void); background: var(--tk-solar); border: 0; border-radius: var(--ao-r-lg); cursor: pointer; }
.tk-ask-send:disabled, .tk-ask-q:disabled { opacity: 0.6; cursor: default; }
.tk-ask-open:focus-visible, .tk-chip:focus-visible, .tk-ask-q:focus-visible, .tk-ask-send:focus-visible { outline: 2px solid var(--ao-t0); outline-offset: 2px; }

/* the dock */
/* bottom center: Fly and Walk only. Top right: one stack (Tour, playback, Look) that minimizes to a single button. */
.tk-dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--ao-sp-3) + env(safe-area-inset-bottom)); z-index: 5; display: flex; gap: var(--ao-sp-1); padding: var(--ao-sp-1); background: var(--ao-glass-hi); border: 1px solid var(--ao-bd-1); border-radius: var(--ao-r-lg); backdrop-filter: blur(var(--ao-blur-panel)); -webkit-backdrop-filter: blur(var(--ao-blur-panel)); }
.tk-ctl { position: fixed; z-index: 5; right: var(--ao-sp-4); top: calc(56px + env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: stretch; gap: var(--ao-sp-2); width: 84px; }
.tk-ctl-body { display: flex; flex-direction: column; gap: var(--ao-sp-2); }
.tk-ctl.is-min .tk-ctl-body { display: none; }
.tk-ctl .tk-modes, .tk-ctl .tk-play { flex-direction: column; }
.tk-ctl .tk-btn { min-width: 0; min-height: 40px; background: var(--ao-glass-hi); backdrop-filter: blur(var(--ao-blur-panel)); -webkit-backdrop-filter: blur(var(--ao-blur-panel)); }
.tk-ctl .tk-btn[aria-pressed="true"] { background: var(--ao-t0); }
.tk-ctl .tk-ctl-min { min-height: 32px; font-size: 12px; font-family: var(--ao-f-mono); letter-spacing: var(--ao-ls-mono); text-transform: uppercase; color: var(--ao-t1); }
.tk-modes, .tk-play { display: flex; gap: var(--ao-sp-1); }
.tk-btn { min-height: 44px; min-width: 56px; padding: 0 var(--ao-sp-3); font-size: 14px; color: var(--ao-t0); background: var(--ao-sf-1); border: 1px solid var(--ao-bd-2); border-radius: var(--ao-r-lg); cursor: pointer; }
.tk-btn[aria-pressed="true"] { background: var(--ao-t0); color: var(--ao-void); box-shadow: inset 0 -3px 0 var(--tk-solar); }
body.is-paused #pause { background: var(--tk-solar); border-color: var(--tk-solar); color: var(--ao-void); box-shadow: none; }
.tk-link:focus-visible, .tk-btn:focus-visible, .tk-loc:focus-visible, .tk-tbtn:focus-visible { outline: 2px solid var(--ao-t0); outline-offset: 2px; }

@media (max-width: 1023px) {
  .tk-ask { top: calc(98px + env(safe-area-inset-top)); bottom: auto; right: auto; left: var(--ao-sp-4); align-items: flex-start; }
  .tk-ctl { top: calc(98px + env(safe-area-inset-top)); }
  .tk-ask-body { position: fixed; left: var(--ao-sp-2); right: var(--ao-sp-2); width: auto; bottom: calc(108px + env(safe-area-inset-bottom)); max-height: 56dvh; background: var(--ao-charcoal); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 640px) {
  .tk-locs { top: calc(50px + env(safe-area-inset-top)); }
  .tk-loc { min-height: 36px; font-size: 13px; }
  .tk-panel { left: var(--ao-sp-2); right: var(--ao-sp-2); max-height: 42dvh; padding: var(--ao-sp-3); gap: 6px; bottom: calc(108px + env(safe-area-inset-bottom)); }
  .tk-title { font-size: 18px; }
  .tk-what, .tk-cap { font-size: 14px; }
  .tk-line { font-size: 15px; }
  .tk-rail { gap: 6px; }
  .tk-rail li { padding: 6px var(--ao-sp-2); }
  .tk-v { font-size: 16px; }
  .tk-l { font-size: 11px; }
  .tk-links { flex-wrap: nowrap; }
  .tk-link { min-height: 40px; padding: 0 var(--ao-sp-3); font-size: 14px; flex: 1; }
  .tk-btn { min-width: 48px; padding: 0 var(--ao-sp-2); }
  .tk-ctl, .tk-ctl-body, .tk-ctl .tk-modes, .tk-ctl .tk-play { gap: 4px; }
  .tk-ctl .tk-btn { min-height: 36px; }
  .tk-ctl .tk-ctl-min { min-height: 30px; }
  .tk-pin { min-height: 28px; font-size: 11px; padding: 0 8px; }
  .tk-flag { max-width: 200px; font-size: 12px; }
  .tk-risk-t { font-size: 15px; }
  .tk-risk-x { font-size: 13px; }
}
@media (min-width: 1024px) {
  .tk-locs { top: calc(var(--ao-sp-3) + env(safe-area-inset-top)); left: 64px; right: 140px; }
  .tk-panel { left: var(--ao-sp-6); bottom: calc(84px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 84px - 84px); }
}

/* link-preview capture (?shot=og): the scene, the pinned cards and a title only */
body.is-shot .tk-panel, body.is-shot .tk-dock, body.is-shot .tk-ctl, body.is-shot .tk-locs, body.is-shot .tk-count, body.is-shot .tk-ask { display: none; }
body.is-shot .tk-shot-title { display: block; }

@keyframes tk-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}