/* Extracted from dashboard.html (L18 pass-5) */
/* Admin-only sidebar entries default to hidden. The probe in
   dashboard.js flips data-fp-admin-show=1 only after /v1/admin/me
   returns 200, so non-admins never see the link. Without this rule
   the data-fp-admin-only attribute would be a no-op marker. */
[data-fp-admin-only="1"] { display: none !important; }
[data-fp-admin-only="1"][data-fp-admin-show="1"] { display: revert !important; }
.dash-sidebar__section { padding: 20px 0 8px 24px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--c-subtle); }
    .pref-section { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--c-border); }
    .pref-section:last-child { border-bottom: none; margin-bottom: 0; }
    .pref-section h4 { margin-bottom: 16px; color: var(--c-text); }
    .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 700px) { .dash-grid { grid-template-columns: 1fr; } }
    /* Custom dropdown - replaces native <select> to control panel position */
    .fp-sel-wrap { position:relative; width:100%; min-width:0; }
    .fp-sel-btn {
      display:flex; align-items:center; justify-content:space-between; gap:8px;
      width:100%; padding:8px 12px; border:1px solid var(--c-border);
      border-radius:6px; background:var(--c-bg); color:var(--c-text);
      font-size:.84rem; cursor:pointer; text-align:left; white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis;
    }
    .fp-sel-btn:hover { border-color:var(--c-accent); }
    .fp-sel-btn:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
    .fp-sel-btn svg { flex-shrink:0; transition:transform .15s; }
    .fp-sel-btn[aria-expanded="true"] svg { transform:rotate(180deg); }
    .fp-sel-btn span { overflow:hidden; text-overflow:ellipsis; }
    .fp-sel-panel {
      display:none; position:absolute; top:calc(100% + 4px); left:0;
      min-width:100%; max-height:240px; overflow-y:auto;
      background:var(--c-bg); border:1px solid var(--c-border);
      border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.15);
      z-index:300;
    }
    .fp-sel-panel.fp-open { display:block; }
    .fp-sel-opt {
      padding:9px 14px; font-size:.84rem; cursor:pointer; white-space:nowrap;
      display:flex; align-items:center; gap:8px;
    }
    .fp-sel-opt:hover { background:var(--c-bg-alt); }
    .fp-sel-opt.fp-focused { background:var(--c-bg-alt); outline:2px solid var(--c-accent); outline-offset:-2px; }
    .fp-sel-opt.fp-checked::before { content:'✓'; font-size:.8rem; color:var(--c-accent); width:12px; flex-shrink:0; }
    .fp-sel-opt:not(.fp-checked)::before { content:''; width:12px; flex-shrink:0; }
    /* Filter bar layout. Flex (not grid) so each dropdown sizes to its
       content; min-width on the button keeps short labels readable while
       allowing longer labels with counts ("All seniority levels (4)") to
       expand naturally instead of truncating with an ellipsis. */
    .jobs-filters-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
    .jobs-filters-row .fp-sel-wrap { width:auto; flex:0 0 auto }
    .jobs-filters-row .fp-sel-btn { min-width:140px; width:auto }
    /* Vertical divider between the last filter and the sort dropdown so
       sort reads as a distinct kind of control. Uses --c-border-mid (one
       step darker than --c-border) so it's actually visible in both light
       and dark mode. Hidden on narrow screens where flex-wrap stacks rows
       - a vertical bar in the middle of a wrapped row looks like a typo. */
    .filter-sort-divider { width:1px; height:24px; background:var(--c-border-mid); margin:0 6px; align-self:center }
    @media (max-width: 640px) { .filter-sort-divider { display:none } }
    /* Active-filter chips row, rendered below the dropdowns. Mirrors the
       green palette used by .job-visited-badge so the "active filter"
       affordance reads as a positive selection rather than a warning.
       Hover uses dark-green-on-white for high contrast (the previous
       pastel-on-white was unreadable in both light AND dark mode). */
    .jobs-active-filters { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
    .active-filter-chip { -webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;background:var(--c-green-light);border:1px solid var(--c-green-mid);color:var(--c-green);border-radius:99px;font-size:.76rem;font-weight:600;cursor:pointer;line-height:1.2;-webkit-tap-highlight-color:rgba(22,163,74,.15);transition:background .12s,color .12s,border-color .12s }
    .active-filter-chip:hover { background:var(--c-green); color:#fff; border-color:var(--c-green) }
    .active-filter-chip:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px }
    /* The × pill inherits the chip's text colour and just dims slightly
       so it doesn't compete with the label. On hover the chip's text
       becomes white, which the × inherits automatically - no extra rule
       needed. */
    .active-filter-chip__x { display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:.95rem;line-height:1;font-weight:400;opacity:.65 }
    .active-filter-chip:hover .active-filter-chip__x { opacity:1 }
    /* Dark mode: same chip but with the pattern proven in .cv-chip
       (rgba green tint + pastel-green text). Hover flips to pastel-green
       background + dark text - again high contrast both ways. */
    [data-theme="dark"] .active-filter-chip { background:rgba(22,163,74,.18); color:var(--c-green-mid); border-color:var(--c-green-mid) }
    [data-theme="dark"] .active-filter-chip:hover { background:var(--c-green-mid); color:var(--c-bg); border-color:var(--c-green-mid) }
    .job-row { display:flex;justify-content:space-between;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--c-border);gap:12px;flex-wrap:wrap }
    .job-row:last-child { border-bottom:none }
    /* Active-employer highlight (Pro-only).  Subtle left-border accent +
       very faint green tint so a "featured" row stands out without feeling
       loud.  Padding-left bumps so the title doesn't kiss the border. */
    .job-row--featured { border-left:3px solid var(--c-green-vivid);padding-left:8px;background:linear-gradient(90deg,var(--c-bg-green) 0%,transparent 60%) }
    /* v2 accelerating treatment (2026-05-22). Blue accent distinguishes
       a "📈 Hiring spike" row from a "🔥 Active employer" row at a glance
       while reusing the same subtle-tint visual language. */
    .job-row--accelerating { border-left:3px solid #2563eb;padding-left:8px;background:linear-gradient(90deg,#eff6ff 0%,transparent 60%) }
    .job-badge { display:inline-block;font-size:.72rem;padding:2px 7px;border-radius:10px;background:var(--c-bg-alt);color:var(--c-muted);border:1px solid var(--c-border);margin-right:4px;white-space:nowrap }
    .job-visited-badge { display:none;align-items:center;font-size:.68rem;color:var(--c-green-vivid);background:var(--c-bg-green);border:1px solid var(--c-green-mid);padding:1px 6px;border-radius:99px;white-space:nowrap;font-weight:600;text-transform:uppercase;letter-spacing:.04em }
    /* Active-employer badge.  Same shape as job-visited-badge but warmer.
       Loud copy reserved for ≤5 rows per page (rendering cap in dashboard.js)
       so the feed never feels like a flame-emoji wall. */
    .job-active-employer-badge { display:inline-block;font-size:.68rem;color:#b45309;background:#fef3c7;border:1px solid #fcd34d;padding:2px 8px;border-radius:6px;font-weight:600;letter-spacing:.02em;line-height:1.4 }
    .job-accelerating-badge { display:inline-block;font-size:.68rem;color:#1d4ed8;background:#eff6ff;border:1px solid #93c5fd;padding:2px 8px;border-radius:6px;font-weight:600;letter-spacing:.02em;line-height:1.4 }
    /* Dark-mode overrides: the pale-blue gradient/pill washes the row title
       out against the navy bg. Mirror the .active-filter-chip pattern —
       rgba blue tint + pastel-blue text. */
    [data-theme="dark"] .job-row--accelerating { background:linear-gradient(90deg,rgba(59,130,246,.12) 0%,transparent 60%) }
    [data-theme="dark"] .job-accelerating-badge { color:#93c5fd;background:rgba(59,130,246,.18);border-color:#3b82f6 }
    /* Bigger tap target on mobile (the previous 2px padding made the SVG
       hard to hit); 8px brings the effective hit-box close to the 44px
       Apple HIG / WCAG 2.5.5 minimum without visually changing the icon. */
    .job-bookmark-btn { background:none;border:none;cursor:pointer;padding:8px;margin:-6px 0 0;color:var(--c-muted);line-height:1;display:block;opacity:.5;transition:opacity .15s,color .15s,fill .15s;-webkit-tap-highlight-color:rgba(22,163,74,.15) }
    .job-bookmark-btn:hover,.job-bookmark-btn.bookmarked { opacity:1;color:var(--c-accent) }
    /* CSS-driven fill: empty bookmark normally, filled when .bookmarked.
       The SVG markup no longer carries an inline `fill` attribute (which
       would otherwise win the specificity battle on some mobile browsers). */
    .job-bookmark-btn svg { fill: none; transition: fill .15s }
    .job-bookmark-btn.bookmarked svg { fill: currentColor }
    /* ⋯ More menu trigger on each job card. Same understated treatment as
       the bookmark icon so the action column reads as a small toolbar.
       appearance:none + outline:none kill Windows/Edge default UA chrome
       that "background:none;border:none" alone doesn't strip from
       <button> elements. */
    .job-more-btn { -webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;outline:none;cursor:pointer;padding:8px;margin:-6px 0 0;color:var(--c-muted);line-height:1;display:block;opacity:.5;transition:opacity .15s,color .15s;-webkit-tap-highlight-color:rgba(22,163,74,.15);box-shadow:none }
    .job-more-btn:hover { opacity:1;color:var(--c-accent) }
    .job-more-btn:focus-visible { outline:2px solid var(--c-accent);outline-offset:2px;border-radius:4px }
    .job-more-btn svg { display:block }
    /* Clickable company name on each job card — triggers the company filter.
       Renders like the previous static muted text by default; underlines on
       hover/focus so the click affordance is unambiguous. -webkit-appearance
       + outline:none strip the UA <button> chrome (Edge/Windows fill, Safari
       gradient) without affecting :focus-visible which restores a keyboard
       outline below. */
    .job-company-link { -webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;outline:none;padding:0;margin:0;font:inherit;font-size:.85rem;font-weight:600;color:var(--c-text);cursor:pointer;text-align:left;line-height:1.35;word-break:break-word;-webkit-tap-highlight-color:rgba(22,163,74,.15);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:var(--c-border-mid) }
    .job-company-link:hover { color:var(--c-accent);text-decoration-color:var(--c-accent) }
    .job-company-link:focus-visible { outline:2px solid var(--c-accent);outline-offset:2px;border-radius:4px }
    /* Toggle switch (Email alerts card) — same widget as the signup billing toggle */
    .toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0 }
    .toggle-switch input { opacity: 0; width: 0; height: 0 }
    .toggle-slider { position: absolute; inset: 0; background: var(--c-border-mid); border-radius: 100px; cursor: pointer; transition: background var(--transition) }
    .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform var(--transition) }
    .toggle-switch input:checked + .toggle-slider { background: var(--c-green-vivid) }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px) }
    .toggle-switch input:disabled + .toggle-slider { opacity: .55; cursor: wait }

