/* ============================================================
   QUANTDIGITALS — WORKSTATION

   The persistent frame (rail, bar, margin, canvas, context,
   strip) and the globe pane that sits inside it.

   Everything here is scoped under .qd-workstation so it can be
   loaded alongside core.css without the two fighting over the
   root token block.

   Contents
     1. Tokens        both grounds
     2. Frame         the six zones
     3. Rail
     4. Bar + spine
     5. Margin        provenance readout
     6. Context       property sheet, chips, actions
     7. Strip
     8. Globe pane    overlays, readout, states
     9. Cesium        the only rules that touch vendor markup
   ============================================================ */

/* ---------- 1. TOKENS ------------------------------------- */
/* Dark is the base, matching the rest of the site. Light is a
   full theme, not an inversion.                               */

.qd-workstation {
  --w-bg:      #0A0C0B;
  --w-app:     #0E100F;
  --w-rail:    #0C0E0D;
  --w-panel:   #101312;
  --w-raised:  #161A18;
  --w-line:    #212625;
  --w-line-2:  #353C39;
  --w-hair:    #191D1C;
  --w-ink:     #E7EBE9;
  --w-ink-2:   #97A19C;
  --w-ink-3:   #6A746F;
  --w-accent:  #E8535C;
  --w-accent-bg: rgba(232, 83, 92, 0.15);
  --w-pass:    #4CB489;
  --w-warn:    #D3A140;
  --w-sel:     rgba(200, 230, 220, 0.05);

  /* Legend-bound entity hues. The globe reads these directly,
     so they are the single source of truth for entity colour. */
  --globe-domain:    #7BA0B5;
  --globe-ip:        #4FA396;
  --globe-identity:  #9A8CC0;
  --globe-cert:      #C39A52;
  --globe-org:       #C08791;
  --globe-landmark:  #8D9A94;
  --globe-camera:    #D9A441;
  --globe-aircraft:  #5B8FC7;
  --globe-datacenter: #D866AC;

  --globe-ocean:     #16241F;
  --globe-land:      #7C8A85;
  --globe-coast:     #93A19B;
  --globe-grid:      #2C3331;
  --globe-grid-main: #414A46;
  --globe-select:    #E8535C;
  --globe-label:     #E7EBE9;

  --w-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --w-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .qd-workstation {
    --w-bg:      #F4F7F5;
    --w-app:     #E7ECE9;
    --w-rail:    #E2E8E4;
    --w-panel:   #EDF1EF;
    --w-raised:  #FBFCFB;
    --w-line:    #D2D8D4;
    --w-line-2:  #B6BEBA;
    --w-hair:    #DFE5E1;
    --w-ink:     #0F1412;
    --w-ink-2:   #49514D;
    --w-ink-3:   #77817C;
    --w-accent:  #C9262F;
    --w-accent-bg: rgba(201, 38, 47, 0.10);
    --w-pass:    #1A6E4C;
    --w-warn:    #83610F;
    --w-sel:     rgba(24, 56, 46, 0.055);

    --globe-domain:    #4E6E80;
    --globe-ip:        #356F68;
    --globe-identity:  #6C6089;
    --globe-cert:      #8C6C33;
    --globe-org:       #8A5B64;
    --globe-landmark:  #5F6B66;
    --globe-camera:    #96692A;
    --globe-aircraft:  #355E8C;
    --globe-datacenter: #A03B78;

    --globe-ocean:     #E3EAE6;
    --globe-land:      #6F7D78;
    --globe-coast:     #55605C;
    --globe-grid:      #C3CDC8;
    --globe-grid-main: #9AA6A1;
    --globe-select:    #C9262F;
    --globe-label:     #0F1412;
  }
}

