/* Oil and Gas 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-panel > * { flex-shrink: 0; } /* a crowded panel scrolls; its parts never squash (the Today / With switch would otherwise collapse) */
.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; }

/* "How it runs today" and "With Agent Orbit": a panel block and a tag pinned in 3D. Neutral on Today, Solar Orange With Agent Orbit; no red tint. */
.tk-how { margin: 0; padding: var(--ao-sp-2) var(--ao-sp-3); border-left: 3px solid var(--ao-bd-2); background: var(--ao-sf-1); border-radius: 0 var(--ao-r-lg) var(--ao-r-lg) 0; }
.tk-how[hidden] { display: none; }
.tk-how[data-view="orbit"] { border-left-color: var(--tk-solar); background: var(--ao-orbit-15); }
.tk-how-k { margin: 0; font-family: var(--ao-f-mono); font-size: 11px; letter-spacing: var(--ao-ls-mono); text-transform: uppercase; color: var(--ao-t1); }
.tk-how[data-view="orbit"] .tk-how-k { color: var(--tk-solar); }
.tk-how-t { margin: 2px 0 4px; font-family: var(--ao-f-display); font-weight: 500; font-size: 17px; line-height: 1.25; }
.tk-how-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-bd-2); border-radius: var(--ao-r-lg); pointer-events: none; }
.tk-flag::after { content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -9px; width: 2px; height: 9px; background: var(--ao-bd-2); }
.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-t1); }
.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; }

