/* Remote500 site styles. Plain CSS only, no frameworks. */
/* Visual language: dark, moody, glassy, glossy, neon. */

/* The hidden attribute must beat every author display rule. A class that
   sets display (the reset forms below use display: flex) otherwise overrides
   the browser's built-in [hidden] { display: none }, because author rules
   outrank the browser's own stylesheet. That kept a "hidden" form on screen
   and showed both reset forms at once on 2026-10-17. */
[hidden] {
  display: none !important;
}

:root {
  color-scheme: dark;

  --page-background-color: #05060b;
  --text-primary-color: #e7eaf3;
  --text-muted-color: #98a1b6;

  --neon-cyan-color: #22d3ee;
  --neon-cyan-soft-color: #67e8f9;
  --neon-violet-color: #8b5cf6;
  --neon-magenta-color: #f472b6;

  --glass-panel-background-color: rgba(16, 20, 34, 0.55);
  --glass-panel-border-color: rgba(151, 165, 197, 0.16);
  --glass-highlight-color: rgba(255, 255, 255, 0.07);
  --deep-shadow-color: rgba(1, 3, 10, 0.55);

  --chip-background-color: rgba(34, 211, 238, 0.09);
  --chip-border-color: rgba(34, 211, 238, 0.28);
  --chip-text-color: rgba(165, 243, 252, 0.92);

  /* Amber marks travel: the toggle, the travel-required badge, and stated travel. */
  --neon-amber-color: #fbbf24;
  --travel-chip-background-color: rgba(251, 191, 36, 0.1);
  --travel-chip-border-color: rgba(251, 191, 36, 0.42);
  --travel-chip-text-color: #fde68a;
  --travel-note-chip-background-color: rgba(152, 161, 182, 0.08);
  --travel-note-chip-border-color: rgba(152, 161, 182, 0.28);

  /* Mint marks pay: the stated pay range on each card. */
  --pay-chip-background-color: rgba(52, 211, 153, 0.1);
  --pay-chip-border-color: rgba(52, 211, 153, 0.4);
  --pay-chip-text-color: #a7f3d0;

  /* Violet marks where the worker may live: the work-from line on each card. */
  --work-from-chip-background-color: rgba(139, 92, 246, 0.12);
  --work-from-chip-border-color: rgba(167, 139, 250, 0.45);
  --work-from-chip-text-color: #ddd6fe;

  --control-background-color: rgba(9, 12, 22, 0.72);
  --control-border-color: rgba(151, 165, 197, 0.22);
  --focus-outline-color: #67e8f9;
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-color: #155e75 var(--page-background-color);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--page-background-color);
  color: var(--text-primary-color);
  line-height: 1.55;
}

/* Ambient neon glows drifting behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38rem 38rem at 12% 8%, rgba(34, 211, 238, 0.17), transparent 60%),
    radial-gradient(44rem 44rem at 88% 80%, rgba(139, 92, 246, 0.16), transparent 62%),
    radial-gradient(30rem 30rem at 78% 10%, rgba(244, 114, 182, 0.10), transparent 60%);
  animation: ambient-glow-drift 26s ease-in-out infinite alternate;
}

@keyframes ambient-glow-drift {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(2%, 2%, 0) scale(1.06);
  }
}

/* Faint film grain so the dark tones feel moody rather than flat. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='grainFilter'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23grainFilter)'/></svg>");
  background-size: 180px 180px;
}

::selection {
  background: rgba(34, 211, 238, 0.35);
  color: #e7fbff;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #070910;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #155e75, #0e7490);
  border-radius: 8px;
}

.site-header {
  position: relative;
  padding: 4.5rem 1rem 3rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(10, 13, 24, 0.92), rgba(7, 9, 17, 0.4) 70%, transparent);
}

/* Neon hairline under the header. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 3%,
    rgba(34, 211, 238, 0.85),
    rgba(139, 92, 246, 0.85),
    rgba(244, 114, 182, 0.85),
    transparent 97%
  );
  opacity: 0.85;
}

.site-title {
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: linear-gradient(92deg, #a5f3fc, #22d3ee 35%, #8b5cf6 70%, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.35));
}

.site-title-note {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--text-muted-color);
  font-style: italic;
}

.site-tagline {
  margin: 1rem auto 0;
  font-size: 1.02rem;
  color: var(--text-primary-color);
  max-width: 640px;
  text-shadow: 0 2px 18px rgba(1, 3, 10, 0.8);
}

.page-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem 3.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The controls sit on one glass panel, above the job list so open filter panels overlay the cards. */
.controls-section {
  position: relative;
  z-index: 10;
  background:
    linear-gradient(180deg, var(--glass-highlight-color), rgba(255, 255, 255, 0.02)),
    var(--glass-panel-background-color);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-panel-border-color);
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  box-shadow: inset 0 1px 0 var(--glass-highlight-color), 0 24px 60px var(--deep-shadow-color);
}

