/* mission-ui.css — operator surface
   Extends the existing v2 visual language (JetBrains Mono, #C4D600, #06070a)
   rather than replacing it. */

:root {
  --ink:        #06070a;
  --ink-2:      #0b0e14;
  --line:       rgba(196,214,0,0.10);
  --line-2:     rgba(255,255,255,0.06);
  --accent:     #C4D600;
  --sel:        #88eeff;
  --txt:        #e8eaed;
  --txt-2:      #8a97a8;
  --txt-3:      #5d6a7a;
  --ok:         #6fd88f;
  --warn:       #ffc95c;
  --bad:        #ff8a3d;
  --crit:       #ff2b3d;
  --mono:       'JetBrains Mono', ui-monospace, monospace;
}

/* ══════════════════════════════════════════════════════════════
   COMMAND PALETTE
   ══════════════════════════════════════════════════════════════ */

#cmd-palette {
  position: fixed; inset: 0; z-index: 400;
  display: none; justify-content: center; align-items: flex-start;
  padding-top: 12vh;
  background: rgba(3,4,7,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#cmd-palette.open { display: flex; }

.cp-shell {
  width: min(760px, calc(100vw - 32px));
  background: rgba(9,11,16,0.97);
  border: 1px solid rgba(196,214,0,0.22);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,0,0,0.6);
  overflow: hidden;
  animation: cpIn 0.13s ease-out;
}
@keyframes cpIn { from { opacity: 0; transform: translateY(-8px) scale(0.985); } }

.cp-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.cp-prompt { color: var(--accent); font-family: var(--mono); font-size: 18.0px; line-height: 1; }
#cp-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--txt); font-family: var(--mono); font-size: 15.9px; letter-spacing: 0.3px;
}
#cp-input::placeholder { color: var(--txt-3); }
.cp-esc {
  font-family: var(--mono); font-size: 11.4px; color: var(--txt-3);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 6px;
}

.cp-results { max-height: min(52vh, 440px); overflow-y: auto; scrollbar-width: thin; }
.cp-results::-webkit-scrollbar { width: 5px; }
.cp-results::-webkit-scrollbar-thumb { background: #1e2836; border-radius: 3px; }

.cp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; cursor: pointer;
  border-left: 2px solid transparent;
  font-family: var(--mono); font-size: 14.0px;
}
.cp-row.active { background: rgba(196,214,0,0.07); border-left-color: var(--accent); }
.cp-icon { width: 14px; text-align: center; flex-shrink: 0; font-size: 13.4px; }
.cp-label { color: var(--txt); font-weight: 500; flex-shrink: 0; }
.cp-sub { color: var(--txt-3); font-size: 12.3px; flex: 1; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.cp-coord { color: var(--txt-2); font-size: 12.6px; flex-shrink: 0; }
.cp-keys { display: flex; gap: 3px; flex-shrink: 0; }
.cp-empty { padding: 22px 16px; color: var(--txt-3); font-size: 13.4px; font-family: var(--mono); line-height: 1.6; }

.cp-foot {
  display: flex; gap: 16px; align-items: center;
  padding: 8px 16px; border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 12.0px; color: var(--txt-3);
}
.cp-foot-right { margin-left: auto; color: var(--txt-2); }

kbd {
  font-family: var(--mono); font-size: 11.4px; color: var(--txt-2);
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px;
  display: inline-block; line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   DOSSIER
   ══════════════════════════════════════════════════════════════ */

#dossier {
  position: fixed; top: 72px; right: 16px; z-index: 60;
  width: 330px; max-height: calc(100vh - 190px);
  overflow-y: auto; scrollbar-width: thin;
  padding: 14px 16px 12px;
  display: none;
  animation: dsIn 0.16s ease-out;
}
#dossier.open { display: block; }
@keyframes dsIn { from { opacity: 0; transform: translateX(12px); } }
#dossier::-webkit-scrollbar { width: 4px; }
#dossier::-webkit-scrollbar-thumb { background: #1a2233; border-radius: 2px; }

.ds-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ds-kind { font-family: var(--mono); font-size: 11.4px; letter-spacing: 1.6px; color: var(--accent); }
.ds-actions { display: flex; gap: 6px; }
.ds-btn {
  font-family: var(--mono); font-size: 11.4px; letter-spacing: 1px;
  color: var(--txt-2); background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2); border-radius: 5px;
  padding: 3px 8px; cursor: pointer; transition: all 0.14s;
}
.ds-btn:hover { color: var(--txt); border-color: rgba(196,214,0,0.3); }
.ds-btn.on { color: var(--ink); background: var(--sel); border-color: var(--sel); font-weight: 600; }
.ds-x { padding: 3px 7px; }

.ds-title {
  font-family: var(--mono); font-size: 18.0px; font-weight: 600;
  color: var(--txt); letter-spacing: 0.4px; line-height: 1.25;
  word-break: break-word;
}
.ds-sub { font-family: var(--mono); font-size: 12.6px; color: var(--txt-3); margin-top: 2px; }

/* ── Operator identity: logo + airline, above the data ───────────── */

.ds-ident {
  display: none;
  align-items: center; gap: 11px;
  margin-top: 10px; padding: 9px 11px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--line-2);
  border-radius: 8px;
}
.ds-ident.shown { display: flex; }

