/* ═══ MOBILE RESPONSIVE ═══ */
/* HAMBURGER MENU — hidden on desktop */
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:38px;height:38px;cursor:pointer;padding:6px;border-radius:4px;transition:background .15s;flex-shrink:0;}
.hamburger span{display:block;width:20px;height:2px;background:var(--text);border-radius:1px;transition:all .25s;}
.hamburger:hover{background:rgba(26,127,232,.12);}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--nav-bg);border-bottom:1.5px solid var(--accent);backdrop-filter:blur(16px);flex-direction:column;z-index:9000;max-height:0;overflow:hidden;transition:max-height .3s ease;}
.mobile-menu.open{max-height:600px;}
.mobile-menu .mm-item{display:flex;align-items:center;gap:10px;padding:12px 20px;font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);cursor:pointer;border-bottom:1px solid var(--border);transition:all .15s;user-select:none;}
.mobile-menu .mm-item:hover,.mobile-menu .mm-item:active{color:var(--text);background:rgba(26,100,180,.1);}
.mobile-menu .mm-item.active{color:var(--accent);background:rgba(26,127,232,.08);}
.mobile-menu .mm-item .ti{font-size:16px;}
.mobile-menu .mm-divider{height:1px;background:var(--accent);opacity:.3;margin:4px 0;}
.mobile-menu .mm-theme{display:flex;align-items:center;gap:10px;padding:12px 20px;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:var(--muted);cursor:pointer;transition:all .15s;}
.mobile-menu .mm-theme:hover{color:var(--text);background:rgba(26,100,180,.1);}
body.light .mobile-menu{background:rgba(245,248,252,.98);border-bottom-color:var(--accent);}
body.light .hamburger span{background:var(--text);}

/* Mobile MC content — hidden on desktop */
.mc-mobile{display:none;}

/* Mobile Avail Query — hidden on desktop */
.mobile-avail-query{display:none;}