.search-input-label {
  display: block;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--neon-cyan-soft-color);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
}

.job-search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: var(--text-primary-color);
  background-color: var(--control-background-color);
  border: 1px solid var(--control-border-color);
  border-radius: 12px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.job-search-input::placeholder {
  color: rgba(152, 161, 182, 0.65);
}

.job-search-input:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(34, 211, 238, 0.18),
    0 0 24px rgba(34, 211, 238, 0.2);
}

/* Filter bar: glossy pill buttons that open multi-select panels (native details elements). */
.filter-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.filter-dropdown {
  position: static;
}

.filter-dropdown-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--control-border-color);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01)),
    var(--control-background-color);
  box-shadow: inset 0 1px 0 var(--glass-highlight-color);
  color: #c9d1e3;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.filter-dropdown-summary::-webkit-details-marker {
  display: none;
}

/* Chevron drawn with borders so no icon font or image is needed. */
.filter-dropdown-summary::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.75;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}

.filter-dropdown[open] > .filter-dropdown-summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.filter-dropdown-summary:hover,
.filter-dropdown[open] > .filter-dropdown-summary,
.filter-dropdown-has-selection > .filter-dropdown-summary {
  border-color: rgba(34, 211, 238, 0.55);
  color: var(--neon-cyan-soft-color);
  box-shadow: inset 0 1px 0 var(--glass-highlight-color), 0 0 18px rgba(34, 211, 238, 0.18);
}

.filter-dropdown-summary:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 3px;
}

.filter-dropdown-selected-count,
.filter-dropdown-selected-choice {
  min-width: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #7deffb, #22d3ee);
  color: #041018;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.35rem;
  text-align: center;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

.filter-dropdown-selected-count[hidden],
.filter-dropdown-selected-choice[hidden] {
  display: none;
}

/* The open panel spans the whole filter bar, so it never runs off a phone screen. */
.filter-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  right: 0;
  z-index: 30;
  padding: 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(34, 211, 238, 0.28);
  /* Opaque base: any transparency lets the neon text underneath ghost through the options. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    #0a0d18;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-color),
    0 24px 60px rgba(1, 3, 10, 0.75),
    0 0 30px rgba(34, 211, 238, 0.1);
}

.filter-option-search {
  width: 100%;
  margin-bottom: 0.7rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  color: var(--text-primary-color);
  background-color: var(--control-background-color);
  border: 1px solid var(--control-border-color);
  border-radius: 10px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
}

.filter-option-search::placeholder {
  color: rgba(152, 161, 182, 0.65);
}

.filter-option-search:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(34, 211, 238, 0.16);
}

.filter-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.15rem 1rem;
  max-height: 18rem;
  overflow-y: auto;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.38rem 0.5rem;
  border-radius: 8px;
  color: #c9d1e3;
  font-size: 0.92rem;
  cursor: pointer;
}

.filter-option[hidden] {
  display: none;
}

.filter-option:hover {
  background-color: rgba(34, 211, 238, 0.07);
}

.filter-option-label-text {
  flex: 1;
  min-width: 0;
}

.filter-option-count {
  color: var(--text-muted-color);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.filter-option-empty-note {
  margin: 0.2rem 0.5rem;
  color: var(--text-muted-color);
  font-size: 0.88rem;
}

/* How a single-choice filter decides (the Pay dropdown). */
.filter-dropdown-note {
  margin: 0.65rem 0.5rem 0;
  color: var(--text-muted-color);
  font-size: 0.82rem;
}

/* Active filters: one removable chip per selection, plus Clear all. */
.active-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1rem;
}