.ds-logo-slot {
  width: 92px; min-height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Most carrier logos are dark-on-transparent or dark-on-white PNGs. On a
   near-black panel they would read as a smudge, so give them a light plate
   rather than inverting — inverting wrecks brand colour. */
.ds-logo {
  max-width: 92px; max-height: 38px;
  width: auto; height: auto;
  object-fit: contain; display: block;
  background: #eef1f4; border-radius: 5px;
  padding: 5px 6px;
}
/* Fallback shown until (or unless) a logo resolves. */
.ds-logo-chip {
  font-family: var(--mono); font-size: 12.0px; font-weight: 700;
  color: #06070a; letter-spacing: 0.5px;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
}
.ds-operator { min-width: 0; }
.ds-op-name {
  font-family: var(--mono); font-size: 12.9px; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-op-reg { font-family: var(--mono); font-size: 11.4px; color: var(--txt-3); margin-top: 1px; }

.ds-extrap, .ds-note, .ds-warn {
  margin-top: 10px; padding: 8px 10px; border-radius: 7px;
  font-size: 12.6px; line-height: 1.5; font-family: var(--mono);
}
.ds-extrap {
  background: rgba(255,201,92,0.09); border: 1px solid rgba(255,201,92,0.3);
  color: #ffe0a0;
}
.ds-extrap-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--warn); margin-right: 6px; vertical-align: middle;
  animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot { 50% { opacity: 0.25; } }
.ds-warn {
  background: rgba(255,43,61,0.10); border: 1px solid rgba(255,43,61,0.35);
  color: #ffb3bb; font-weight: 500;
}
.ds-note {
  background: rgba(255,255,255,0.03); border: 1px solid var(--line-2);
  color: var(--txt-2);
}
.ds-note b { color: var(--txt); font-weight: 600; }

.ds-body { margin-top: 10px; }
.ds-div {
  font-family: var(--mono); font-size: 10.8px; letter-spacing: 1.6px;
  color: var(--txt-3); text-transform: uppercase;
  margin: 12px 0 5px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line-2);
}
.ds-div:first-child { margin-top: 4px; }
.ds-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 3.5px 0; font-family: var(--mono); font-size: 12.9px;
  align-items: baseline;
}
.ds-k { color: var(--txt-3); flex-shrink: 0; }
.ds-v { color: var(--txt); text-align: right; word-break: break-word; }
.ds-tle {
  font-size: 11.0px; color: var(--txt-2); line-height: 1.45;
  display: block; text-align: left; margin-top: 2px;
  word-break: break-all; letter-spacing: -0.2px;
}

.ds-prov {
  margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 11.4px; line-height: 1.6;
  display: flex; flex-direction: column; gap: 2px;
}
.ds-prov-state { font-weight: 600; letter-spacing: 1px; }
.ds-prov-src { color: var(--txt-2); }
.ds-prov-age { color: var(--txt-3); }
.ds-LIVE { color: var(--ok); } .ds-STALE { color: var(--warn); }
.ds-DEGRADED { color: var(--bad); } .ds-FAILED { color: var(--crit); }
.ds-LOADING, .ds-OFF { color: var(--txt-3); }

/* ══════════════════════════════════════════════════════════════
   TOOLTIP OPERATOR LOGO
   ══════════════════════════════════════════════════════════════
   Sits between the callsign header and the data rows, so identity reads
   before the numbers. Hidden by default and only revealed once an image has
   actually decoded — a reserved-but-empty strip would push the data down and
   jitter the tooltip on every hover. */

#tip-logo-wrap {
  display: none;
  margin: 3px 0 8px;
  padding: 6px 9px;
  background: #eef1f4;
  border-radius: 6px;
  width: fit-content;
}
#tip-logo-wrap.shown { display: block; }
#tip-logo {
  display: block;
  max-width: 132px; max-height: 36px;
  width: auto; height: auto; object-fit: contain;
}

/* ══════════════════════════════════════════════════════════════
   FEED HEALTH
   ══════════════════════════════════════════════════════════════ */

/* Popover anchored under the top-bar posture chip.
   The chip is the always-visible summary; this is its detail. Making it a
   popover rather than a permanent panel means source integrity costs no
   screen real estate and cannot collide with the alerts feed — while the
   chip itself still escalates colour, and a failure still fires a toast, so
   nothing depends on the operator having this open. */
#feed-health {
  position: fixed; z-index: 120;
  width: 288px; padding: 10px 12px 8px;
  display: none;
  animation: fhIn 0.13s ease-out;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}
#feed-health.open { display: block; }
@keyframes fhIn { from { opacity: 0; transform: translateY(-6px); } }

#posture-mini { cursor: pointer; }
#posture-mini:hover { filter: brightness(1.3); }