.dash-footer {
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
  background: var(--c-navy);
  color: rgba(255,255,255,.55);
  font-size: .85rem;
}
.dash-footer__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  text-align: center;
}
.dash-footer a { color: rgba(255,255,255,.55); text-decoration: none; transition: color var(--transition); }
.dash-footer a:hover { color: #fff; }
.dash-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: rgba(255,255,255,.55) !important;
  transition: color var(--transition), background var(--transition);
}
.dash-footer__social:hover {
  color: #fff !important;
  background: rgba(255,255,255,.08);
}
.dash-footer__sep { color: rgba(255,255,255,.2); }
@media (max-width: 768px) {
  .dash-footer { margin-bottom: 80px; }
  .nav--dash .nav__inner { padding: 0 12px; }
  .nav--dash .nav__actions { gap: 4px; flex-shrink: 1; min-width: 0; }
  .nav--dash #user-greeting { max-width: 10ch !important; font-size: .78rem !important; }
  .nav--dash .dark-toggle { flex-shrink: 0; }
  .nav--dash #logout-btn { font-size: .72rem; padding: 4px 6px; flex-shrink: 0; white-space: nowrap; }
}
@media (max-width: 480px) {
  .nav--dash #user-greeting { display: none !important; }
  .nav--dash #logout-btn { font-size: .75rem; padding: 5px 10px; }
}