.active-filter-row[hidden] {
  display: none;
}

.active-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.22rem 0.55rem 0.22rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--chip-border-color);
  background-color: var(--chip-background-color);
  color: var(--chip-text-color);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.active-filter-chip:hover {
  border-color: rgba(34, 211, 238, 0.6);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.2);
}

/* Remove mark drawn as two crossed bars. */
.active-filter-chip-remove-mark {
  position: relative;
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
}

.active-filter-chip-remove-mark::before,
.active-filter-chip-remove-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
}

.active-filter-chip-remove-mark::before {
  transform: translateY(-50%) rotate(45deg);
}

.active-filter-chip-remove-mark::after {
  transform: translateY(-50%) rotate(-45deg);
}

.clear-filters-button {
  padding: 0.2rem 0.3rem;
  border: none;
  background: none;
  color: var(--text-muted-color);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-decoration-color: rgba(152, 161, 182, 0.45);
  text-underline-offset: 3px;
  cursor: pointer;
}

.clear-filters-button:hover {
  color: var(--neon-cyan-soft-color);
}

.active-filter-chip:focus-visible,
.clear-filters-button:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 3px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--neon-cyan-color);
}

/* Travel-required switch: a native checkbox with role="switch", drawn as a glossy track. */
.travel-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1.1rem;
  margin-top: 1.1rem;
}

.travel-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  color: #c9d1e3;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.travel-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.travel-toggle-track {
  position: relative;
  flex: none;
  width: 2.7rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(9, 12, 22, 0.85);
  border: 1px solid var(--control-border-color);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.travel-toggle-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #e7eaf3, #98a1b6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transform: translateY(-50%);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.travel-toggle-input:checked + .travel-toggle-track {
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 16px rgba(251, 191, 36, 0.26);
}

.travel-toggle-input:checked + .travel-toggle-track::after {
  transform: translate(1.15rem, -50%);
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.65);
}

.travel-toggle-input:focus-visible + .travel-toggle-track {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 3px;
}

.travel-toggle-note {
  margin: 0;
  color: var(--text-muted-color);
  font-size: 0.85rem;
}

.job-count-paragraph {
  color: var(--text-muted-color);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin: 1.15rem 0 0;
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  margin-top: 1.5rem;
}

/* Glass job card with a glossy top sheen and a neon hover glow. */
.job-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    var(--glass-panel-background-color);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-panel-border-color);
  border-radius: 16px;
  padding: 1.2rem 1.35rem;
  box-shadow: inset 0 1px 0 var(--glass-highlight-color), 0 18px 44px rgba(1, 3, 10, 0.45);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.job-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.job-card:hover,
.job-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-color),
    0 0 0 1px rgba(34, 211, 238, 0.28),
    0 10px 34px rgba(34, 211, 238, 0.14),
    0 24px 60px var(--deep-shadow-color);
}

/* Card header: company logo tile beside the title and company line. */
.job-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  margin-bottom: 0.75rem;
}

.job-card-heading-text {
  flex: 1;
  min-width: 0;
}

.job-card-heading-text .job-card-company {
  margin-bottom: 0;
}

/* Facts under the company: the pay pill and the work-from pill side by side,
   wrapping onto a second line on narrow screens. */
.job-card-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

/* Pay line under the company: the stated range in mint, or a quiet note when
   the posting gives none. */
.job-card-pay {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  padding: 0.12rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--pay-chip-border-color);
  background-color: var(--pay-chip-background-color);
  color: var(--pay-chip-text-color);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(52, 211, 153, 0.3);
}

.job-card-pay-range-note {
  color: var(--text-muted-color);
  font-size: 0.78rem;
  font-weight: 500;
  text-shadow: none;
}