:root[data-theme="light"] .qd-workstation {
  --w-bg:      #F4F7F5;
  --w-app:     #E7ECE9;
  --w-rail:    #E2E8E4;
  --w-panel:   #EDF1EF;
  --w-raised:  #FBFCFB;
  --w-line:    #D2D8D4;
  --w-line-2:  #B6BEBA;
  --w-hair:    #DFE5E1;
  --w-ink:     #0F1412;
  --w-ink-2:   #49514D;
  --w-ink-3:   #77817C;
  --w-accent:  #C9262F;
  --w-accent-bg: rgba(201, 38, 47, 0.10);
  --w-pass:    #1A6E4C;
  --w-warn:    #83610F;
  --w-sel:     rgba(24, 56, 46, 0.055);

  --globe-domain:    #4E6E80;
  --globe-ip:        #356F68;
  --globe-identity:  #6C6089;
  --globe-cert:      #8C6C33;
  --globe-org:       #8A5B64;
  --globe-landmark:  #5F6B66;
  --globe-camera:    #96692A;
  --globe-aircraft:  #355E8C;
  --globe-datacenter: #A03B78;

  --globe-ocean:     #E3EAE6;
  --globe-land:      #6F7D78;
  --globe-coast:     #55605C;
  --globe-grid:      #C3CDC8;
  --globe-grid-main: #9AA6A1;
  --globe-select:    #C9262F;
  --globe-label:     #0F1412;
}

/* ---------- 2. FRAME -------------------------------------- */

.qd-workstation {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  background: var(--w-app);
  color: var(--w-ink);
  font-family: var(--w-sans);
  font-size: 12px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.qd-workstation * { box-sizing: border-box; }

/* Marketing pages (tools/about/privacy/etc.) share the rail and
   bar pixel-for-pixel with the globe workspace by using the same
   .qd-workstation + .w-rail/.w-mark/.w-nav/.w-item/.w-bar markup,
   but they are ordinary scrolling documents, not the fixed
   full-viewport app-shell the globe needs. This override swaps
   the frame back to normal flow without touching a single rail
   or bar rule, so the two can never drift apart visually. */
.qd-workstation.qd-page {
  position: static;
  inset: auto;
  min-height: 100vh;
  height: auto;
  overflow: visible;
}
.qd-page .w-rail { position: sticky; top: 0; height: 100vh; }

.w-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--w-bg);
}

.w-body {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.w-margin, .w-canvas { min-height: 0; }

/* ---------- 3. RAIL --------------------------------------- */

.w-rail {
  background: var(--w-rail);
  border-right: 1px solid var(--w-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.w-mark {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-bottom: 1px solid var(--w-line);
  font-family: var(--w-mono);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--w-ink);
  text-decoration: none;
  flex: none;
}
.w-mark u { color: var(--w-accent); text-decoration: none; }
.w-mark .v { margin-left: auto; font-size: 8.5px; font-weight: 400; color: var(--w-ink-3); letter-spacing: .08em; }

.w-nav { padding: 10px 0 12px; flex: 1; overflow-y: auto; }
.w-grp {
  font-weight: 600; font-size: 8px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--w-ink-3); padding: 0 12px 6px; margin-top: 13px;
}
.w-nav > .w-grp:first-child { margin-top: 0; }
.w-item {
  display: grid;
  grid-template-columns: 13px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 10px;
  color: var(--w-ink-2);
  font-size: 12px;
  border-left: 2px solid transparent;
  text-decoration: none;
}
.w-item .gl { font-family: var(--w-mono); font-size: 9.5px; color: var(--w-ink-3); text-align: center; }
.w-item .ct { font-family: var(--w-mono); font-size: 9px; color: var(--w-ink-3); }
.w-item:hover { color: var(--w-ink); }
.w-item[aria-current="page"] {
  border-left-color: var(--w-accent);
  background: var(--w-sel);
  color: var(--w-ink);
  font-weight: 500;
}
.w-item[aria-current="page"] .gl { color: var(--w-accent); }
.w-item.is-muted { color: var(--w-ink-3); }

/* ---------- 4. BAR + SPINE -------------------------------- */

.w-bar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid var(--w-line);
  background: var(--w-app);
  flex: none;
}
.w-search {
  flex: 1;
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 25px;
  padding: 0 9px;
  background: var(--w-raised);
  border: 1px solid var(--w-line-2);
  color: var(--w-ink-3);
  font-family: var(--w-mono);
  font-size: 11px;
}
.w-search .scope {
  display: flex; align-items: center; gap: 5px;
  padding-right: 9px; border-right: 1px solid var(--w-line-2);
  color: var(--w-ink-2); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.w-search .ic { color: var(--w-accent); }
.w-search kbd {
  margin-left: auto; font: inherit; font-size: 9px; letter-spacing: .06em;
  border: 1px solid var(--w-line-2); padding: 1px 4px;
}
.w-bar-r { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.w-chip {
  font-family: var(--w-mono); font-size: 9.5px; letter-spacing: .06em;
  border: 1px solid var(--w-line-2); padding: 3px 6px;
  color: var(--w-ink-3); background: none; cursor: pointer;
}
.w-chip:hover, .w-chip[aria-pressed="true"] { color: var(--w-ink); border-color: var(--w-ink-3); }

.w-spine {
  height: 29px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--w-line);
  background: var(--w-app);
  flex: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.w-spine::-webkit-scrollbar { display: none; }
.w-stage {
  display: flex; align-items: center; gap: 7px; padding: 0 13px;
  font-weight: 600; font-size: 8.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--w-ink-3); position: relative; white-space: nowrap;
}
.w-stage .c { font-family: var(--w-mono); font-size: 10px; letter-spacing: 0; }
.w-stage.is-done { color: var(--w-ink-2); }
.w-stage.is-on { color: var(--w-ink); background: var(--w-bg); }
.w-stage.is-on .c { color: var(--w-accent); }
.w-stage.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--w-accent);
}
.w-stage.is-off { opacity: .45; }
.w-arrow { display: flex; align-items: center; color: var(--w-line-2); font-family: var(--w-mono); font-size: 10px; }
.w-spine-r {
  margin-left: auto; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  font-family: var(--w-mono); font-size: 9px; color: var(--w-ink-3); letter-spacing: .07em; white-space: nowrap;
}