.fh-head { display: flex; justify-content: space-between; align-items: baseline;
           margin-bottom: 7px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.fh-title { font-family: var(--mono); font-size: 11.4px; letter-spacing: 1.5px;
            color: var(--accent); text-transform: uppercase; }
.fh-posture { font-family: var(--mono); font-size: 10.9px; letter-spacing: 0.8px; font-weight: 600; }

.fh-row {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 0; font-family: var(--mono); font-size: 12.0px;
}
.fh-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--txt-3); }
.fh-label { color: var(--txt-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-count { color: var(--txt); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.fh-age { color: var(--txt-3); min-width: 44px; text-align: right; font-size: 10.8px; }
.fh-state { font-size: 10.2px; letter-spacing: 0.6px; min-width: 52px; text-align: right; font-weight: 600; }

.fh-LIVE .fh-dot { background: var(--ok); box-shadow: 0 0 5px var(--ok); }
.fh-LIVE .fh-state { color: var(--ok); }
.fh-LOADING .fh-dot { background: var(--txt-3); animation: pulseDot 1s infinite; }
.fh-LOADING .fh-state { color: var(--txt-3); }
.fh-STALE .fh-dot { background: var(--warn); box-shadow: 0 0 5px var(--warn); }
.fh-STALE .fh-state { color: var(--warn); }
.fh-DEGRADED .fh-dot { background: var(--bad); box-shadow: 0 0 5px var(--bad); }
.fh-DEGRADED .fh-state { color: var(--bad); }
/* A failed source must be impossible to overlook. */
.fh-FAILED .fh-dot { background: var(--crit); box-shadow: 0 0 8px var(--crit); animation: pulseDot 0.85s infinite; }
.fh-FAILED .fh-state { color: var(--crit); }
.fh-FAILED .fh-label { color: #ffb3bb; }
.fh-OFF { opacity: 0.42; }

span.fh-posture.fh-LIVE { color: var(--ok); }
span.fh-posture.fh-STALE { color: var(--warn); }
span.fh-posture.fh-DEGRADED { color: var(--bad); }
span.fh-posture.fh-FAILED { color: var(--crit); animation: pulseDot 0.9s infinite; }
span.fh-posture.fh-LOADING { color: var(--txt-3); }

/* Top-bar posture mirror */
.posture-mini {
  font-family: var(--mono); font-size: 10.8px; letter-spacing: 1px; font-weight: 600;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
  border: 1px solid currentColor; opacity: 0.9;
}
.posture-mini.fh-LIVE { color: var(--ok); }
.posture-mini.fh-STALE { color: var(--warn); }
.posture-mini.fh-DEGRADED { color: var(--bad); }
.posture-mini.fh-FAILED { color: var(--crit); animation: pulseDot 0.9s infinite; }
.posture-mini.fh-LOADING { color: var(--txt-3); }

/* ══════════════════════════════════════════════════════════════
   LEGEND
   ══════════════════════════════════════════════════════════════ */

#legend {
  position: fixed; right: 16px; bottom: 96px; z-index: 58;
  width: 300px; max-height: calc(100vh - 200px); overflow-y: auto;
  padding: 12px 14px; display: none; scrollbar-width: thin;
}
#legend.open { display: block; }
#legend::-webkit-scrollbar { width: 4px; }
#legend::-webkit-scrollbar-thumb { background: #1a2233; border-radius: 2px; }

.lg-head { display: flex; justify-content: space-between; align-items: center;
           font-family: var(--mono); font-size: 11.4px; letter-spacing: 1.6px;
           color: var(--accent); text-transform: uppercase;
           padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.lg-x { background: none; border: none; color: var(--txt-3); cursor: pointer;
        font-size: 13.4px; padding: 0 2px; }
.lg-x:hover { color: var(--txt); }

.lg-rule {
  margin: 9px 0; padding: 7px 9px; border-radius: 6px;
  background: rgba(255,43,61,0.07); border: 1px solid rgba(255,43,61,0.22);
  font-family: var(--mono); font-size: 11.8px; line-height: 1.55; color: #ffc2c8;
}
.lg-rule-b { background: rgba(255,255,255,0.03); border-color: var(--line-2); color: var(--txt-2); }

.lg-group {
  font-family: var(--mono); font-size: 11.3px; letter-spacing: 1.4px;
  color: var(--txt-3); text-transform: uppercase;
  margin: 12px 0 5px; padding-bottom: 3px; border-bottom: 1px solid var(--line-2);
}
.lg-row { display: flex; align-items: center; gap: 8px; padding: 2.5px 0;
          font-family: var(--mono); font-size: 12.6px; }
.lg-sw { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.lg-sw-faded { background: linear-gradient(90deg, #54d6e8, #3f4a5c); }
.lg-l { color: var(--txt); min-width: 74px; }
.lg-n { color: var(--txt-3); font-size: 11.4px; flex: 1; }

/* ══════════════════════════════════════════════════════════════
   KEYBOARD MAP
   ══════════════════════════════════════════════════════════════ */

#keymap {
  position: fixed; inset: 0; z-index: 420; display: none;
  align-items: center; justify-content: center;
  background: rgba(3,4,7,0.7); backdrop-filter: blur(5px);
}
#keymap.open { display: flex; }
.km-shell { width: min(620px, calc(100vw - 32px)); padding: 16px 18px; }
.km-head { display: flex; justify-content: space-between; align-items: center;
           font-family: var(--mono); font-size: 12.0px; letter-spacing: 1.6px;
           color: var(--accent); text-transform: uppercase;
           padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.km-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 12px; }
.km-gtitle { font-family: var(--mono); font-size: 11.3px; letter-spacing: 1.4px;
             color: var(--txt-3); text-transform: uppercase; margin-bottom: 5px; }
.km-row { display: flex; align-items: center; gap: 9px; padding: 2.5px 0; }
.km-keys { display: flex; gap: 3px; min-width: 58px; }
.km-label { font-family: var(--mono); font-size: 12.3px; color: var(--txt-2); }
.km-note { margin-top: 14px; padding-top: 9px; border-top: 1px solid var(--line-2);
           font-family: var(--mono); font-size: 11.4px; color: var(--txt-3); }

/* ══════════════════════════════════════════════════════════════
   TOASTS
   ══════════════════════════════════════════════════════════════ */

#toasts { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
          z-index: 500; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.toast {
  font-family: var(--mono); font-size: 12.3px; letter-spacing: 0.4px;
  padding: 8px 14px; border-radius: 8px;
  background: rgba(9,11,16,0.96); border: 1px solid var(--line-2);
  color: var(--txt); opacity: 0; transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s; white-space: nowrap;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}
.toast.in { opacity: 1; transform: translateY(0); }
.toast-warn { border-color: rgba(255,201,92,0.4); color: #ffe0a0; }
.toast-bad  { border-color: rgba(255,43,61,0.45); color: #ffb3bb; }

/* ══════════════════════════════════════════════════════════════
   SEARCH AFFORDANCE IN TOP BAR
   ══════════════════════════════════════════════════════════════ */

#search-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 11px; border-radius: 7px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-2);
  color: var(--txt-3); font-family: var(--mono); font-size: 12.3px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
#search-trigger:hover { border-color: rgba(196,214,0,0.32); color: var(--txt-2); }
#search-trigger .st-ico { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   PANEL LAYOUT — no two panels may occupy the same pixels
   ══════════════════════════════════════════════════════════════

   Measured collisions at 1280×720 before this block:
     · feed-health (y 483–624) sat on top of layers-panel (y 72–612),
       burying the bottom third of the layer list including the Satellites
       row and everything under it.
     · legend (y 104–624) covered regions-panel (y 72–490) entirely.
     · dossier occupies the same top-right slot as regions-panel, so opening
       a dossier made the region presets unreachable.

   Rule: the LEFT rail is a fixed stack — layers on top, source integrity
   pinned to the bottom, layers scrolls to fit whatever is left. The RIGHT
   rail shows exactly one context at a time: regions by default, replaced by
   the dossier or the legend when either is active.
   ══════════════════════════════════════════════════════════════ */

/* Left rail budget.
   Chrome: 56px top bar + 60px timeline bar + 32px ticker.
   The alerts feed is pinned to the bottom of the rail; the layer list takes
   everything above it and scrolls. These two numbers must stay in sync —
   in v2 they simply overlapped and the bottom of the layer list (Satellites
   and every live-feed toggle below it) could not be reached at all. */
:root { --alerts-h: 210px; --bottom-chrome: 100px; }

/* Everything in this block is DESKTOP-ONLY.
   Below 851px the page already has a complete off-canvas drawer system
   (#layers-panel and #regions-panel slide in from the edges, #alerts-panel
   becomes a bottom sheet). Applying desktop rail geometry there — especially
   with !important — pins the drawers open and breaks the transforms. */
@media (min-width: 851px) {
  #alerts-panel {
    bottom: var(--bottom-chrome) !important;
    max-height: var(--alerts-h) !important;
  }
  #layers-panel {
    max-height: calc(100vh - 72px - var(--alerts-h) - var(--bottom-chrome) - 16px) !important;
    min-height: 160px;
  }

  /* Right rail: region presets step aside for either context. */
  body.ctx-dossier #regions-panel,
  body.ctx-legend  #regions-panel { display: none; }

  #legend, #dossier { bottom: auto; top: 72px; max-height: calc(100vh - 160px); }

  /*
   * The legend and the dossier COEXIST.
   *
   * Hiding the legend whenever a dossier opened left it display:none while
   * still carrying .open — its state and what was drawn disagreed. The
   * consequences were exactly what you would expect from that: its ✕ was
   * unreachable while anything was selected, so it could not be dismissed,
   * and it reappeared by itself the moment you deselected. From the outside
   * it looked like the legend was popping up on its own whenever you clicked
   * a satellite.
   *
   * A panel the operator opened stays open until the operator closes it.
   * Heights below are derived so the two cannot overlap at any viewport:
   * the legend gets whatever is left after the dossier and the bottom chrome.
   */
  body.ctx-dossier #dossier { max-height: 46vh; }
  body.ctx-dossier #legend {
    top: auto;
    bottom: 100px;
    max-height: calc(100vh - 46vh - 72px - 100px - 24px);
  }
  /* A legend the operator has dragged stays exactly where they put it. */
  body.ctx-dossier #legend.pw-moved { top: auto; bottom: auto; max-height: calc(100vh - 160px); }
}

/* Tall displays: give the alerts feed more room once the layer list fits. */
@media (min-width: 851px) and (min-height: 1000px) {
  :root { --alerts-h: 320px; }
}

/* Bottom chrome: the timeline bar and ticker both anchor to bottom:0 and
   would stack on each other. Give the ticker the strip above the bar. */
#ticker { bottom: 60px !important; }

/* ══════════════════════════════════════════════════════════════
   TOP BAR — explicit degradation order
   ══════════════════════════════════════════════════════════════

   The bar was overflowing by ~340px at 1280px wide, which pushed the UTC
   clock entirely off screen. On a situational-awareness tool the time
   reference is not decoration: every timestamp in every panel is relative to
   it. It must be the last thing to go, not the first.

   Priority, most protected first:
     1. UTC clock          — never drops
     2. Source posture     — never drops
     3. Search             — collapses to an icon
     4. Title              — subtitle drops, then the rule
     5. Stat strip         — the flexible element; shrinks and scrolls
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 851px) {

#top-bar { gap: 14px; }

#top-bar .stat-strip {
  min-width: 0;
  flex-shrink: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Fade the cut edge so a truncated strip reads as "there is more" rather
     than as a hard end. */
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
}
#top-bar .stat-strip::-webkit-scrollbar { display: none; }
#top-bar .stat-strip .si { flex-shrink: 0; }

#top-bar .utc-clock,
#top-bar .posture-mini,
#top-bar #search-trigger { flex-shrink: 0; }

#top-bar .title { flex-shrink: 1; min-width: 0; overflow: hidden; }

}  /* end min-width: 851px */

@media (min-width: 851px) and (max-width: 1500px) {
  #top-bar .title .sub, #top-bar .title .sep { display: none; }
}
@media (min-width: 851px) and (max-width: 1240px) {
  #top-bar { gap: 10px; padding: 0 12px; }
  #top-bar .stat-strip { gap: 12px; }
  .back-link { font-size: 0; padding: 4px 8px; }
  .back-link::before { content: '←'; font-size: 14.6px; }
}
@media (min-width: 851px) and (max-width: 1080px) {
  #search-trigger .st-txt { display: none; }
  #top-bar .title { font-size: 14.6px; }
}

/* Mobile top bar: the existing ≤850px rules already compact this. Search
   collapses to its icon and sits with the other controls. */
@media (max-width: 850px) {
  #search-trigger .st-txt, #search-trigger .st-hint { display: none; }
  #search-trigger { padding: 4px 8px; }
  /* The strip runs off the edge on a phone. Let it scroll, and fade the cut
     so it reads as "more to the right" rather than as a clipped bug. */
  #top-bar .stat-strip {
    min-width: 0; flex-shrink: 1; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent 100%);
  }
  #top-bar .stat-strip::-webkit-scrollbar { display: none; }
  #top-bar .stat-strip .si { flex-shrink: 0; }
  #top-bar .title { flex-shrink: 0; }
  #posture-mini { font-size: 10.2px; padding: 2px 5px; }
  #feed-health { width: calc(100vw - 24px); max-width: 320px; }
  /* Dossier is a bottom sheet on mobile, clear of the ALERTS button. */
  #dossier { top: auto; bottom: 64px; left: 8px; right: 8px; width: auto; max-height: 52vh; }
  #legend  { top: auto; bottom: 64px; left: 8px; right: 8px; width: auto; max-height: 52vh; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  #dossier { top: auto; bottom: 96px; right: 8px; left: 8px; width: auto;
             max-height: 46vh; }
  #feed-health { display: none; }
  #legend { right: 8px; left: 8px; width: auto; bottom: 96px; max-height: 52vh; }
  .km-grid { grid-template-columns: 1fr; }
  .cp-shell { padding-bottom: env(safe-area-inset-bottom); }
  #cmd-palette { padding-top: 6vh; }
  .cp-coord { display: none; }
  #search-trigger .st-hint { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   LIVE FEED TICKER / ALERTS — provenance
   ══════════════════════════════════════════════════════════════
   Every ticker item now carries its source. The previous build mixed
   hand-written copy with real USGS and NWS items in identical styling, so
   there was no way to tell reporting from invention. Attribution is the fix. */

#ticker .tc-src {
  font-family: var(--mono); font-size: 10.9px; letter-spacing: 0.7px;
  color: var(--txt-3); text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: 3px;
  padding: 1px 5px; margin-left: 9px; white-space: nowrap; flex-shrink: 0;
}
#ticker .tc-empty {
  font-family: var(--mono); font-size: 12.3px; color: var(--warn);
  letter-spacing: 1px; padding: 0 18px;
}
.ai-empty {
  font-family: var(--mono); font-size: 12.3px; line-height: 1.7;
  color: var(--warn); padding: 16px 4px; text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   NYC CAMERA BROWSER
   ══════════════════════════════════════════════════════════════ */

/* Upscale smoothly. NYC DOT ignores every size hint, so ~87% of cameras are
   352x240 and the only lever is display size — nearest-neighbour would make
   an already soft image look broken. */
#cm-preview-img img,
#camera-popup .cp-img-wrap img {
  width: 100%; height: auto; display: block;
  image-rendering: auto;
}