.job-card-pay-not-listed {
  border-color: var(--travel-note-chip-border-color);
  background-color: var(--travel-note-chip-background-color);
  color: var(--text-muted-color);
  font-weight: 500;
  text-shadow: none;
}

/* Work-from line: where the worker may live in violet, or a quiet note when the
   posting does not say. The tooltip names the sentence or locations behind it. */
.job-card-work-from {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  padding: 0.12rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--work-from-chip-border-color);
  background-color: var(--work-from-chip-background-color);
  color: var(--work-from-chip-text-color);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 0 10px rgba(139, 92, 246, 0.35);
  cursor: help;
}

.job-card-work-from-not-listed {
  border-color: var(--travel-note-chip-border-color);
  background-color: var(--travel-note-chip-background-color);
  color: var(--text-muted-color);
  font-weight: 500;
  text-shadow: none;
}

/* Dark logo tile. js/company-logos.js sorts each loaded logo into a kind:
   filled squares and badges fill the tile edge to edge (no light rim),
   transparent marks get breathing room, and marks too dark to read on the
   tile get their lightness flipped. If the tile color changes, update
   LOGO_TILE_BACKGROUND_RED_GREEN_BLUE in js/company-logos.js to match the
   darker end of this gradient. */
.company-logo-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-top: 0.1rem;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #151a29, #0b0e18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(151, 165, 197, 0.18),
    0 8px 20px rgba(1, 3, 10, 0.55);
}

.company-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-logo-tile-light-mark .company-logo-image,
.company-logo-tile-dark-mark .company-logo-image {
  width: 84%;
  height: 84%;
}

/* Flips lightness but keeps hue, so a dark teal wordmark reads as light teal. */
.company-logo-tile-dark-mark .company-logo-image {
  filter: invert(1) hue-rotate(180deg);
}

/* Without a logo, the stock ticker stands in, drawn in the site's neon glass style. */
.company-logo-tile-monogram {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(139, 92, 246, 0.22)),
    rgba(9, 12, 22, 0.92);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-color),
    0 0 0 1px rgba(34, 211, 238, 0.32),
    0 0 16px rgba(34, 211, 238, 0.14);
}