/* 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: 0; right: 0; margin-inline: auto; width: max-content; 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)); }
/* navigation tips: one line for the current mode and Hide tips, top left under the location chips (the bottom is taken by the panel). Reset view lives in the top right stack. A separate fixed box, so the dock's box (which centres the scene) is unchanged. */
.tk-nav { position: fixed; z-index: 5; left: var(--ao-sp-4); top: calc(98px + env(safe-area-inset-top)); max-width: calc(100vw - 124px); pointer-events: none; }
@media (min-width: 1024px) { .tk-nav { top: calc(56px + env(safe-area-inset-top)); left: var(--ao-sp-6); max-width: min(46vw, 440px); } }
@media (max-width: 640px) { .tk-nav { left: var(--ao-sp-2); } .tk-nav-tip { font-size: 13px; } }
.tk-nav > * { pointer-events: auto; }
.tk-pad { position: fixed; z-index: 5; right: var(--ao-sp-4); bottom: calc(var(--ao-sp-3) + env(safe-area-inset-bottom)); width: 156px; display: flex; flex-direction: column; align-items: stretch; gap: var(--ao-sp-2); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (min-width: 1024px) { .tk-pad { right: var(--ao-sp-6); } }
.tk-pad .tk-btn { min-width: 0; padding: 0; font-size: 13px; background: var(--ao-glass-hi); backdrop-filter: blur(var(--ao-blur-panel)); -webkit-backdrop-filter: blur(var(--ao-blur-panel)); touch-action: none; }
.tk-pad .tk-pad-head { min-height: 32px; padding: 0 var(--ao-sp-3); display: flex; align-items: center; justify-content: space-between; font-family: var(--ao-f-mono); font-size: 12px; letter-spacing: var(--ao-ls-mono); text-transform: uppercase; color: var(--ao-t1); }
.tk-pad-head::after { content: ""; width: 7px; height: 7px; margin-left: var(--ao-sp-2); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.tk-pad.is-min { width: auto; align-self: flex-end; }
.tk-pad.is-aside { right: calc(var(--ao-sp-4) + 92px); } /* a very short window: the header slides left of the controls stack (84 px wide, same right margin) */
.tk-pad.is-min .tk-pad-head::after { transform: rotate(-135deg) translateY(-2px); }
.tk-pad.is-min .tk-pad-body { display: none; }
.tk-pad-body { display: flex; flex-direction: column; gap: var(--ao-sp-2); padding: var(--ao-sp-2); background: var(--ao-glass-hi); border: 1px solid var(--ao-bd-1); border-radius: var(--ao-r-card); backdrop-filter: blur(var(--ao-blur-panel)); -webkit-backdrop-filter: blur(var(--ao-blur-panel)); }
.tk-pad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tk-pad .tk-pad-btn { min-height: 44px; display: grid; place-items: center; }
.tk-pad-btn:active { background: var(--ao-t0); color: var(--ao-void); }
.tk-pad-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-pad-btn span { display: grid; place-items: center; }
body:not([data-mode="walk"]) .tk-pad-btn .ic-walk, body[data-mode="walk"] .tk-pad-btn .ic-fly { display: none; }
.tk-pad .tk-pad-wide { min-height: 40px; }
.tk-pad .tk-btn:focus-visible { outline: 2px solid var(--ao-t0); outline-offset: 2px; }
body.is-shot .tk-pad, body[data-nogl="true"] .tk-pad { display: none; }
.tk-nav-tips { display: flex; align-items: center; gap: var(--ao-sp-2); padding: var(--ao-sp-1) var(--ao-sp-1) var(--ao-sp-1) var(--ao-sp-3); 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-nav-tips[hidden] { display: none; }
.tk-nav-btn[hidden] { display: none; }
.tk-edge { position: fixed; z-index: 6; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: calc(92px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: var(--ao-sp-2); flex-wrap: wrap; justify-content: center; max-width: min(92vw, 560px); padding: var(--ao-sp-2) var(--ao-sp-3); border-radius: var(--ao-r-lg); background: var(--ao-glass-hi); backdrop-filter: blur(var(--ao-blur-panel)); -webkit-backdrop-filter: blur(var(--ao-blur-panel)); border: 1px solid var(--tk-solar); font-size: 14px; line-height: 1.3; color: var(--ao-t0); }
.tk-edge[hidden] { display: none; }
@media (min-width: 1024px) { .tk-edge { left: 780px; right: 150px; margin-inline: 0; width: auto; max-width: 520px; } } /* clear of the left panel on a wide screen */
body.is-shot .tk-edge, body[data-nogl="true"] .tk-edge { display: none; }
.tk-nav-tip { margin: 0; font-size: 14px; line-height: 1.3; color: var(--ao-t0); }
.tk-nav .tk-nav-btn { min-height: 36px; min-width: 0; font-size: 13px; background: var(--ao-glass-hi); backdrop-filter: blur(var(--ao-blur-panel)); -webkit-backdrop-filter: blur(var(--ao-blur-panel)); }
.tk-nav .tk-nav-btn:focus-visible { outline: 2px solid var(--ao-t0); outline-offset: 2px; }
body.is-shot .tk-nav, body[data-nogl="true"] .tk-nav { display: none; }
.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); }
.tk-btn.is-invite { border-color: var(--tk-solar); box-shadow: 0 0 0 2px var(--tk-solar), 0 0 18px var(--tk-solar); animation: tk-glow 1.1s ease-in-out infinite alternate; }
@keyframes tk-glow { from { box-shadow: 0 0 0 2px var(--tk-solar), 0 0 6px var(--tk-solar); } to { box-shadow: 0 0 0 2px var(--tk-solar), 0 0 24px var(--tk-solar); } }
.tk-invite { position: fixed; z-index: 7; max-width: min(250px, 56vw); padding: var(--ao-sp-2) var(--ao-sp-3); border-radius: var(--ao-r-lg); background: var(--ao-void); border: 1px solid var(--tk-solar); font-size: 14px; line-height: 1.3; color: var(--ao-t0); pointer-events: none; }
.tk-invite[hidden] { display: none; }
.tk-invite::after { content: ""; position: absolute; top: 22px; right: -7px; width: 12px; height: 12px; background: var(--ao-void); border-top: 1px solid var(--tk-solar); border-right: 1px solid var(--tk-solar); transform: rotate(45deg); }
body.is-shot .tk-invite, body[data-nogl="true"] .tk-invite { display: 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-ctl { top: calc(98px + env(safe-area-inset-top)); }
  .tk-panel { max-height: min(54dvh, calc(100dvh - 76px - 164px)); } /* leave room at the top for the navigation tips */
}
@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: min(42dvh, calc(100dvh - 108px - 180px)); 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-how-t { font-size: 15px; }
  .tk-how-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 - 120px); } /* 120 px at the top leaves room for the navigation tips under the location chips */
}

/* 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 { 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; }
}