/* Native resolution, stated. An upscaled 352x240 must not be mistaken for
   detail that does not exist in the source. */
.cm-res {
  font-family: var(--mono); font-size: 10.9px; letter-spacing: 0.7px;
  padding: 2px 6px; border-radius: 3px; white-space: nowrap;
  border: 1px solid var(--line-2); color: var(--txt-3);
}
.cm-res.hd  { color: var(--ok);    border-color: rgba(111,216,143,0.35); }
.cm-res.sd  { color: var(--warn);  border-color: rgba(255,201,92,0.30); }
.cm-res.low { color: var(--txt-3); }

.cm-sort-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0 2px;
  font-family: var(--mono); font-size: 11.4px; color: var(--txt-3);
}
.cm-sort-btn {
  font-family: var(--mono); font-size: 10.8px; letter-spacing: 0.6px;
  color: var(--txt-2); background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2); border-radius: 4px;
  padding: 3px 8px; cursor: pointer;
}
.cm-sort-btn.on { color: var(--ink); background: var(--accent); border-color: var(--accent); font-weight: 600; }

/* ── Camera browser layout ───────────────────────────────────────
   Measured before this change at 1443x1197: map 600x1134 (a roughly square
   city fitted into a 0.53-aspect box), preview display:none, and 970 rows of
   830px each carrying ~250px of text. Now: left column pairs the map with
   the live still; right column is a responsive grid so rows use the width. */