@media (max-width: 768px) {
  #nav{height:50px;flex-wrap:nowrap;position:relative;z-index:8000;}
  .ntabs{display:none !important;}
  .nb{order:2;flex:1 1 auto;justify-content:center;align-items:center;display:flex !important;padding:4px 8px !important;border-right:none !important;min-width:auto !important;}
  .nb img{height:26px !important;}
  /* .nr now lives in the sidebar footer (not a top-nav right cluster) — the old
     order/padding/gap !important leaked into it and fought the footer layout. */
  .nr #themeBtn{display:none !important;}
  .nr #userDisplay{display:none !important;}
  #navStats{display:none !important;}
  /* .us3id-chip must NOT be hidden on mobile: since the sidebar revamp it is the only
     entry point to the worker/bench switcher AND the Admin Command Center (the old
     mobile-menu fallback is dead code). It now lives in the sidebar footer. */
  .hamburger{display:flex !important;z-index:9001;order:1;}
  .mobile-menu{display:flex;background:var(--nav-bg);-webkit-backdrop-filter:blur(16px);}
  .mc-bottom{flex-direction:column;gap:12px;}
  .dc-board{flex-wrap:wrap;justify-content:center;}
  .dc-card{min-width:120px;max-width:160px;}
  .dc-table{font-size:11px;}
  .dc-table th,.dc-table td{padding:6px 8px;}
  .am-toolbar,.sch-toolbar,.fm-toolbar{flex-wrap:wrap;gap:8px;}
  /* Mobile defaults to the month bars; applyFleetViewVisibility() (inline, non-!important) can override to show the grid if the user picks Device timeline. */
  #fleetCanvasRow,.fleet-zoom,.fleet-axis,.fleet-legend{display:none;}
  #fleetMobileSummary{display:flex;flex-direction:column;}
  #fleetFilters,#fleetViewToggle{flex-wrap:wrap;}
  /* Ship Station: kill the sideways scroll — stack everything, constrain inputs */
  #page-shop .us3dash-wrap{padding-left:12px !important;padding-right:12px !important;overflow-x:hidden;}
  #page-shop .us3dash-grid{grid-template-columns:1fr !important;}
  #page-shop .us3shop-grid{grid-template-columns:1fr 1fr !important;}
  #page-shop input,#page-shop textarea{max-width:100% !important;box-sizing:border-box !important;}
  #page-shop [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
  #page-shop [style*="justify-content:space-between"]{flex-wrap:wrap;}
  /* Mobile dashboard: drop the big header, trim moved-out stats, borderless tight display */
  .dash-mainhead{display:none !important;}
  .us3sum-line.hide-mobile{display:none !important;}
  .us3sum{border:none !important;background:transparent !important;padding:0 2px 6px !important;}
  .us3sum-row{gap:4px !important;margin-bottom:8px !important;}
  .us3sum-line{padding:7px 0 !important;}
  .us3sum-h{padding-top:6px !important;}
  #page-mc .us3dash-wrap{padding-top:10px !important;}
  .sch-table{font-size:10px;}
  .modal{max-width:95vw;padding:16px;}
  .exp-box{min-width:130px;}
  .avail-grid{flex-wrap:wrap;}
  .page{padding:8px;overflow-y:auto !important;-webkit-overflow-scrolling:touch;}
  #mc{overflow-y:auto !important;overflow-x:hidden !important;}
  #page-mc{overflow-y:auto !important;}
  /* TASK 1: MC mobile — hide map, pins, fleet card; show mobile content */
  .mc-bg-img{display:none !important;}
  #mc-overlay{display:none !important;}
  #spoke-svg{display:none !important;}
  .pin{display:none !important;}
  .job-pin{display:none !important;}
  .job-exp-card{display:none !important;}
  .exp-card{display:none !important;}
  #fleetStatusCard{display:none !important;}
  .admin-bar{display:none !important;}
  .edit-overlay{display:none !important;}
  #mc-map{min-height:0 !important;flex:0 0 auto !important;overflow:visible !important;}
  .mc-mobile{display:block !important;padding:16px;}
  .mc-mobile-card{border:1px solid var(--borderb);border-radius:8px;background:var(--card-bg);padding:14px 16px;margin-bottom:12px;}
  .mc-mobile-card h3{font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:10px;}
  .mc-mobile-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-family:Arial,Helvetica,sans-serif;font-size:13px;color:var(--text);}
  .mc-mobile-row:last-child{border-bottom:none;}
  .mc-mobile-val{font-family:'Hanken Grotesk',sans-serif;font-size:16px;font-weight:700;}

  /* TASK 2: Hide fixed sidebar on mobile, show inline query on Avail */
  #sharedQuerySidebar{display:none !important;}
  body.sidebar-open #page-fleet,body.sidebar-open #page-assetmap,body.sidebar-open #page-sched{right:0 !important;}
  .mobile-avail-query{display:block !important;margin-bottom:16px;}

  /* Fleet Map mobile check availability button */
  .fleet-mobile-avail{display:block !important;}
  /* TASK 3: Fleet Overview table scroll on mobile */
  #avail-stats-panel{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #avail-stats-panel table{min-width:500px;}

  /* Houston Level Project bar -> one tight row on mobile (title + the two buttons, no wrap) */
  #houstonInfoBar{flex-wrap:nowrap !important;gap:6px !important;padding:8px 10px !important;}
  #houstonInfoBar > div{flex-wrap:nowrap !important;gap:8px !important;min-width:0;flex:1 1 auto;}
  #houstonInfoBar > div > span{font-size:11px !important;white-space:nowrap;}
  #houstonInfoBar a{padding:4px 8px !important;font-size:10px !important;white-space:nowrap;flex-shrink:0;}

  /* ─── MOBILE: Equipment Availability (#page-fleet) header compaction ─── */
  /* Tighten the header toolbar so the data shows sooner */
  #page-fleet > div > div:first-child{padding:8px 12px !important;gap:8px !important;}
  /* BUG FIX: the view toggle was overflowing ("Device timeline" clipped). Make it full-width with two equal buttons. */
  #fleetViewToggle{width:100% !important;margin-left:0 !important;flex-shrink:1 !important;}
  #fleetViewMonthBtn,#fleetViewGridBtn{flex:1 1 0 !important;padding:10px 6px !important;font-size:12px !important;text-align:center !important;justify-content:center !important;letter-spacing:.03em !important;}
  /* Filters: wrap tight, no left margin, smaller buttons (renderFleet injects inline-styled buttons) */
  #fleetFilters{margin-left:0 !important;gap:6px !important;width:100%;}
  #fleetFilters > div,#fleetFilters > button{padding:6px 12px !important;font-size:11px !important;}
  /* Zoom + legend: when grid view shows them on mobile, keep them compact and left-aligned */
  #page-fleet .fleet-zoom{margin-left:0 !important;}
  #page-fleet .fleet-zoom > div[onclick]{width:30px !important;height:30px !important;font-size:22px !important;}
  #page-fleet .fleet-legend{margin-left:0 !important;gap:10px !important;flex-wrap:wrap;}
  #page-fleet .fleet-legend > div{font-size:11px !important;gap:4px !important;}
  #page-fleet .fleet-legend > div > div{width:11px !important;height:11px !important;}

  /* ─── MOBILE: Asset Map (#page-assetmap) toolbar compaction ─── */
  .am-toolbar{padding:8px 12px !important;gap:6px !important;}
  /* Hide the long descriptive subtitle on mobile — saves a whole wrapped line */
  .am-title{font-size:15px !important;margin-right:4px !important;}
  .am-title > span[style*="font-size:11px"]{display:none !important;}
  /* Shrink the filter pills so 3-4 fit per row instead of big blocks */
  .am-filter{font-size:11px !important;padding:5px 11px !important;border-radius:14px !important;letter-spacing:.05em !important;}
  /* Compact the zoom control */
  .am-toolbar > div[style*="border:1px solid var(--border)"] > div[onclick]{width:28px !important;height:28px !important;font-size:20px !important;}
  /* Compact the legend: smaller dots + text, tight wrap */
  .am-legend{gap:8px !important;margin-left:0 !important;}
  .am-leg{font-size:9px !important;gap:4px !important;}
  .am-leg-dot{width:9px !important;height:9px !important;}

  /* ════════════════════════════════════════════════════════════════════
     TECHNICIANS AREA — mobile density pass (Scan / Kit / Count / Ship).
     RIR-terminal feel: small titles, refined controls, tight rows, tables
     that fit. Scoped to the four pages + their shared us3b2-/us3w- classes.
     Desktop is untouched (everything here lives in this 768px query).
     ════════════════════════════════════════════════════════════════════ */

  /* ── Shared: tighten the us3b2 content column + cards (Scan/Kit/Count) ── */
  #page-scan .us3b2-wrap,#page-kit .us3b2-wrap,#page-count .us3b2-wrap{padding:10px 10px 40px !important;}
  #page-scan .us3b2-card,#page-kit .us3b2-card,#page-count .us3b2-card{padding:12px !important;margin-bottom:10px !important;border-radius:6px !important;}
  /* Page titles: the big 30/26px headers wrap to two lines — shrink to ~19px, single line, tight margin */
  #page-scan .us3b2-wrap > div:first-child .us3b2-h,
  #page-kit .us3b2-wrap > .us3b2-h:first-child,
  #page-count .us3b2-wrap > .us3b2-h:first-child{font-size:19px !important;line-height:1.15 !important;margin-bottom:6px !important;letter-spacing:.03em !important;}
  /* Card sub-headers (the 16px section titles) come down a touch */
  #page-scan .us3b2-card .us3b2-h,#page-kit .us3b2-card .us3b2-h,#page-count .us3b2-card .us3b2-h{font-size:14px !important;}
  /* Refined buttons — kill the big bubbly blocks: smaller pad + font, no full-width min-widths */
  #page-scan .us3b2-btn,#page-kit .us3b2-btn,#page-count .us3b2-btn{font-size:12px !important;padding:8px 12px !important;border-radius:5px !important;letter-spacing:.04em !important;}
  #page-scan .us3b2-btn[style*="min-width"]{min-width:0 !important;}
  /* Inputs/selects: trim the chunky 18px fields */
  #page-scan .us3b2-input,#page-kit .us3b2-input,#page-count .us3b2-input,
  #page-scan .us3b2-select,#page-kit .us3b2-select,#page-count .us3b2-select{font-size:15px !important;padding:9px 11px !important;border-radius:6px !important;}
  /* The giant scan box was 26px/18px pad — keep it prominent but not oversized */
  #page-scan .us3b2-scanin{font-size:20px !important;padding:12px 12px !important;border-width:2px !important;}
  /* Labels + helper text: tighter */
  #page-scan .us3b2-label,#page-kit .us3b2-label,#page-count .us3b2-label{font-size:11px !important;margin-bottom:4px !important;}
  /* Tables (us3b2-tbl): dense rows, smaller type, scroll within their card */
  #page-scan .us3b2-tbl td,#page-kit .us3b2-tbl td,#page-count .us3b2-tbl td{font-size:13px !important;padding:6px 8px !important;}
  #page-scan .us3b2-tbl th,#page-kit .us3b2-tbl th,#page-count .us3b2-tbl th{font-size:10px !important;padding:6px 8px !important;}

  /* ── Station Scanner (#page-scan) ── */
  /* The station header row + mode toggle: condensed */
  #page-scan .us3b2-card[style*="justify-content:space-between"]{padding:10px 12px !important;}

  /* ── Inventory & Kit Availability (#page-count) — fit all 4 columns ── */
  /* Narrow the centered column gutters so the matrix has room */
  #page-count .us3b2-wrap[style]{max-width:none !important;padding-left:6px !important;padding-right:6px !important;}
  /* The matrix table: dense cells + smaller numbers so El Cajon/Downey/PR/Total all fit.
     If it still can't fit, the wrap scrolls horizontally rather than clipping. */
  #page-count .dc-table-wrap{margin:0 0 4px !important;border-radius:6px !important;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #page-count .dc-table{font-size:12px !important;}
  #page-count .dc-table th{padding:7px 7px !important;font-size:10px !important;letter-spacing:.4px !important;}
  #page-count .dc-table td{padding:6px 7px !important;}
  /* Shrink the big Hanken Grotesk number cells (16/18px) so columns are narrow */
  #page-count .dc-table td[style*="font-size:16px"]{font-size:13px !important;}
  #page-count .dc-table td[style*="font-size:18px"]{font-size:14px !important;}

  /* ── Build Kit (#page-kit) — the kits table now lives in an overflow-x wrapper (JS) ── */
  #page-kit .us3b2-grid2,#page-kit .us3b2-grid3{gap:8px !important;}

  /* ════ Ship Station (#page-shop) — us3w-/us3dash- namespace ════ */
  /* Title down from 28px to ~19px, single line, tight */
  #page-shop .us3w-h[style*="font-size:28px"]{font-size:19px !important;line-height:1.15 !important;letter-spacing:.03em !important;}
  #page-shop .us3w-h[style*="font-size:18px"]{font-size:15px !important;}
  #page-shop .us3w-h[style*="font-size:15px"]{font-size:14px !important;}
  /* Cards: trim padding, tight margins, smaller radius */
  #page-shop .us3w-card{padding:11px 12px !important;margin-top:10px !important;border-radius:6px !important;}
  #page-shop .us3dash-grid{margin-top:10px !important;}
  /* Buttons: refined, not chunky */
  #page-shop .us3b2-btn{font-size:12px !important;padding:8px 12px !important;border-radius:5px !important;letter-spacing:.04em !important;}
  /* Inputs: tighter */
  #page-shop .us3b2-input{font-size:15px !important;padding:9px 11px !important;border-radius:6px !important;}
  #page-shop .us3b2-label{font-size:11px !important;}
  /* Station tiles + activity rows: condensed */
  #page-shop .us3prow{padding:6px 6px !important;font-size:13px !important;}
  #page-shop .us3badge{font-size:10px !important;padding:2px 6px !important;}
  #page-shop .us3pack{font-size:13px !important;padding:5px 6px !important;}
  /* The big station-count number (22px) trimmed */
  #page-shop [style*="font-size:22px"]{font-size:18px !important;}
}