.company-logo-monogram {
  color: var(--neon-cyan-soft-color);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

.company-logo-monogram-long {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.job-card-title {
  margin: 0 0 0.4rem;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
}

.job-card-title a {
  color: var(--neon-cyan-soft-color);
  text-decoration: none;
  text-shadow: 0 0 16px rgba(34, 211, 238, 0.35);
}

.job-card-title a:hover {
  color: #a5f3fc;
  text-decoration: underline;
  text-decoration-color: rgba(34, 211, 238, 0.5);
  text-underline-offset: 4px;
}

.job-card-company {
  margin: 0 0 0.65rem;
  font-weight: 600;
  color: var(--text-primary-color);
}

.job-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.job-meta-chip {
  background-color: var(--chip-background-color);
  border: 1px solid var(--chip-border-color);
  color: var(--chip-text-color);
  border-radius: 999px;
  padding: 0.16rem 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* Travel-required roles: amber badge and an amber edge on the card. */
.job-meta-chip-travel-required {
  background-color: var(--travel-chip-background-color);
  border-color: var(--travel-chip-border-color);
  color: var(--travel-chip-text-color);
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}

/* Stated travel below the travel-required level: a quiet note, not a warning. */
.job-meta-chip-travel-note {
  background-color: var(--travel-note-chip-background-color);
  border-color: var(--travel-note-chip-border-color);
  color: #c9d1e3;
}

.job-card-travel-required {
  border-color: rgba(251, 191, 36, 0.2);
}

.job-card-travel-required:hover,
.job-card-travel-required:focus-within {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-color),
    0 0 0 1px rgba(251, 191, 36, 0.24),
    0 10px 34px rgba(251, 191, 36, 0.12),
    0 24px 60px var(--deep-shadow-color);
}

.job-card-trust {
  margin: -0.55rem 0 0.95rem;
  color: var(--text-muted-color);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.job-card-snippet {
  margin: 0 0 1rem;
  color: var(--text-muted-color);
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Glossy neon button. */
.job-card-apply-link {
  display: inline-block;
  padding: 0.5rem 1.05rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #041018;
  background: linear-gradient(180deg, #7deffb, #22d3ee 55%, #0fb5d4);
  border: 1px solid rgba(125, 239, 251, 0.7);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 18px rgba(34, 211, 238, 0.35),
    0 8px 20px rgba(1, 3, 10, 0.45);
  text-decoration: none;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.job-card-apply-link:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 30px rgba(34, 211, 238, 0.55),
    0 10px 24px rgba(1, 3, 10, 0.5);
}

.empty-state-paragraph {
  background: rgba(16, 20, 34, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px dashed rgba(34, 211, 238, 0.35);
  border-radius: 16px;
  padding: 2.4rem 1.5rem;
  text-align: center;
  color: var(--text-muted-color);
  box-shadow: inset 0 1px 0 var(--glass-highlight-color);
}

.site-footer {
  position: relative;
  padding: 1.75rem 1rem 2.25rem;
  text-align: center;
  color: var(--text-muted-color);
  font-size: 0.85rem;
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(151, 165, 197, 0.28), transparent);
}

.site-footer p {
  max-width: 720px;
  margin: 0.35rem auto;
}

.logo-attribution a {
  color: var(--text-muted-color);
  text-decoration: underline;
  text-decoration-color: rgba(152, 161, 182, 0.45);
  text-underline-offset: 3px;
}

.logo-attribution a:hover {
  color: var(--neon-cyan-soft-color);
}

.noscript-warning {
  text-align: center;
  padding: 1rem;
  color: #fde68a;
  background: rgba(120, 53, 15, 0.25);
  border-top: 1px solid rgba(251, 191, 36, 0.35);
  margin: 0;
}

a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .site-title {
    font-size: 2rem;
  }

  .site-header {
    padding: 3rem 1rem 2rem;
  }

  .controls-section {
    padding: 1.1rem 1.1rem;
  }

  .filter-dropdown-summary {
    padding: 0.45rem 0.85rem;
    font-size: 0.88rem;
  }

  .filter-option-grid {
    grid-template-columns: 1fr;
    max-height: 15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }

  .job-card,
  .job-card-apply-link,
  .job-search-input,
  .travel-toggle-track,
  .travel-toggle-track::after,
  .filter-dropdown-summary,
  .filter-dropdown-summary::after,
  .active-filter-chip {
    transition: none;
  }

  .job-card:hover,
  .job-card:focus-within,
  .job-card-apply-link:hover {
    transform: none;
  }
}

/* Static pages (How we verify jobs). */
.static-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.static-page section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    var(--glass-panel-background-color);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-panel-border-color);
  border-radius: 16px;
  padding: 1.3rem 1.5rem;
  box-shadow: inset 0 1px 0 var(--glass-highlight-color), 0 18px 44px rgba(1, 3, 10, 0.45);
}

.static-page h2 {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--neon-cyan-soft-color);
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}

.static-page p {
  margin: 0 0 0.7rem;
  color: var(--text-primary-color);
}

.static-page p:last-child {
  margin-bottom: 0;
}

.static-page ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-primary-color);
}

.static-page li {
  margin-bottom: 0.5rem;
}

.static-page li:last-child {
  margin-bottom: 0;
}

.static-page-back {
  text-align: center;
}

.static-page-back a {
  color: var(--neon-cyan-soft-color);
  text-decoration: none;
}

.static-page-back a:hover {
  text-decoration: underline;
}

/* Footer links (the logo credit keeps its own quieter look). */
.site-footer > p:not(.logo-attribution) a {
  color: var(--neon-cyan-soft-color);
  text-decoration: none;
}