/* ───────────────────────────────────────────────────────────
   EXPLORE PANEL  (Pro-only industry insights tab)
   ───────────────────────────────────────────────────────────
   All colours go through --c- vars so the light/dark switch
   is automatic. Two breakpoints: desktop = side-by-side rail
   + content; mobile = horizontal-scroll rail above stacked
   content (mirrors how /matched-jobs handles its filter chips).
*/

/* Hide-by-default gate; dashboard.js sets data-fp-explore-show=1
   after /me reports features.explore=true. */
[data-fp-explore-only="1"]                          { display: none !important; }
[data-fp-explore-only="1"][data-fp-explore-show="1"] { display: revert !important; }
/* Sidebar links: `revert` reverts <a> to inline, breaking the existing
   .dash-sidebar__menu a flex layout (icon + label side-by-side with
   gap, full-row padding, active-state left border). Re-impose flex
   with a more-specific selector that beats the revert. Mirror of the
   admin-link rule but for the desktop sidebar. */
.dash-sidebar__menu a[data-fp-explore-only="1"][data-fp-explore-show="1"] {
  display: flex !important;
}
@media (max-width: 980px) {
  /* Mobile-nav: same fix for the bottom-bar Explore button. */
  .dash-mobile-nav__item[data-fp-explore-only="1"][data-fp-explore-show="1"] {
    display: flex !important;
  }
}

