/* Sky Lab workspace. Shared design tokens and subpage chrome stay in the
   existing stylesheets; this file only owns the simulator surface. */
.sky-lab-wrap { max-width: 1440px; }
.sky-lab-main { min-width: 0; }
.sky-lab-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 24px 0 12px; }
.sky-lab-hero h1 { margin: 4px 0 8px; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.08; }
.sky-lab-hero .lead { margin: 0; max-width: 760px; }
.sky-lab-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.sky-lab-kicker, .sky-lab-map-kicker { color: #8fa2c2; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.sky-lab-demo-badge { display: inline-block; margin-left: 4px; padding: 2px 7px; border: 1px solid #ffb020; border-radius: 999px; color: #ffcf70; letter-spacing: .08em; }
.sky-lab-isolation-note { margin: 8px 0 16px; padding: 10px 12px; border: 1px solid #6b541d; border-radius: 10px; background: #211b0d; color: #ffe6b0; font-size: 12px; line-height: 1.45; }
.sky-lab-workspace { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(310px, .8fr); gap: 12px; align-items: start; }
.sky-lab-map-column, .sky-lab-sidebar { min-width: 0; border: 1px solid #22314a; border-radius: 16px; background: #0b1423; overflow: hidden; }
.sky-lab-map-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #1b2a43; }
.sky-lab-map-head strong { display: block; margin-top: 2px; font-size: 13px; color: #e7effc; }
.sky-lab-map-status { display: flex; align-items: center; gap: 8px; color: #8fa2c2; font-size: 11px; white-space: nowrap; }
.sky-lab-state { display: inline-block; padding: 3px 7px; border: 1px solid #2b3b57; border-radius: 999px; color: #b8c7df; font-weight: 800; font-size: 10px; letter-spacing: .08em; }
.sky-lab-state.is-running { border-color: #2d6b4b; color: #7bf0b0; background: #10291f; }
.sky-lab-state.is-paused { border-color: #6b541d; color: #ffcf70; background: #2a210d; }
.sky-lab-map { height: clamp(360px, 59vh, 680px); background: #07101f; position: relative; }
.sky-lab-map .maplibregl-ctrl-attrib { font-size: 9px; }
.sky-lab-timebar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 10px; border-top: 1px solid #1b2a43; border-bottom: 1px solid #1b2a43; background: #0a1729; }
.sky-lab-transport { display: flex; flex-wrap: wrap; gap: 5px; }
.sky-lab-timebar .ng-btn { min-height: 34px; padding: 6px 9px; font-size: 11px; }
.sky-lab-range-label { display: flex; align-items: center; gap: 6px; flex: 1 1 180px; min-width: 140px; color: #8fa2c2; font-size: 10px; }
.sky-lab-range-label output { color: #dce6f7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sky-lab-range-label input { min-width: 70px; accent-color: #ffb020; }
.sky-lab-speed-label { display: flex; align-items: center; gap: 5px; color: #8fa2c2; font-size: 10px; }
.sky-lab-speed-label select { min-height: 32px; padding: 3px 5px; }
.sky-lab-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; color: #8fa2c2; font-size: 10px; }
.sky-lab-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sky-lab-line { display: inline-block; width: 18px; height: 0; border-top: 2px solid #ff7bd5; }
.sky-lab-line--future { border-top-style: dashed; opacity: .75; }
.sky-lab-dot { display: inline-block; width: 8px; height: 8px; border: 1px solid #ffb020; border-radius: 50%; background: #ff7bd5; }
.sky-lab-legend-note { margin-left: auto; }
.sky-lab-map-note { margin: 0; padding: 0 12px 10px; color: #8fa2c2; font-size: 10px; line-height: 1.4; }
.sky-lab-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px 8px; border-bottom: 1px solid #1b2a43; }
.sky-lab-sidebar-head strong { display: block; margin-top: 2px; font-size: 14px; }
.sky-lab-sheet-toggle { display: none; border: 1px solid #2b3b57; border-radius: 8px; background: #16233a; color: #dce6f7; padding: 7px 9px; font: inherit; font-size: 11px; }
.sky-lab-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 7px 8px; border-bottom: 1px solid #1b2a43; scrollbar-width: thin; }
.sky-lab-tabs button { flex: none; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #8fa2c2; padding: 7px 8px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; min-height: 36px; }
.sky-lab-tabs button[aria-selected="true"] { border-color: #355882; background: #16233a; color: #f5f9ff; }
.sky-lab-tabs button:focus-visible, .sky-lab-sidebar button:focus-visible, .sky-lab-sidebar a:focus-visible, .sky-lab-map:focus-visible { outline: 2px solid #ffb020; outline-offset: 2px; }
.sky-lab-sidebar-body { padding: 10px; max-height: min(62vh, 620px); overflow: auto; overscroll-behavior: contain; }
.sky-lab-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sky-lab-sidebar .ng-field { display: grid; gap: 3px; margin: 0 0 7px; color: #8fa2c2; font-size: 10px; font-weight: 700; }
.sky-lab-sidebar .ng-field input, .sky-lab-sidebar .ng-field select, .sky-lab-sidebar .ng-field textarea { width: 100%; min-height: 36px; border: 1px solid #2b3b57; border-radius: 7px; background: #081426; color: #dce6f7; padding: 6px 7px; font: inherit; font-size: 12px; }
.sky-lab-sidebar .ng-field textarea { min-height: 74px; resize: vertical; font-family: ui-monospace, monospace; font-size: 10px; }
.sky-lab-actions { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.sky-lab-actions .ng-btn { min-height: 34px; padding: 6px 9px; font-size: 11px; }
.sky-lab-object-list, .sky-lab-local-list, .sky-lab-library, .sky-lab-history { display: grid; gap: 5px; }
.sky-lab-object { display: flex; align-items: center; gap: 7px; width: 100%; border: 1px solid #22314a; border-radius: 9px; background: #0d1829; color: #dce6f7; padding: 7px; text-align: left; cursor: pointer; }
.sky-lab-object:hover { border-color: #355882; }
.sky-lab-object.is-selected { border-color: #ffb020; background: #16233a; }
.sky-lab-object-icon { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #2a0d2e; border: 1px solid #ff7bd5; }
.sky-lab-object-icon canvas { width: 22px; height: 22px; display: block; }
.sky-lab-object-main { min-width: 0; flex: 1; }
.sky-lab-object-main b { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sky-lab-object-main small { display: block; margin-top: 2px; color: #8fa2c2; font-size: 10px; }
.sky-lab-object-demo { color: #ffcf70; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.sky-lab-empty { padding: 12px; border: 1px dashed #2b3b57; border-radius: 9px; color: #8fa2c2; font-size: 11px; }
.sky-lab-hint { margin: 7px 0; color: #8fa2c2; font-size: 10px; line-height: 1.45; }
.sky-lab-subhead { margin: 12px 0 5px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #ffcf70; }
.sky-lab-library-item, .sky-lab-local-item, .sky-lab-history-item { border: 1px solid #22314a; border-radius: 9px; background: #0d1829; padding: 8px; }
.sky-lab-library-item h3, .sky-lab-local-item h3 { margin: 0 0 3px; font-size: 11px; color: #e7effc; }
.sky-lab-library-item p, .sky-lab-local-item p, .sky-lab-history-item p { margin: 0; color: #8fa2c2; font-size: 10px; line-height: 1.4; }
.sky-lab-library-item .sky-lab-actions, .sky-lab-local-item .sky-lab-actions { margin: 6px 0 0; }
.sky-lab-map-marker { position: relative; width: 40px; height: 40px; cursor: pointer; }
.sky-lab-map-marker canvas { position: absolute; inset: 5px; width: 30px; height: 30px; transform: rotate(var(--sky-heading, 0deg)) scale(var(--sky-scale, 1)); transform-origin: center; transition: transform .12s linear; }
.sky-lab-map-marker::before { content: ""; position: absolute; inset: 1px; border: 2px solid #ffb020; border-radius: 50%; box-shadow: 0 0 0 2px #ff7bd5; opacity: .9; }
.sky-lab-map-marker.is-selected { filter: drop-shadow(0 0 6px #ffb020); }
.sky-lab-map-marker.is-selected::before { border-color: #fff; box-shadow: 0 0 0 2px #ffb020; }
.sky-lab-map-marker .sky-lab-marker-label { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 1px 4px; border-radius: 4px; background: #2a210d; border: 1px solid #ffb020; color: #ffe6b0; font: 800 8px/1.2 system-ui; white-space: nowrap; pointer-events: none; }
.sky-lab-faq { margin-top: 12px; border-top: 1px solid #22314a; padding-top: 10px; }
.sky-lab-faq summary { cursor: pointer; color: #ffcf70; font-weight: 700; }
.sky-lab-faq details, .sky-lab-faq summary { min-height: 36px; }
.sky-lab-faq h3 { margin: 10px 0 2px; font-size: 12px; }
.sky-lab-faq p { margin: 0 0 6px; color: #b8c7df; font-size: 12px; }
.sky-lab-about { margin-top: 18px; padding: 14px; }
.sky-lab-about h2 { margin: 0 0 8px; font-size: 19px; }
.sky-lab-about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sky-lab-about h3 { margin: 0 0 4px; font-size: 12px; color: #ffcf70; }
.sky-lab-about p { margin: 0; color: #b8c7df; font-size: 12px; line-height: 1.5; }
@media (max-width: 960px) {
  .sky-lab-workspace { grid-template-columns: 1fr; }
  .sky-lab-sidebar { position: sticky; bottom: 10px; z-index: 4; max-height: 62vh; }
  .sky-lab-sheet-toggle { display: inline-block; }
  .sky-lab-sidebar-body { max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: max-height .2s ease; }
  .sky-lab-sidebar.sheet-open .sky-lab-sidebar-body { max-height: 52vh; overflow: auto; padding-top: 10px; padding-bottom: 10px; }
  .sky-lab-map { height: 48vh; min-height: 300px; }
}
@media (max-width: 620px) {
  .sky-lab-hero { align-items: flex-start; flex-direction: column; padding-top: 16px; }
  .sky-lab-hero-actions { width: 100%; }
  .sky-lab-hero-actions .ng-btn { flex: 1 1 auto; }
  .sky-lab-sidebar { bottom: 0; border-radius: 14px 14px 0 0; }
  .sky-lab-sidebar.sheet-open { max-height: 72vh; }
  .sky-lab-field-row { grid-template-columns: 1fr; }
  .sky-lab-timebar { gap: 6px; }
  .sky-lab-range-label { order: 3; flex-basis: 100%; }
  .sky-lab-about-grid { grid-template-columns: 1fr; }
  .sky-lab-legend-note { display: none; }
  .sky-lab-map { height: 42vh; min-height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-lab-sidebar-body, .sky-lab-map-marker canvas { transition: none; }
}

.sky-lab-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; max-width: min(92vw, 560px); padding: 9px 13px; border: 1px solid #2b3b57; border-radius: 10px; background: #0f1a2c; color: #dce6f7; box-shadow: 0 8px 30px #0009; font-size: 12px; }
.sky-lab-toast.is-bad { border-color: #7d2638; color: #ffd7dd; }

.sky-lab-p2p { margin: 8px 0; border: 1px solid #22314a; border-radius: 9px; background: #0a1729; padding: 8px; }
.sky-lab-p2p > summary { cursor: pointer; color: #ffcf70; font-size: 10px; font-weight: 800; min-height: 32px; }
.sky-lab-p2p-code { width: 100%; min-height: 74px; border: 1px solid #2b3b57; border-radius: 7px; background: #07101f; color: #dce6f7; padding: 6px; font: 9px/1.35 ui-monospace, monospace; resize: vertical; }

.sky-lab-p2p-objects { display: grid; gap: 3px; max-height: 150px; overflow: auto; margin: 5px 0; color: #b8c7df; font-size: 10px; }
.sky-lab-p2p-objects div { padding: 4px; border: 1px solid #22314a; border-radius: 6px; background: #0d1829; }
.sky-lab-p2p-objects span { color: #ffcf70; font-size: 8px; font-weight: 800; }