.cm-body { display: flex; min-height: 0; }

.cm-left {
  flex: 0 0 42%; max-width: 640px; min-width: 320px;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid rgba(196,214,0,0.08);
}
.cm-left .cm-map-panel {
  flex: 1 1 auto; min-height: 240px;
  max-width: none; border-right: none;
}
/* Preview sits ABOVE the map: the live image is the thing you came to look
   at, so it takes the top of the column and the map reads as its context. */
.cm-left .cm-preview {
  flex: 0 0 auto; border-bottom: 1px solid rgba(196,214,0,0.10);
  display: block !important;   /* populated on open, never an idle blank */
}
.cm-left .cm-preview-img-wrap { max-height: 46vh; min-height: 220px; }

.cm-list-panel { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* Responsive grid: 2–4 columns depending on width, instead of one tall column. */
.cm-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 6px; align-content: start;
  padding: 8px 10px; overflow-y: auto; min-height: 0;
}
.cm-list .cm-list-item {
  width: auto; margin: 0;
  border: 1px solid var(--line-2); border-radius: 8px;
  padding: 6px; gap: 8px;
}
.cm-list .cm-list-item:hover { border-color: rgba(196,214,0,0.3); }
.cm-list .cm-list-item.selected { border-color: var(--sel); background: rgba(136,238,255,0.07); }