/* ---------- 5. MARGIN ------------------------------------- */

.w-margin {
  border-right: 1px solid var(--w-hair);
  padding: 14px 12px;
  overflow-y: auto;
}
.w-block { margin-bottom: 16px; }
.w-block-h {
  font-weight: 600; font-size: 8px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--w-ink-3); padding-bottom: 5px;
  border-bottom: 1px solid var(--w-line); margin-bottom: 6px;
}
.w-row {
  font-family: var(--w-mono); font-size: 9.5px; line-height: 1.5;
  color: var(--w-ink); margin-bottom: 5px;
}
.w-row i {
  display: block; font-style: normal; color: var(--w-ink-3);
  font-size: 8px; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 1px;
}
.w-row.is-ok { color: var(--w-pass); }
.w-row.is-warn { color: var(--w-warn); }

/* ---------- 7. STRIP -------------------------------------- */

.w-strip {
  height: 22px;
  border-top: 1px solid var(--w-line);
  background: var(--w-app);
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--w-mono);
  font-size: 9px;
  letter-spacing: .09em;
  color: var(--w-ink-3);
  text-transform: uppercase;
  flex: none;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.w-strip::-webkit-scrollbar { display: none; }
.w-strip span { padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--w-line); }
.w-strip span:last-child { border-right: 0; margin-left: auto; padding-right: 0; margin-right: 0; }
.w-strip b { color: var(--w-pass); font-weight: 500; }
.w-strip b.is-warn { color: var(--w-warn); }

/* ---------- 8. GLOBE PANE --------------------------------- */

.w-canvas { position: relative; min-width: 0; display: flex; overflow: hidden; }

.qd-globe {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--w-bg);
  overflow: hidden;
}
.qd-globe.is-hovering { cursor: pointer; }

.globe-ctl {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: flex; flex-direction: column;
  border: 1px solid var(--w-line-2); background: var(--w-panel);
}
.globe-ctl button {
  width: 25px; height: 23px; display: flex; align-items: center; justify-content: center;
  font-family: var(--w-mono); font-size: 12px; color: var(--w-ink-2);
  background: none; border: 0; border-bottom: 1px solid var(--w-line); cursor: pointer;
}
.globe-ctl button:last-child { border-bottom: 0; }
.globe-ctl button:hover { color: var(--w-ink); background: var(--w-sel); }