/* Device labels: full names by default, compact "19 FFIQ" on mobile (swapped below). */
.rt-devabbr{display:none;}

/* ═══ MOBILE PASS 2026-07-08 — Reservations cards, dashboard cleanups, timeline.
   Everything scoped to ≤768px + !important because the page uses inline styles. ═══ */
@media (max-width: 768px) {
  .rt-devfull{display:none;}
  .rt-devabbr{display:inline;}
  /* 1 ── Reservations stat tiles: 3-up compact grid, no dead space */
  #resvTool .rt-statband{grid-template-columns:repeat(3,1fr) !important;gap:6px !important;}
  #resvTool .rt-statband>div{padding:8px 8px !important;border-radius:6px !important;}
  #resvTool .rt-statband>div>div[style*="font-size:26px"]{font-size:20px !important;}
  #resvTool .rt-statband>div span[style*="margin-left:7px"]{display:block;margin-left:0 !important;font-size:10px !important;}
  /* 2/7 ── Office count chips: tidy 2×2 grid on both surfaces */
  #us3InvStampResv>span,#us3InvStampDash>span{display:grid !important;grid-template-columns:1fr 1fr;gap:6px;width:100%;}
  #us3InvStampResv>span>span,#us3InvStampDash>span>span{justify-content:flex-start;font-size:11px;min-width:0;overflow:hidden;text-overflow:ellipsis;}
  /* 3 ── Active reservations: card per hold, no horizontal scroll */
  .rt-resv{min-width:0 !important;}
  .rt-resv thead{display:none;}
  .rt-resv tbody tr{display:block;padding:12px 14px;border-bottom:1px solid var(--borderb);}
  .rt-resv td{display:block;padding:2px 0 !important;border:none;white-space:normal !important;text-align:left !important;}
  .rt-resv td:nth-child(1){display:inline-block;font-size:16px !important;}
  .rt-resv td:nth-child(5){display:inline-block;float:right;}
  .rt-resv td:nth-child(3)::before{content:'Window  ';font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.05em;}
  .rt-resv td:nth-child(4)::before{content:'By  ';font-size:10px;text-transform:uppercase;color:var(--muted);}
  .rt-resv td:nth-child(6){text-align:right !important;padding-top:8px !important;}
  /* 4 ── Jobs table: card list instead of sideways scroll */
  .rt-sticky{min-width:0 !important;}
  .rt-sticky thead{display:none;}
  .rt-sticky tbody tr{display:block;padding:12px 14px;border-bottom:1px solid var(--borderb) !important;}
  .rt-sticky td{display:block;border:none;padding:2px 0 !important;white-space:normal !important;text-align:left !important;}
  .rt-sticky td:nth-child(1){display:inline-block;font-size:14px !important;}
  .rt-sticky td:nth-child(5){display:inline-block;float:right;}   /* job-type chip */
  .rt-sticky td:nth-child(3)::before{content:'📆 ';}
  .rt-sticky td:nth-child(4){display:none;}                        /* sites count — noise on mobile */
  .rt-sticky td:nth-child(6)::before{content:'Equipment  ';font-size:10px;text-transform:uppercase;color:var(--muted);}
  .rt-sticky td:nth-child(7){padding-top:6px !important;}
  .rt-sticky td:nth-child(8){text-align:right !important;padding-top:8px !important;}
  .rt-sticky td:nth-child(8) button{width:100%;padding:10px !important;font-size:13px !important;}
  /* 5 ── Availability by office: office cards with labeled mini-columns */
  .rt-office{min-width:0 !important;}
  .rt-office thead{display:none;}
  .rt-office tbody tr{display:block;padding:10px 12px;border-bottom:1px solid var(--borderb);}
  .rt-office td{display:inline-block;border:none;padding:4px 12px 0 0 !important;white-space:normal !important;vertical-align:top;}
  .rt-office td:first-child{display:block;font-size:14px !important;padding:0 0 4px !important;}
  .rt-office td:nth-child(2)::before{content:'FFIQ';}
  .rt-office td:nth-child(3)::before{content:'PR-FFIQ';}
  .rt-office td:nth-child(4)::before{content:'CR';}
  .rt-office td:nth-child(5)::before{content:'HACH';}
  .rt-office td:nth-child(6)::before{content:'RG';}
  .rt-office td:nth-child(n+2)::before{display:block;font-size:9px;letter-spacing:.06em;color:var(--muted);font-family:Hanken Grotesk,sans-serif;}
  /* 6b ── Asset Map on mobile: compact. Dots were desktop-size (30-40px), making one
     office/job card fill a whole phone screen. !important beats the inline
     --am-dot-size that renderAssetMap/amZoom set on #amCanvas. */
  #amCanvas{--am-dot-size:16px !important;}
  .am-dot{border-width:1.5px !important;font-size:9px !important;}
  .am-dots{max-width:none !important;}
  .am-prodcard{padding:5px 8px !important;}
  .am-prodgrid{gap:8px !important;}
  .am-jobgrid{gap:8px !important;}
  .am-jobcard{padding:8px 10px !important;margin-bottom:0 !important;}
  .am-section-title{font-size:12px !important;margin-bottom:6px !important;}
  .am-legend{gap:10px !important;}
  .am-leg{font-size:10.5px !important;}
  /* 7b ── Battery Watch table (Houston) gets the same mobile density as the
     Technicians-Area tables — the scoped rules above don't reach #houstonInner. */
  #houstonInner .us3b2-tbl td{font-size:12.5px !important;padding:6px 7px !important;}
  #houstonInner .us3b2-tbl th{font-size:10px !important;padding:6px 7px !important;}
  /* 8 ── Equipment Requests card must never scroll the body sideways */
  #equipReqContainer{max-width:100% !important;overflow-wrap:anywhere;}
  #equipReqContainer [style*="white-space:nowrap"]{white-space:normal !important;}
  #equipReqContainer>div{padding:14px 12px !important;}
  #equipReqContainer button{width:100%;white-space:normal !important;}
  #page-mc .us3dash-wrap{overflow-x:hidden;}
}
/* 10 ── EQP timeline portrait: first 4 periods full-width + rotate hint; landscape keeps the grid */
@media (max-width:768px) and (orientation:portrait){
  #eqpBlocks table{min-width:0 !important;width:100%;}
  #eqpBlocks th:nth-child(n+6),#eqpBlocks td:nth-child(n+6){display:none;}
  #eqpBlocks td>div{min-width:0 !important;}
  #eqpBlocks div[style*="overflow-x:auto"]::before{content:'↻ Showing the next 4 periods — turn your phone sideways for the full timeline';display:block;padding:8px 12px;font-family:Arial,Helvetica,sans-serif;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--borderb);}
}