.site-footer > p:not(.logo-attribution) a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Buttons shared by the account controls, the locked company cards, and the plans. */
.neon-button {
  display: inline-block;
  padding: 0.5rem 1.05rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #041018;
  background: linear-gradient(180deg, #7deffb, #22d3ee 55%, #0fb5d4);
  border: 1px solid rgba(125, 239, 251, 0.7);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 18px rgba(34, 211, 238, 0.35),
    0 8px 20px rgba(1, 3, 10, 0.45);
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.neon-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 30px rgba(34, 211, 238, 0.55),
    0 10px 24px rgba(1, 3, 10, 0.5);
}

.neon-button:disabled {
  cursor: default;
  filter: grayscale(0.7) brightness(0.75);
  transform: none;
  box-shadow: none;
}

.ghost-button {
  display: inline-block;
  padding: 0.5rem 1.05rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary-color);
  background: rgba(16, 20, 34, 0.55);
  border: 1px solid var(--control-border-color);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 var(--glass-highlight-color);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ghost-button:hover {
  color: var(--neon-cyan-soft-color);
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: inset 0 1px 0 var(--glass-highlight-color), 0 0 16px rgba(34, 211, 238, 0.18);
}

.neon-button-small,
.ghost-button-small {
  padding: 0.32rem 0.75rem;
  font-size: 0.82rem;
}

.neon-button[hidden],
.ghost-button[hidden] {
  display: none;
}

.link-button {
  padding: 0;
  font: inherit;
  color: var(--neon-cyan-soft-color);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(103, 232, 249, 0.45);
  text-underline-offset: 3px;
}

.link-button:hover {
  color: #a5f3fc;
}

.neon-button:focus-visible,
.ghost-button:focus-visible,
.link-button:focus-visible,
.preview-switch-select:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: 3px;
}

/* Account bar in the page header: sign in and sign up, or the account and its tier. */
.account-bar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  max-width: calc(100% - 2rem);
  font-size: 0.85rem;
}

.account-bar:empty {
  display: none;
}

.account-bar-email {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted-color);
}

.account-bar-note {
  color: var(--text-muted-color);
  font-style: italic;
}

.tier-badge {
  padding: 0.12rem 0.6rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tier-badge-free {
  color: var(--chip-text-color);
  background: var(--chip-background-color);
  border-color: var(--chip-border-color);
}

.tier-badge-member {
  color: #fbcfe8;
  background: rgba(244, 114, 182, 0.12);
  border-color: rgba(244, 114, 182, 0.5);
  box-shadow: 0 0 14px rgba(244, 114, 182, 0.25);
}

/* The owner's preview switch (only in the local file, which holds every listing). */
.preview-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.preview-switch-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--travel-chip-text-color);
}

.preview-switch-select {
  padding: 0.28rem 0.5rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-primary-color);
  background: var(--control-background-color);
  border: 1px solid var(--travel-chip-border-color);
  border-radius: 8px;
}

/* Notes about the account: back from checkout, or a failed account action. */
.account-notice {
  margin: 0 0 1.1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--glass-panel-border-color);
  border-radius: 14px;
  color: var(--text-primary-color);
  background: var(--glass-panel-background-color);
}

.account-notice[hidden] {
  display: none;
}

.account-notice-success {
  color: var(--pay-chip-text-color);
  background: rgba(16, 60, 45, 0.35);
  border-color: var(--pay-chip-border-color);
}

.account-notice-problem {
  color: #fecdd3;
  background: rgba(80, 20, 30, 0.35);
  border-color: rgba(244, 63, 94, 0.45);
}

/* Sign in and sign up dialog. */
.account-dialog {
  width: min(26rem, calc(100% - 2rem));
  padding: 1.6rem 1.6rem 1.3rem;
  color: var(--text-primary-color);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(12, 15, 27, 0.94);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-color),
    0 30px 80px rgba(1, 3, 10, 0.7),
    0 0 40px rgba(34, 211, 238, 0.12);
}