.globe-read {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 23px; display: flex; align-items: center; padding: 0 12px;
  background: var(--w-app); border-top: 1px solid var(--w-line);
  font-family: var(--w-mono); font-size: 9px; letter-spacing: .08em;
  color: var(--w-ink-3); text-transform: uppercase;
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.globe-read::-webkit-scrollbar { display: none; }
.globe-read span { padding-right: 11px; margin-right: 11px; border-right: 1px solid var(--w-line); }
.globe-read span:last-child { border-right: 0; margin-left: auto; padding-right: 0; margin-right: 0; }
.globe-read b { color: var(--w-ink-2); font-weight: 500; }

/* Cesium's attribution, routed here rather than hidden. */
.globe-credit { display: inline-flex; align-items: center; gap: 5px; }
.globe-credit a, .globe-credit * {
  color: var(--w-ink-3) !important; font-size: 9px !important;
  text-decoration: none; font-family: var(--w-mono) !important;
}
.globe-credit img { display: none; }

/* states: loading, no WebGL, failed */
.globe-state {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; text-align: center;
  font-family: var(--w-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--w-ink-3);
  border: 1px solid var(--w-line); background: var(--w-panel); padding: 10px 14px;
  display: none; max-width: 80%;
}
.qd-globe.is-loading .globe-state[data-state="loading"] { display: block; }
.qd-globe.is-failed  .globe-state[data-state="failed"]  { display: block; }
.qd-globe.is-failed  .globe-state[data-state="failed"]::after {
  content: attr(data-detail); display: block; margin-top: 6px;
  letter-spacing: .04em; text-transform: none; color: var(--w-ink-2);
}
.qd-globe.is-failed .globe-ctl { display: none; }

/* ---------- 9. MAPLIBRE ------------------------------------ */
/* maplibre-gl.css (vendored, loaded by qd-globe.js) supplies the
   canvas/container layout. The rules below are only the marker
   look and the default control chrome we replace with our own
   .globe-ctl / .globe-credit elements.                          */

.qd-globe .maplibregl-canvas:focus-visible { outline: 2px solid var(--w-accent); outline-offset: -2px; }

/* Our own zoom/reset buttons and credit line stand in for
   MapLibre's stock NavigationControl and AttributionControl. */
.qd-globe .maplibregl-control-container { display: none; }

.qd-marker {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; pointer-events: auto;
}

/* Entry state for a marker that has just been added. qd-globe.js sets
   --qd-enter-delay per marker so a batch resolves as a spreading
   constellation rather than appearing on one frame, then removes
   .is-entering on the next frame to start the transition. Skipped
   entirely under prefers-reduced-motion.

   This drives .qd-marker-in, never .qd-marker: MapLibre writes
   style.opacity onto the marker root to fade markers behind the
   globe's limb, and an inline value would override anything set
   here. transform-origin keeps the scale growing out of the glyph
   rather than the label. */
.qd-marker-in {
  display: flex; align-items: center; gap: 6px;
  transform-origin: 5px 50%;
  transition:
    opacity .55s ease var(--qd-enter-delay, 0ms),
    transform .55s cubic-bezier(.2, .8, .3, 1) var(--qd-enter-delay, 0ms);
}
.qd-marker.is-entering .qd-marker-in { opacity: 0; transform: scale(.4); }

@media (prefers-reduced-motion: reduce) {
  .qd-marker-in { transition: none; }
  .qd-marker.is-entering .qd-marker-in { opacity: 1; transform: none; }
}

/* The opening flight starts on a globe that has just appeared. Fading
   the canvas up over the first moment of the arc is the "resolving"
   half of the entry; the atmosphere thinning out as the camera
   descends is done by the sky's zoom-keyed atmosphere-blend, not
   here. .is-intro is present only while the flight is running. */
.qd-globe.is-intro .maplibregl-canvas { animation: qd-globe-in .9s ease both; }
@keyframes qd-globe-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .qd-globe.is-intro .maplibregl-canvas { animation: none; }
}
.qd-marker-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--qd-marker-colour);
  border: 1.5px solid var(--globe-label);
}
.qd-marker.is-selected .qd-marker-dot {
  width: 15px; height: 15px;
  border-width: 2.5px; border-color: var(--globe-select);
}