.job-pin{position:absolute;z-index:18;transform:translate(-50%,-50%);cursor:pointer;}
.job-pin-body{display:flex;flex-direction:column;align-items:center;}
.job-pin-circle{width:52px;height:52px;border-radius:50%;border:2px solid #ED1C24;background:var(--panel-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s;position:relative;backdrop-filter:blur(6px);cursor:pointer;}
.job-pin.open .job-pin-circle,.job-pin-circle:hover{border-color:#ED1C24;box-shadow:0 0 20px rgba(237,28,36,.35);}
.job-pin-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;border:1.5px solid #ED1C24;opacity:0;animation:jobRing 2.5s ease-out infinite;pointer-events:none;}
@keyframes jobRing{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
.job-pin-ico{font-size:18px;line-height:1;}
.job-pin-cnt{font-family:Arial,Helvetica,sans-serif;font-size:10px;color:var(--muted);margin-top:1px;}
.job-pin-lbl{margin-top:5px;font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:rgba(237,28,36,.12);padding:2px 8px;border-radius:3px;border:1px solid rgba(237,28,36,.3);white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;color:var(--text);cursor:pointer;}
.job-exp-card{position:absolute;transform:translate(-50%,-50%);z-index:25;pointer-events:all;opacity:0;transition:opacity .28s ease;}
.job-exp-card.vis{opacity:1;}
.job-exp-box{width:185px;border-radius:8px;border:1.5px solid rgba(237,28,36,.4);background:var(--panel-bg);backdrop-filter:blur(14px);overflow:hidden;}
.job-exp-head{padding:10px 12px 7px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(237,28,36,.2);}
.job-exp-bar{height:2px;width:100%;background:rgba(237,28,36,.25);}
.job-exp-rows{padding:8px 12px 10px;}
.job-exp-row{display:flex;align-items:center;justify-content:space-between;padding:3px 0;border-bottom:1px solid rgba(237,28,36,.06);}
.job-exp-row:last-child{border-bottom:none;}
.job-exp-row-lbl{font-family:Arial,Helvetica,sans-serif;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.job-exp-row-val{font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;color:var(--text);text-align:right;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.light .job-pin-circle{background:rgba(255,255,255,.95);border-color:#ED1C24;}
body.light .job-pin-lbl{background:rgba(237,28,36,.06);border-color:rgba(237,28,36,.2);}
body.light .job-exp-box{background:rgba(255,255,255,.97);}