.explore-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.explore-hero__sub  { font-size: .9rem; color: var(--c-muted); margin: 0; }
.explore-hero__total {
  font-size: .78rem; font-weight: 600; color: var(--c-muted);
  background: var(--c-bg-alt); border: 1px solid var(--c-border);
  border-radius: 999px; padding: 8px 14px; white-space: nowrap;
}
.explore-hero__total strong { color: var(--c-text); }

.explore-status {
  padding: 24px; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  background: var(--c-bg-alt); font-size: .9rem; color: var(--c-muted);
  text-align: center;
}
.explore-status--error  { border-color: var(--c-border-mid); color: var(--c-text); }

.explore-layout {
  /* Rail flexes between 240-320px; content takes the rest.
     `minmax(0, 1fr)` is load-bearing -- without the explicit `min: 0`
     the content column refuses to shrink below its intrinsic content
     width (the explore-charts inner grid forces its parent open). This
     was the "panels dont scale" bug -- with `1fr` alone, narrowing the
     window past ~1300px left the layout fixed-width and the page got
     a horizontal scroll instead of shrinking the cards. */
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* -- Industry rail (desktop = vertical list) -- */
.explore-rail {
  background: var(--c-bg-alt); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 14px; position: sticky;
  top: calc(var(--nav-h) + 16px);
  max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto;
}
.explore-rail__heading {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--c-subtle);
  padding: 4px 6px 10px;
}
.explore-rail__list { display: flex; flex-direction: column; gap: 2px; }
.explore-rail__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-size: .88rem; color: var(--c-text); background: transparent;
  border: 1px solid transparent; transition: background var(--transition);
  text-align: left; width: 100%;
}
.explore-rail__item:hover { background: var(--c-border); }
.explore-rail__item.active {
  background: var(--c-green-light); color: var(--c-green-vivid);
  font-weight: 600;
}
.explore-rail__item-band {
  font-size: .68rem; font-weight: 600; color: var(--c-muted);
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: 999px; padding: 2px 8px; flex-shrink: 0;
}
.explore-rail__item.active .explore-rail__item-band {
  background: var(--c-bg-alt); color: var(--c-green-vivid);
  border-color: var(--c-green-vivid);
}