/* Camera glyph: an open ring (lens iris) around a core that is
   either a small dot, or - when the camera's facing is known - a
   wedge rotated to match, so the marker carries which way the
   camera is looking. See qd-globe.js, apertureMarker(). */
.qd-marker-aperture {
  width: 14px; height: 14px; flex: none; overflow: visible;
}
.qd-marker-aperture-ring {
  fill: none; stroke: var(--globe-label);
}
.qd-marker-aperture-core,
.qd-marker-aperture-wedge {
  fill: var(--qd-marker-colour);
}
.qd-marker.is-selected .qd-marker-aperture {
  width: 20px; height: 20px;
}
.qd-marker.is-selected .qd-marker-aperture-ring {
  stroke: var(--globe-select); stroke-width: 2;
}
.qd-marker-label {
  font: 500 11px "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color: var(--globe-label);
  background: color-mix(in srgb, var(--globe-ocean) 72%, transparent);
  padding: 4px 6px;
  white-space: nowrap;
}

/* Density: qd-globe.js folds crowded entities into a single puck
   carrying their count, and takes the members out of the stage
   rather than fading them. Same circle as a dot, one step heavier
   per order of magnitude. */
.qd-marker.is-clustered,
.qd-marker.is-hidden { display: none; }

/* Self-contained button reset: this is a <button>, and a page whose
   stylesheet does not neutralise button chrome would otherwise draw
   the browser's own box behind every puck. */
.qd-cluster {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; line-height: 0;
}
.qd-cluster-puck {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--qd-marker-colour);
  border: 1.5px solid var(--globe-label);
}
.qd-cluster[data-size="md"] .qd-cluster-puck { width: 14px; height: 14px; }
.qd-cluster[data-size="lg"] .qd-cluster-puck { width: 17px; height: 17px; }
.qd-cluster[data-size="sm"] .qd-cluster-count { display: none; }
.qd-cluster[data-size="sm"]:hover .qd-cluster-count,
.qd-cluster[data-size="sm"]:focus-visible .qd-cluster-count { display: block; }
.qd-cluster-count {
  font: 500 11px "IBM Plex Mono", ui-monospace, Menlo, monospace;
  line-height: 1.2;
  color: #E9EEF4;
  background: rgba(6, 9, 12, 0.78);
  padding: 2px 5px;
  white-space: nowrap;
}
.qd-cluster:focus-visible { outline: 2px solid var(--globe-select); outline-offset: 3px; }

/* A dense layer (KC Scout has 300+ cameras) keeps its labels off
   until a marker is hovered or selected, so the globe still reads
   as a globe rather than a wall of text at low zoom. */
.qd-marker[data-type="camera"] .qd-marker-label,
.qd-marker[data-type="aircraft"] .qd-marker-label { display: none; }
.qd-marker[data-type="camera"]:hover .qd-marker-label,
.qd-marker[data-type="camera"].is-selected .qd-marker-label,
.qd-marker[data-type="aircraft"]:hover .qd-marker-label,
.qd-marker[data-type="aircraft"].is-selected .qd-marker-label { display: block; }

/* Aircraft glyph: a plain chevron pointed along true track, with a
   radar-blip ring behind it that loops continuously - the position
   itself only updates every /api/flights refresh, so the pulse is
   what reads as "live" in between. See qd-globe.js, planeMarker(). */
.qd-marker-plane { width: 16px; height: 16px; flex: none; overflow: visible; }
.qd-marker-plane-pulse {
  fill: none; stroke: var(--qd-marker-colour); stroke-width: 1.4;
  transform-origin: 10px 10px; transform-box: fill-box;
  animation: qd-plane-pulse 2.6s ease-out infinite;
}
.qd-marker-plane-glyph { fill: var(--qd-marker-colour); stroke: var(--globe-label); stroke-width: 0.6; }
.qd-marker.is-selected .qd-marker-plane { width: 22px; height: 22px; }
.qd-marker.is-selected .qd-marker-plane-glyph { stroke: var(--globe-select); stroke-width: 1; }
@keyframes qd-plane-pulse {
  0%   { r: 3;  opacity: 0.55; }
  100% { r: 10; opacity: 0; }
}