.account-dialog::backdrop {
  background: rgba(3, 5, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.account-dialog-title {
  margin: 0;
  font-size: 1.35rem;
  background: linear-gradient(92deg, #a5f3fc, #22d3ee 45%, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.account-dialog-lead {
  margin: 0 0 0.5rem;
  color: var(--text-muted-color);
  font-size: 0.92rem;
}

.account-field-label {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon-cyan-soft-color);
}

.account-field-input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text-primary-color);
  background-color: var(--control-background-color);
  border: 1px solid var(--control-border-color);
  border-radius: 12px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45);
}

.account-field-input:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(34, 211, 238, 0.18);
}

.account-field-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted-color);
}

.account-form-message {
  margin: 0.4rem 0 0;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  color: #fecdd3;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.4);
  border-radius: 10px;
}

.account-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.account-dialog-switch {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted-color);
}

/* Locked company card: how many more listings a company has, never what they are. */
.locked-company-card {
  border-style: dashed;
  border-color: rgba(167, 139, 250, 0.5);
  background:
    linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(34, 211, 238, 0.04)),
    var(--glass-panel-background-color);
}

.locked-company-card .company-logo-tile {
  opacity: 0.75;
  filter: saturate(0.7);
}

.locked-company-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--work-from-chip-text-color);
  text-shadow: 0 0 16px rgba(139, 92, 246, 0.4);
}

.locked-company-lock-icon {
  position: relative;
  flex: none;
  width: 0.8rem;
  height: 0.65rem;
  border-radius: 2px;
  background: linear-gradient(180deg, #c4b5fd, #8b5cf6);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.6);
}

.locked-company-lock-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0.5rem;
  height: 0.4rem;
  transform: translateX(-50%);
  border: 2px solid #c4b5fd;
  border-bottom: 0;
  border-radius: 0.3rem 0.3rem 0 0;
}

.locked-company-text {
  margin: 0;
  color: var(--text-primary-color);
  font-size: 0.93rem;
}

.locked-company-note {
  margin: 0.35rem 0 0;
  color: var(--text-muted-color);
  font-size: 0.82rem;
}

.locked-company-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Plans page. */
.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.plan-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1.3rem 1.35rem;
  border: 1px solid var(--glass-panel-border-color);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    var(--glass-panel-background-color);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-highlight-color), 0 18px 44px rgba(1, 3, 10, 0.45);
}

.plan-card-member {
  border-color: rgba(244, 114, 182, 0.45);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-color),
    0 0 30px rgba(244, 114, 182, 0.14),
    0 18px 44px rgba(1, 3, 10, 0.45);
}

.plan-name {
  margin: 0;
  font-size: 1.1rem;
  color: var(--neon-cyan-soft-color);
}

.plan-card-member .plan-name {
  color: #f9a8d4;
}

.plan-price {
  margin: 0;
}

.plan-price-amount {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary-color);
}

.plan-summary {
  margin: 0;
  color: var(--text-muted-color);
}

.plan-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
}

.plan-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--glass-panel-border-color);
}

.plan-option-price {
  color: var(--text-muted-color);
}

.plan-option-price .plan-price-amount {
  margin-right: 0.15rem;
  font-size: 1.3rem;
}

.plan-option-note {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--pay-chip-border-color);
  border-radius: 999px;
  font-size: 0.72rem;
  color: var(--pay-chip-text-color);
  background: var(--pay-chip-background-color);
}

.plan-member-note {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--pay-chip-text-color);
}

.pricing-message {
  margin: 0;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(244, 63, 94, 0.45);
  border-radius: 12px;
  color: #fecdd3;
  background: rgba(80, 20, 30, 0.35);
}

@media (max-width: 760px) {
  .pricing-tiers {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .site-header {
    padding-top: 1.25rem;
  }

  .account-bar {
    position: static;
    justify-content: center;
    max-width: 100%;
    margin: 0 0 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon-button,
  .ghost-button {
    transition: none;
  }

  .neon-button:hover {
    transform: none;
  }
}

/* Reset password page and the forgot password link. */
.account-forgot-password {
  font-size: 0.85rem;
}

.reset-password-lead {
  color: var(--text-muted-color);
}

.reset-password-form {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.reset-password-form .account-form-actions {
  margin-top: 0.75rem;
}