@media (max-width: 1100px) {
  .cm-left { flex-basis: 46%; }
  .cm-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 860px) {
  .cm-body { flex-direction: column; }
  .cm-left { flex: 0 0 auto; max-width: none; border-right: none;
             border-bottom: 1px solid rgba(196,214,0,0.10); }
  .cm-left .cm-map-panel { min-height: 200px; height: 30vh; }
  .cm-left .cm-preview-img-wrap { max-height: 32vh; min-height: 160px; }
  .cm-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* The camera browser is a full-screen dialog and must sit above transient
   popovers. Measured conflict: #feed-health at z-index 120 was rendering over
   #camera-modal-overlay at 100. The command palette (400) and keyboard map
   (420) stay above it deliberately — those are global and must always reach. */
#camera-modal-overlay { z-index: 200 !important; }

/* ══════════════════════════════════════════════════════════════
   PANEL WINDOW CONTROLS
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 851px) {

  /* Header becomes a title bar with a control cluster. */
  #layers-panel > h2,
  #regions-panel > h2 {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .pw-title { flex: 1; min-width: 0; }

  .pw-controls { display: flex; gap: 3px; flex-shrink: 0; }
  .pw-btn {
    width: 19px; height: 19px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); border: 1px solid var(--line-2);
    border-radius: 4px; color: var(--txt-3); cursor: pointer;
    font-family: var(--mono); font-size: 12.3px; padding: 0;
    transition: all 0.13s;
  }
  .pw-btn:hover { color: var(--txt); background: rgba(196,214,0,0.16); border-color: rgba(196,214,0,0.35); }
  .pw-close:hover { color: #ffb3bb; background: rgba(255,43,61,0.18); border-color: rgba(255,43,61,0.4); }

  /* Collapsed: title bar only. */
  .panel.pw-collapsed { max-height: none !important; min-height: 0 !important;
                        overflow: hidden !important; padding-bottom: 6px; }
  #layers-panel.pw-collapsed > *:not(h2),
  #regions-panel.pw-collapsed > *:not(h2),
  #alerts-panel.pw-collapsed > *:not(.ap-header) { display: none !important; }
  #layers-panel.pw-collapsed > h2,
  #regions-panel.pw-collapsed > h2 { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
  .panel.pw-collapsed h2, .panel.pw-collapsed .ap-header { cursor: pointer; }

  .panel.pw-hidden { display: none !important; }

  /* Alerts panel header carries the cluster alongside SUMMARY. */
  #alerts-panel .ap-header { display: flex; align-items: center; gap: 8px; }
  #alerts-panel .ap-header .ap-title { flex: 1; min-width: 0; }
  #alerts-panel.pw-collapsed { height: auto !important; }

  /* Reclaim the left rail when the alerts feed is not using it. */
  body.no-alerts #layers-panel {
    max-height: calc(100vh - 72px - var(--bottom-chrome) - 60px) !important;
  }
}

/* ── Dock: the way back ────────────────────────────────────────── */
#panel-dock {
  position: fixed; left: 16px; bottom: 100px; z-index: 58;
  display: none; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 9px;
  background: rgba(9,11,16,0.94);
  border: 1px solid rgba(196,214,0,0.18);
  backdrop-filter: blur(14px);
}
#panel-dock.show { display: flex; }
.pd-label {
  font-family: var(--mono); font-size: 10.9px; letter-spacing: 1.2px;
  color: var(--txt-3); padding-right: 2px;
}
.pd-chip {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12.0px; color: var(--txt-2);
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-2);
  border-radius: 6px; padding: 4px 8px; cursor: pointer; white-space: nowrap;
  transition: all 0.13s;
}
.pd-chip:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.pd-chip:hover kbd { color: var(--ink); border-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.12); }