/* ---------- popup ------------------------------------------
   The per-marker detail surface. Replaces the old persistent
   context panel: it opens anchored to the selected marker and
   closes with the selection, instead of always occupying space. */

.qd-workstation .maplibregl-popup-content {
  background: var(--w-panel);
  border: 1px solid var(--w-line-2);
  border-radius: 0;
  padding: 10px 12px 11px;
  box-shadow: none;
  font-family: var(--w-sans);
}
.qd-workstation .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--w-line-2); }
.qd-workstation .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--w-line-2); }
.qd-workstation .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--w-line-2); }
.qd-workstation .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--w-line-2); }
.qd-workstation .maplibregl-popup-close-button {
  color: var(--w-ink-3); font-size: 15px; padding: 3px 7px; font-family: var(--w-sans);
}
.qd-workstation .maplibregl-popup-close-button:hover { color: var(--w-ink); background: none; }

.qd-popup-h {
  margin: 0 0 8px; padding-right: 14px;
  font-weight: 600; font-size: 10.5px; letter-spacing: .04em;
  color: var(--w-ink); overflow-wrap: anywhere;
}
.qd-popup-row {
  display: grid; grid-template-columns: 68px 1fr; gap: 9px;
  padding: 3.5px 0; border-bottom: 1px solid var(--w-hair);
  font-family: var(--w-mono); font-size: 10px; color: var(--w-ink);
  overflow-wrap: anywhere;
}
.qd-popup-row:last-of-type { border-bottom: 0; }
.qd-popup-row i {
  font-style: normal; font-family: var(--w-sans); font-weight: 600; font-size: 8px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--w-ink-3); padding-top: 1px;
}
.qd-popup-link {
  display: inline-block; margin-top: 9px;
  font-family: var(--w-mono); font-size: 10px; letter-spacing: .02em;
  color: var(--w-accent); text-decoration: none;
}
.qd-popup-link:hover { text-decoration: underline; }

.qd-popup-video {
  position: relative;
  margin-top: 9px;
  background: #000;
  border: 1px solid var(--w-line-2);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.qd-popup-video video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  background: #000;
}
.qd-popup-video-status {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--w-mono); font-size: 9.5px; letter-spacing: .04em;
  color: var(--w-ink-3); text-align: center; padding: 0 10px;
  pointer-events: none;
}
.qd-popup-video.is-live .qd-popup-video-status { display: none; }
.qd-popup-video-live {
  position: absolute; top: 6px; left: 7px;
  display: none;
  align-items: center; gap: 4px;
  font-family: var(--w-mono); font-size: 8.5px; letter-spacing: .1em;
  color: #fff; background: rgba(0, 0, 0, .55); padding: 2px 6px;
}
.qd-popup-video.is-live .qd-popup-video-live { display: flex; }
.qd-popup-video-live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #e0453b;
}

/* ---------- responsive ------------------------------------ */
/* Below 760px the rail collapses to glyphs and the margin is
   dropped entirely - navigation survives, the globe keeps the
   rest of the space.                                          */

@media (max-width: 1100px) {
  .qd-workstation { position: static; min-height: 100vh; }
  .w-canvas { min-height: 58vh; }
}

@media (max-width: 760px) {
  .qd-workstation { grid-template-columns: 46px minmax(0, 1fr); }
  .w-mark { justify-content: center; padding: 0; font-size: 0; }
  .w-mark u { font-size: 14px; }
  .w-mark .v { display: none; }
  .w-grp { font-size: 0; padding: 0; margin: 8px 0 0; height: 1px; background: var(--w-line); }
  .w-item { grid-template-columns: 1fr; justify-items: center; padding: 7px 0; }
  .w-item span:not(.gl) { display: none; }
  .w-item .gl { font-size: 11px; }
  .w-body { grid-template-columns: minmax(0, 1fr); }
  .w-margin { display: none; }
  .w-canvas { min-height: 52vh; }
  .w-search .scope { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qd-workstation * { animation: none !important; transition: none !important; }
}