/* -- Content panel (cards stack) -- */
.explore-content { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.explore-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 20px;
}
[data-theme="dark"] .explore-card { background: var(--c-bg-alt); }

.explore-card__title {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-subtle); margin: 0 0 14px;
}
.explore-card__caption { font-size: .8rem; color: var(--c-muted); margin: 8px 0 0; }

/* The two-up chart row (donut + trending). `minmax(0, 1fr)` on the
   trending column lets it shrink below intrinsic width when the parent
   .explore-content is narrow -- without it the long trending labels
   (e.g. "Mechatronics & Robotics Technician") prop the column open,
   which props .explore-content open, which propped .explore-layout
   open, which prevented the whole rail+content layout from shrinking
   with the browser window. Bumped collapse breakpoint 640 -> 1100 so
   the chart row stacks earlier on narrow PC widths. */
.explore-charts {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px;
}
@media (max-width: 1100px) { .explore-charts { grid-template-columns: 1fr; } }

/* -- Donut chart (arrangement_mix) -- */
.explore-donut { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.explore-donut svg { display: block; }
.explore-donut__legend {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  font-size: .78rem; color: var(--c-muted);
}
.explore-donut__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.explore-donut__swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.explore-donut__pct { color: var(--c-text); font-weight: 600; margin-left: 2px; }

/* -- Bar list (trending titles + top locations) -- */
.explore-bars { display: flex; flex-direction: column; gap: 6px; }
.explore-bar {
  /* Fixed-width value column so the bar-row width is constant across
     all rows regardless of value text length. With `auto` (previous),
     rows with longer values like "+1261%" shrank the bar; rows with
     "44%" widened it -- making comparison between bars misleading. */
  display: grid; grid-template-columns: 1fr 60px; gap: 8px;
  align-items: center; font-size: .85rem;
}
.explore-bar__value { text-align: right; }
.explore-bar__label {
  position: relative; padding: 6px 10px; border-radius: 6px;
  color: var(--c-text); background: rgba(0,0,0,0.04);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
[data-theme="dark"] .explore-bar__label { background: rgba(255,255,255,0.04); }
.explore-bar__fill {
  /* Light-mode default: vivid-green at 22% alpha against white reads
     clearly without being garish. The previous --c-green-light (#DCFCE7)
     on #FFFFFF was visually identical to the background, making bar
     widths look uniform regardless of share %. */
  position: absolute; top: 0; left: 0; bottom: 0;
  background: rgba(22, 163, 74, 0.22); z-index: 0;
}
/* z-index lift for the LABEL TEXT span only. The :not() exclusion is
   load-bearing: without it, this rule also matches .explore-bar__fill
   (since the fill is also a child span) and its higher specificity
   overrides the fill's `position: absolute`, collapsing every bar to
   inline-width = 0 so all rows looked equally "full" (the row bg, not
   the fill). 2026-05-23 round 6 fix. */
.explore-bar__label > span:not(.explore-bar__fill) { position: relative; z-index: 1; }
.explore-bar__value {
  font-size: .78rem; font-weight: 600; color: var(--c-muted);
  white-space: nowrap;
}
.explore-bar__value--up { color: var(--c-green-vivid); }

/* -- Ranked list (top titles + top employers) -- */
.explore-list { display: flex; flex-direction: column; gap: 4px; }
.explore-list__row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 6px;
}
.explore-list__row:hover { background: var(--c-bg-alt); }
.explore-list__rank {
  font-size: .78rem; font-weight: 700; color: var(--c-subtle);
  width: 22px; flex-shrink: 0; text-align: right;
}
.explore-list__label {
  flex: 1; min-width: 0; font-size: .9rem; color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.explore-band {
  font-size: .68rem; font-weight: 600; color: var(--c-muted);
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: 999px; padding: 2px 8px; flex-shrink: 0;
}
.explore-add-btn {
  font-size: .72rem; font-weight: 600; color: var(--c-green-vivid);
  background: transparent; border: 1px solid var(--c-green-vivid);
  border-radius: 6px; padding: 4px 9px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.explore-add-btn:hover { background: var(--c-green-vivid); color: #fff; }
.explore-add-btn:disabled,
.explore-add-btn.is-added {
  background: var(--c-bg-alt); color: var(--c-muted);
  border-color: var(--c-border); cursor: default;
}

/* -- Collapsed ranked list with "Show all" expander -- */
.explore-list[data-fp-collapsed="1"] .explore-list__row--extra { display: none; }
.explore-show-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 7px 14px;
  background: transparent; border: 1px solid var(--c-border);
  border-radius: 6px; cursor: pointer;
  color: var(--c-muted); font-size: .82rem; font-weight: 600;
  transition: background var(--transition), color var(--transition);
}
.explore-show-more:hover {
  background: var(--c-bg-alt); color: var(--c-text);
  border-color: var(--c-border-mid);
}

/* -- Keyword cloud (in-demand skills) -- */
.explore-cloud {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
  line-height: 1.5;
}
.explore-cloud__word {
  color: var(--c-text); font-weight: 500;
  transition: color var(--transition);
}
.explore-cloud__word:hover { color: var(--c-green-vivid); }

/* -- Mobile dropdown that replaces the rail on small screens.
   Hidden on desktop via the rule below. Styled to match the rail-card
   look so the swap feels native rather than like a generic form input.
   Breakpoint bumped 768 -> 980 to match the codebase's sidebar-hide
   cutoff (style.css:856) so the layout transitions cleanly: as the
   browser narrows past 980px the sidebar disappears AND the Explore
   rail collapses to the dropdown at the same moment, instead of
   leaving a squished 340px rail competing with a narrow content
   column at 800-980px PC widths. */
.explore-rail__mobile { display: none; }
@media (max-width: 980px) {
  /* Stack: rail row collapses; content (which contains the dropdown)
     becomes the only column. */
  .explore-layout { grid-template-columns: 1fr; gap: 16px; }
  .explore-rail { display: none; }            /* hide horizontal rail */
  .explore-rail__mobile {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--c-bg-alt); border: 1px solid var(--c-border);
    border-radius: var(--r-lg); padding: 12px 14px;
    margin-bottom: 4px;
  }
  .explore-rail__mobile-label {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: var(--c-subtle);
  }
  .explore-rail__mobile-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: var(--c-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
    background-size: 12px;
    color: var(--c-text); font-size: .95rem; font-weight: 600;
    border: 1px solid var(--c-border); border-radius: 8px;
    padding: 10px 36px 10px 12px; cursor: pointer;
    width: 100%;
  }
  .explore-rail__mobile-select:focus-visible {
    outline: 2px solid var(--c-green-vivid); outline-offset: 2px;
  }
  .explore-card { padding: 16px; }
}
/* dash-layout's min-height: 100vh - nav forces the page to fill the
   viewport regardless of panel content height -- on the Explore tab
   this opens a tall empty band between the last card and the footer.
   Relax the floor on mobile (using the same 980px breakpoint as the
   sidebar-hide rule in style.css line 856) so the footer sits flush
   below content. */
@media (max-width: 980px) {
  .dash-layout { min-height: 0; }
}

/* Dark-mode tweaks: bar fill needs MUCH more contrast vs. the dark bg.
   2026-05-23: previous 14% alpha rendered as invisible (user reported
   bars all looked the same width). 32% gives a clearly visible band
   without overwhelming the label text on top. */
[data-theme="dark"] .explore-bar__fill {
  background: rgba(74, 222, 128, .32);
}
[data-theme="dark"] .explore-rail__item.active {
  background: rgba(74, 222, 128, .14);
}
[data-theme="dark"] .explore-rail__item.active .explore-rail__item-band {
  background: var(--c-bg); border-color: var(--c-green-vivid);
}

/* i18n: prevent French text from wrapping billing buttons onto new lines */
#billing-controls .btn { white-space: nowrap; font-size: .82rem; }
/* i18n: cache age label + refresh button same line */
.dash-card__header { align-items: center; }
#jobs-total-label { white-space: nowrap; }