@media (max-width: 850px) {
  /* Mobile already has its own drawer system; window controls would fight it. */
  .pw-controls { display: none; }
  #panel-dock { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   TYPE SCALE ACCOMMODATION
   ══════════════════════════════════════════════════════════════
   Font sizes were raised across the board (52 of 150 declarations sat under
   10px). Panel widths have to grow with the type or the extra size is spent
   on wrapping rather than legibility — "Region Presets" broke onto two lines
   and alert text collapsed into a narrow ribbon. */

@media (min-width: 851px) {
  #dossier { width: 392px; }
  #legend  { width: 348px; }
  #feed-health { width: 336px; }
  .cp-shell { width: min(840px, calc(100vw - 32px)); }

  /* The alerts feed's location column was taking width the headline needs. */
  #alerts-panel .ai-loc { max-width: 116px; }
  #alerts-panel .ai-text { min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════
   DRAGGABLE PANELS
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 851px) {
  .pw-handle { cursor: grab; user-select: none; -webkit-user-select: none; }
  .pw-handle:active { cursor: grabbing; }
  /* Buttons inside the handle keep their own cursor. */
  .pw-handle button { cursor: pointer; }

  /* Once dragged a panel is positioned by left/top only. The defaults mix
     right- and bottom-anchoring, which would otherwise fight the drag. */
  .panel.pw-moved {
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }

  .panel.pw-dragging {
    z-index: 90 !important;
    box-shadow: 0 18px 60px rgba(0,0,0,0.75);
    border-color: rgba(196,214,0,0.42) !important;
    transition: none !important;
    opacity: 0.97;
  }

  /* A moved panel is no longer bound by the left-rail budget. */
  .panel.pw-moved#layers-panel { max-height: calc(100vh - 140px) !important; }
  .panel.pw-moved#alerts-panel { max-height: 60vh !important; }

  /* Faint grip marks so the title bar reads as draggable. */
  .pw-handle::after {
    content: ''; flex-shrink: 0; width: 9px; height: 12px; margin-left: 2px;
    opacity: 0.28;
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 4px 4px; color: var(--txt-2);
  }
  #alerts-panel .ap-header { align-items: center; }
}

/* Dossier + legend: draggable by their own headers. Position only — they are
   not dock-managed, because the dossier opens on selection and the legend
   toggles with L, so a "closed" chip would imply a lifecycle they don't have. */
@media (min-width: 851px) {
  .ds-head, .lg-head { cursor: grab; user-select: none; -webkit-user-select: none; }
  .ds-head:active, .lg-head:active { cursor: grabbing; }
  .ds-head button, .lg-head button { cursor: pointer; }

  #dossier.pw-moved, #legend.pw-moved {
    right: auto !important; bottom: auto !important;
  }
  #dossier.pw-dragging, #legend.pw-dragging {
    z-index: 90 !important; opacity: 0.97; transition: none !important;
    box-shadow: 0 18px 60px rgba(0,0,0,0.75);
    border-color: rgba(196,214,0,0.42) !important;
  }
  /* Once moved, the right-rail "one context at a time" rule no longer applies:
     the operator has explicitly placed it somewhere, so let it coexist. */
  body.ctx-dossier #regions-panel.pw-moved,
  body.ctx-legend  #regions-panel.pw-moved { display: block !important; }
  /* (Removed: a `display:block !important` here used to force a MOVED legend
     visible even when it was closed, because the base rule only hides it via
     `#legend { display:none }`. It existed to defeat the old
     "hide the legend when a dossier opens" rule, which is gone.) */

  /* Full alert text needs to wrap and breathe. */
  .ds-alert-text {
    display: block; text-align: left; margin-top: 3px;
    font-size: 11.4px; line-height: 1.55; color: var(--txt-2);
    white-space: pre-line; word-break: break-word;
  }
  .ds-alert-action { color: #ffe0a0; }
  .ds-link {
    display: inline-block; margin-top: 6px;
    font-family: var(--mono); font-size: 11px; color: var(--sel);
    text-decoration: none; border-bottom: 1px solid rgba(136,238,255,0.35);
  }
  .ds-link:hover { border-bottom-color: var(--sel); }
}

/* ══════════════════════════════════════════════════════════════
   CITY LABELS
   ══════════════════════════════════════════════════════════════
   Cities kept getting lost among live markers. Raising their brightness
   alone would just have them compete with signal; naming them makes them
   reference geography you can navigate by, which is what they are for. */

#city-labels {
  position: absolute; inset: 0; z-index: 6;
  pointer-events: none; overflow: hidden;
}
.city-label {
  position: absolute; top: 0; left: 0; display: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.3px;
  color: #cfe3d6; white-space: nowrap;
  pointer-events: auto; cursor: pointer;
  /* Outline rather than a filled plate: readable over ocean, ice, terrain and
     city-light bloom without boxing in the map. */
  text-shadow:
    0 0 3px rgba(3,5,8,0.95), 0 0 6px rgba(3,5,8,0.85),
    1px 1px 0 rgba(3,5,8,0.9), -1px -1px 0 rgba(3,5,8,0.9);
  transition: color 0.15s;
}
.city-label:hover { color: var(--accent); }
.city-label.sel { color: var(--sel); font-weight: 600; }

/* ── City headlines in the dossier ─────────────────────────────── */
.ds-citynews { display: block; margin-top: 4px; text-align: left; }
.ds-news {
  display: block; padding: 7px 0;
  border-bottom: 1px solid var(--line-2); text-decoration: none;
}
.ds-news:last-of-type { border-bottom: none; }
.ds-news-title {
  font-family: var(--mono); font-size: 11.4px; line-height: 1.45;
  color: var(--txt); word-break: break-word;
}
.ds-news:hover .ds-news-title { color: var(--accent); }
.ds-news-meta {
  display: flex; gap: 8px; margin-top: 3px;
  font-family: var(--mono); font-size: 9.8px; color: var(--txt-3);
}
.ds-news-src { color: var(--txt-2); }
.ds-news-loading, .ds-news-empty {
  font-family: var(--mono); font-size: 11px; color: var(--txt-3); padding: 6px 0;
}
.ds-news-note {
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 9.5px; line-height: 1.5; color: var(--txt-3);
}

/* ── Google Trends in the city dossier ─────────────────────────── */
.ds-trends { display: block; margin-top: 4px; text-align: left; }
.ds-trend {
  display: block; padding: 7px 0; text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
.ds-trend:last-of-type { border-bottom: none; }
.ds-trend-head { display: flex; align-items: baseline; gap: 8px; }
.ds-trend-term {
  font-family: var(--mono); font-size: 11.8px; color: var(--txt);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-trend:hover .ds-trend-term { color: var(--accent); }
.ds-trend-vol {
  font-family: var(--mono); font-size: 9.8px; color: var(--accent);
  flex-shrink: 0; font-weight: 600;
}
/* Relative volume bar. Google only publishes banded approximations
   ("200+", "2K+"), so this is a comparison within the list, not a measure. */
.ds-trend-bar {
  height: 3px; margin-top: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.ds-trend-bar span {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(196,214,0,0.45), var(--accent));
}
.ds-trend-news {
  font-family: var(--mono); font-size: 9.8px; line-height: 1.45;
  color: var(--txt-3); margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE BOTTOM STACK
   ══════════════════════════════════════════════════════════════
   Reported: the alerts sheet overlaps the live-feed ticker on mobile.

   The bottom chrome stacks timeline bar (60px) then ticker (32px above it),
   so anything anchored lower than ~92px collides. The alerts sheet sat at
   bottom: 34px and ran straight through the ticker. These offsets are
   derived from that stack rather than guessed. */

@media (max-width: 850px) {
  /* Timeline bar owns 0–60px; ticker sits directly on top of it. */
  #ticker { bottom: 60px !important; }

  /* Alerts sheet clears both. */
  #alerts-panel {
    bottom: 96px !important;
    max-height: 42vh !important;
  }

  /* The ALERTS toggle has to clear the same stack. */
  #alerts-btn { bottom: 100px !important; }

  /* Dossier and legend are bottom sheets on mobile — same clearance, and
     they must sit above the ALERTS button rather than under it. */
  #dossier, #legend {
    bottom: 100px !important;
    max-height: 46vh !important;
  }

  /* Camera popup likewise. */
  #camera-popup { max-width: calc(100vw - 24px); }

  /* Back link is fixed bottom-left on mobile by the existing rules; keep it
     out of the timeline bar. */
  .back-link { bottom: 68px !important; }
}

/* Very short viewports: the ticker is the least important of the three. */
@media (max-width: 850px) and (max-height: 620px) {
  #ticker { display: none; }
  #alerts-panel { bottom: 64px !important; }
  #alerts-btn   { bottom: 68px !important; }
  #dossier, #legend { bottom: 68px !important; }
  .back-link { bottom: 36px !important; }
}

/* ══════════════════════════════════════════════════════════════
   CAMERA BROWSER — MOBILE MAP / LIST TOGGLE
   ══════════════════════════════════════════════════════════════
   On a phone the vertical stack (map + preview + list) left the list two or
   three rows tall — you could not actually browse or pick a camera, which is
   the entire purpose of the dialog. The preview stays pinned at the top
   because it is the payoff; below it the map and the list take turns at full
   height rather than competing for the same pixels. */

.cm-viewtoggle { display: none; }

@media (max-width: 850px) {
  .cm-viewtoggle {
    display: flex; gap: 0; margin-left: auto; margin-right: 10px;
    border: 1px solid rgba(196,214,0,0.25); border-radius: 7px; overflow: hidden;
  }
  .cm-vt {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.8px;
    padding: 5px 12px; border: none; cursor: pointer;
    background: transparent; color: var(--txt-2);
  }
  .cm-vt.active { background: var(--accent); color: var(--ink); font-weight: 700; }

  .cm-body { flex-direction: column; }
  .cm-left {
    flex: 0 0 auto; max-width: none; min-width: 0;
    border-right: none; display: contents;   /* let preview and map size independently */
  }

  /* Preview: always visible, compact. */
  #cm-preview {
    order: 1; flex: 0 0 auto;
    border-bottom: 1px solid rgba(196,214,0,0.12);
  }
  .cm-left .cm-preview-img-wrap { max-height: 30vh !important; min-height: 150px; }

  /* Map and list occupy the same slot; the toggle decides which is shown. */
  .cm-map-panel  { order: 2; flex: 1 1 auto; min-height: 0; }
  .cm-list-panel { order: 2; flex: 1 1 auto; min-height: 0; }

  #camera-modal.view-list .cm-map-panel  { display: none; }
  #camera-modal.view-map  .cm-list-panel { display: none; }
  #camera-modal.view-map  .cm-map-panel  { display: block; height: auto; }

  /* Two columns of cards still fit comfortably at phone widths. */
  .cm-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; padding: 6px; }
  .cm-list .cm-list-item { padding: 5px; gap: 6px; }

  .cm-header { flex-wrap: nowrap; }
  .cm-title { font-size: 12px; }
  .cm-count { display: none; }   /* count is in the map hint and the sort row */
}

/* Header fit on phones.
   Measured at 390px: title 205px + toggle squeezed to 80px while its buttons
   needed 122px, so MAP was clipped by the container's overflow:hidden and the
   toggle looked like a single dead label. The toggle is the control; the
   title is decoration. */
@media (max-width: 850px) {
  .cm-header { gap: 8px; align-items: center; }
  .cm-title {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11px;
  }
  .cm-viewtoggle { flex: 0 0 auto; margin-left: auto; margin-right: 8px; }
  .cm-vt { padding: 5px 10px; font-size: 10.5px; }
  .cm-close { flex: 0 0 auto; }
}
@media (max-width: 430px) {
  /* Below this the full name simply will not coexist with the control. */
  .cm-title { font-size: 0; }
  .cm-title::after {
    content: 'NYC CAMS';
    font-size: 11px; letter-spacing: 1px;
  }
}