/**********************  Self-hosted fonts ************************/
/* Variable fonts: one woff2 per subset covers weights 400–700. The browser
   only downloads latin-ext when a glyph in that range is actually used. */

/* Nunito — latin */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(/assets/fonts/nunito-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nunito — latin-ext */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(/assets/fonts/nunito-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Darker Grotesque — latin */
@font-face {
	font-family: 'Darker Grotesque';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(/assets/fonts/darker-grotesque-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Darker Grotesque — latin-ext */
@font-face {
	font-family: 'Darker Grotesque';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(/assets/fonts/darker-grotesque-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/**********************  Reset CSS ************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/**********************  End: Reset CSS ************************/

/* ====================  Design tokens  ====================
   The brand accent ("ranked" orange) and the info/active blue were previously
   hardcoded several different ways across this sheet (`orange`, #ff8000,
   #c67400, rgba(255,165,0,…)). Each distinct value now has one named token so
   it stays consistent — values are unchanged, only centralised.
   Rank-tier card colors live in functions/cards.js (getRankColor), the single
   source for those, since cards are rendered in JS. */
:root {
  --brand: orange;                       /* primary accent / gold-rank text */
  --brand-fill: #ff8000;                 /* checked checkbox + active fills */
  --brand-fill-edge: #c67400;            /* their border */
  --brand-ring: rgba(255, 165, 0, 0.85); /* focus/hover ring on the brand */
  --brand-ring-soft: rgba(255, 165, 0, 0.1);
  --info-blue: rgb(0, 187, 250);         /* focus rings, toast "loading" */
}

html {
  background-color: black;  
  color: white;  
  /*font-family: 'Nunito', sans-serif;*/
  font-family: "Darker Grotesque", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h2 {
  font-weight: bold;
  font-size: 3.2rem;
  padding: 0rem;
  margin-top: 0rem;
}

a {
  text-decoration: none;
  color: white;
}

[hidden] {
  display: none !important;
}

.pressable {
  cursor: pointer;
}

.orange {
  color: var(--brand);
}

.flex-1 {
  flex: 1;
}

.header-container {
  display: flex;
  width: 100vw;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0.5rem;
}

.Header {  
  width: 100%;
  background: radial-gradient(ellipse at right top, rgba(7,7,7,1) 0%, rgba(5,5,5,1) 47%, rgba(7,7,7,1) 100%) !important;
  padding-top: 1.0rem;
  padding-bottom: 1.0rem;  
}

.scannedResumeElement {
  font-size: 0.625rem;
}

.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

.row-item {
  flex: 1;
}

.filters {
  z-index: 2;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  padding-top: 1rem;
}

.generic-button {
  margin: 0.04rem;
  margin-top: 0.08rem;
  margin-bottom: 0.08rem;
}

.generic-group-title {
  padding: 0.1875rem;
  font-size: 0.5625rem;
  color: rgba(100,100,100,1);
}

.generic-group-checkbox {
  /* Use 'appearance: none;' for modern browsers to remove default styles */
  appearance: none;
  -webkit-appearance: none; /* For Safari support */
  /* Hide the input element but keep it focusable and functional */
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.generic-group-checkbox-label {
  user-select: none;
  display: inline-block;
  padding: 0.5em 0.5em;
  width: 5.35rem;
  font-size: 0.585rem;
  text-align: center;
  border: 0.0625rem solid rgb(16, 16, 16);
  border-radius: 0.0rem;
  background-color: rgba(255,255,255,1);
  color: white;
  cursor: pointer;
  /* Add smooth transition for visual feedback */
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.filter-button {
  margin: 0.04rem;
  margin-top: 0.08rem;
  margin-bottom: 0.08rem;
}


.header-logo {
  height: 6rem;
  width: 24rem;
  object-fit: contain;
}

.header-buttons {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.filter-group {
  padding: 0.35rem;
  padding-left: 0rem;
  padding-right: 0rem;
}

/* A text-only group (the companies "Search" bar) takes the whole sidebar row so
   it sits on its own line; the input stretches to fill it. */
.filter-group--full {
  flex-basis: 100%;
  width: 100%;
}
.filter-group--full .filter-text-input-container {
  width: 100%;
}
.filter-group--full .filter-search-input {
  width: 100%;
}

.filter-group-title {
  padding: 0.1875rem;
  font-size: 0.5625rem;
  color: rgba(150,150,150,1);
}

.filter-group-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* wrap filters onto a new line instead of bleeding past the sidebar edge */
  font-size: 0.71875rem;
  color: rgba(200,200,200,1);
}

.filter-group-checkbox {
  /* Use 'appearance: none;' for modern browsers to remove default styles */
  appearance: none;
  -webkit-appearance: none; /* For Safari support */
  /* Hide the input element but keep it focusable and functional */
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


.slider {
  overflow: hidden;
  width: 100%;
}

.slider-track {
  display: flex;
  width: max-content;
  animation: scroll 40s linear infinite;
}

.slider-row {
  display: flex;
}

.slider.slow .slider-track {
  animation-duration: 60s;
}

.slider.reverse .slider-track {
  animation-direction: reverse;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  }
}

svg {
  width: 72rem;
}

.circuit {
  fill: none;
  stroke: rgba(255,127,0,0);
  stroke-width: 0.1;
}

.profile-tag-text {
  text-align: center;
}

.pulse {
  fill: none;
  stroke: var(--brand);
  stroke-width: 0.1;
  stroke-linecap: round;

  /* VERY small dash = cheap to render */
  stroke-dasharray: 6 60;

  /* single animation only */
  animation: move 2.2s linear infinite;
}

/* second pulse, same direction but offset */
.pulse2 {
  animation-delay: -1.1s;
  /*stroke: rgba(255,0,255,1);*/
}

@keyframes move {
  to {
    stroke-dashoffset: -66;
  }
}

.narrow {
  width: 4.05rem;
}

#items-grid,
.items-grid {
  display: contents;
}

.container {
  display: grid;

  /* responsive columns */
  grid-template-columns: repeat(auto-fill, minmax(15.5375rem, 1fr));

  /* each "box" has consistent height */
  /*grid-auto-rows: 11.25rem;*/
  grid-auto-rows: minmax(11.25rem, auto); 

  /* allows items to backfill gaps under sidebar */
  grid-auto-flow: dense;

  padding-left: 1rem;
  padding-right: 1rem;
  gap: 0.6rem;
  padding-top: 0.6rem;
  padding-bottom: 0vh;
}

/* Compact grid for profile/company listings. Tighter columns than jobs so the
   smaller cards pack densely; 1fr lets them stretch to fill the row evenly, so
   the gaps between items match the gaps above/below them — a clean grid. Cards
   fill their column (see .container--compact .profile-card below). */
.container--compact {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
/* Fill the (narrower) compact column instead of the fixed 15rem, so cards sit
   flush with no inter-item gap. The fixed width still applies in the About page
   slider and the edit modal, where the card isn't in a compact grid. */
.container--compact .profile-card {
  width: 100%;
}

.hideonmobile {
  display: initial;
}

.hideonnarrow {
  display: inherit;
}

.hideondesktop {
  display: initial;
}

.Page-container {
  display: flex;
  flex-direction: row;
  width: 100vw;  
}

.header-info-container {
  max-width: 20rem;
}

.header-info {
  padding-left: 1rem;
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding-right: 2rem;
}

html {
  font-size: 16px;
}

.header-button-soon {
  font-size: 1.2rem;
  padding-bottom: 0.4rem;
  rotate: -1.5deg;
  background-color: rgba(150,20,20,1);
  color: rgba(200,200,200,1);
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  padding-top: 0;
}

@media (max-width: 1300px) {
  html {
    font-size: 20px;
  }
  .hideonnarrow {
    display: none;
  }
  .header-button {
    font-size: 2rem;
  }
  .header-button-soon {
    font-size: 0.8rem;
    padding-bottom: 0.2rem;
  }
}

@media (max-width: 915px) {
  html {
    font-size: 14px;
  }  
}

@media (max-width: 755px) {
  html {
    font-size: 13px;
  }  
}

@media (max-width: 600px) {
  html {
    font-size: 12px;
  }  
}

/* normal boxes */
.box {
  background: #eee;
}

/* sidebar */
.sidebar {
  grid-column: -2 / -1; /* last column */
  grid-row: span 2;
}

.filter-group-checkbox-label {
  user-select: none;
  box-sizing: border-box; /* declared width/height includes padding+border, so buttons never overflow their slot */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.35rem; /* shared control height — text inputs match this so the rows align */
  padding: 0 0.5em;
  width: 5.35rem;
  font-size: 0.585rem;
  font-family: Nunito;
  font-weight: 400;
  text-align: center;
  border: 0.0625rem solid rgb(16, 16, 16);
  border-radius: 0.0rem;
  background-color: rgba(255,255,255,1);
  color: black;
  cursor: pointer;
  /* Add smooth transition for visual feedback */
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

/* Narrow filters set 4.05rem on the wrapper; make the label fill it (instead of
   keeping its own 5.35rem width and spilling over). */
.filter-button.narrow .filter-group-checkbox-label {
  width: 100%;
}

input[type="checkbox"]:checked + .filter-group-checkbox-label {
  background-color: var(--brand-fill); /* active/checked fill */
  border-color: var(--brand-fill-edge);
}

.filter-group-checkbox-label:hover {
  background-color: #a9a9a9;
}

input[type="checkbox"]:focus + .filter-group-checkbox-label {
  outline: 0rem solid #007bff;
  outline-offset: 0rem;
}

.filter-group-input {
  height: 0.625rem;
  font-size: 0.625rem;
}

.filter-text-input-container {

}

textarea {
  min-height: 1.02rem;
  width: 13.5rem;
  margin: 0.0125rem;
  outline: 0rem solid #007bff;
  outline-offset: 0rem;
  text-align: center;

}

textarea::placeholder { /* Standard syntax, Chrome, Opera, Safari, Firefox 51+ */
  color: rgba(150,150,150,1);
}

textarea:hover {
  background-color: #9a9a9a;
  cursor: text;
}

textarea:not(:placeholder-shown) {
  background-color: var(--brand-fill); /* active/checked fill */
  border-color: var(--brand-fill-edge);
  color: white;
}

input {
  min-height: 1.02rem;
  width: 13.5rem;
  margin: 0.0125rem;
  outline: 0rem solid #007bff;
  outline-offset: 0rem;
  text-align: center;

}

input::placeholder { /* Standard syntax, Chrome, Opera, Safari, Firefox 51+ */
  color: rgba(150,150,150,1);
}

input:hover {
  background-color: #9a9a9a;
  cursor: text;
}

input:not(:placeholder-shown) {
  background-color: var(--brand-fill); /* active/checked fill */
  border-color: var(--brand-fill-edge);
  color: white;
}


.filter-text-input {
  /* The search input shares .filter-group-checkbox-label with the buttons; pin
     display back to inline-block (not the buttons' inline-flex) and match the
     shared 1.5rem control height so inputs and buttons line up exactly. */
  display: inline-block;
  box-sizing: border-box;
  height: 1.35rem;
  margin: 0; /* the wrapper (.filter-button) supplies spacing, same as the buttons' labels — no extra input margin */
  outline: 0rem solid #007bff;
  outline-offset: 0rem;
}

.filter-text-input::placeholder { /* Standard syntax, Chrome, Opera, Safari, Firefox 51+ */
  color: rgba(150,150,150,1);
}

.filter-text-input:hover {
  background-color: #9a9a9a;
  cursor: text;
}

.filter-text-input:not(:placeholder-shown) {
  background-color: var(--brand-fill); /* active/checked fill */
  border-color: var(--brand-fill-edge);
  color: white;
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.Page {
  /*height: 100vh;*/
  /*overflow: hidden;  */
  min-width: 100vw;  
  
  display: flex;
  flex-direction: column;
  align-items: center;
}



.Mainarea {
  /*box-shadow: inset 0.43em 0.35em 1.063em rgba(0, 0, 0, 0.98), inset -0.43em -0.0em 1.063em rgba(0, 0, 0, 0.98);*/
  flex: 1;
}

.small-sidebar {
  background: radial-gradient(ellipse at right top, rgba(7,7,7,1) 0%, rgba(5,5,5,1) 47%, rgba(7,7,7,1) 100%) !important;
  flex: 0.015;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
}

.Profile { 
  margin-top: 2.5rem;
  margin-bottom: 4rem;
}

.progress-bar {
  height: 0.31rem;
  width: 7.2rem;
  background-color: white;
  border-radius: 0.625rem;
  margin-top: 0.5rem;
}

.Sidebar {  
  /*transition: transform 0.25s ease, opacity 0.25s ease;*/
  width: 16.7rem;
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;  
}

.Small-Sidebar {  
  transition: transform 0.25s ease, opacity 0.25s ease;  
  width: 3.43rem;
  
  display: flex;
  flex-direction: column;
  align-items: center;  

  font-family: "Darker Grotesque", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.Sidebar-section {
  height: 10vh;
  width: 100%;
  border-top: dotted 0.137rem rgba(40,40,40,1);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.sidebar-section-image-container {
  margin-left: 1rem;
  margin-right: 1rem;
}

.sidebar-section-image {
  height: 2rem;
  width: 2rem;
  opacity: 0.2;
}

.sidebar-image-container {

}

.sidebar-image {
  height: 9.2rem;
  width: 10.3rem;
  object-fit: contain;
}

.button {
  padding: 0rem;
  border-radius: 0rem;
  background-color: rgba(20,20,20,1);  
  color: rgba(210,210,210,1);
  cursor: pointer;
}

.button:hover {
  background-color: rgba(30,30,30,1);  
  color: rgba(250,250,250,1);
}

.job-list {
  width: 100vw;
  display: flex;
  flex-direction: row;  
  justify-content: center;  
  flex-wrap: wrap;
}

.job {      
  background: radial-gradient(ellipse at right top, rgba(10,10,10,1) 0%, rgba(0,0,0,1) 47%, rgba(10,10,10,1) 100%) !important;
  font-size: 0.6rem;
  display: flex;
  overflow: hidden;
  align-items: flex-start;
  color: rgba(200,200,200,1);
  max-width: 22rem;
  /*box-shadow: -0.3em 0.3em 0.1em rgba(110, 110, 110, 0.8);*/
}

.job-image {
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 0.2rem;
  object-fit: contain;
}

.job-salary {
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 500;
}

#close-profile-edit {
  background-color: rgba(150, 20, 20, 1);
  color: rgba(200, 200, 200, 1);
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  padding-top: 0.0rem;
  padding-bottom: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

#register-user {
  background-color: rgba(150, 80, 20, 1);
  color: rgba(200, 200, 200, 1);
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  padding-top: 0.0rem;
  padding-bottom: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

#logout-user {
  background-color: rgba(150, 20, 20, 1);
  color: rgba(200, 200, 200, 1);
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  padding-top: 0.0rem;
  padding-bottom: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.edit-toggle {
  background-color: rgba(45, 45, 45, 1);
  color: rgba(200, 200, 200, 1);
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  padding-top: 0.0rem;
  padding-bottom: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.edit-toggle--on {
  background-color: rgba(150, 80, 20, 1);
}

.profile-email {
  display: none;
  position: absolute;
  margin-left: -2rem;
  background-color: black;
  font-size: 0.8rem;
  padding: 0.1rem;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

.job-link-image-container:hover .profile-email {
  display: flex;  
}

.job-image-container {
  padding: 0.5rem;
  padding-bottom: 0rem;
}

.job-updated {
  font-size: 0.35rem;
  color: rgba(70,70,70,1);
}

.filter-range-container {
  font-size: 0.656rem;
  color: rgba(140,140,140,1);
  text-align: center;
}

.filter-range {
  width: 6.875rem;
}

.header-image {
  height: 1.06rem;
  width: 1.06rem;
  cursor: pointer;
}

.job-like-image {
  height: 1.1rem;
  width: 1.1rem;
}

.explain-image-container {
  cursor: pointer;
}

.explain-image {
  height: 2rem;
  width: 2rem;
}

.job-link-image {
  height: 1.1rem;
  width: 1.1rem;
  opacity: 0.25;
  transition: opacity 0.15s ease;
}
/* Brighten the footer icons (link / up-arrows / QR) when hovering their
   clickable container, so they read as interactive. */
.job-link-image-container.pressable:hover .job-link-image {
  opacity: 0.65;
}

.liked {
  opacity: 0.7;
}

.job-like-image-container {
  padding: 0rem;
  opacity: 0.3;  
  transition: opacity 0.2s ease;
}

.job-like-image-container.is-liked {
  opacity: 1;
}

.job-link-image-container {  
  text-align: center;
  align-items: center;
  justify-content: center;
}

.job-link-image-container.is-liked {
  opacity: 1;
}

.job-title {
  padding: 0.65rem;
  padding-bottom: 0.1rem;
  padding-left: 0rem;
  padding-right: 0rem;
  font-size: 0.85rem;
  color: white;
}

.job-company {
  font-size: 0.65rem;
  color: rgba(185,185,185,1);
}

.job-body {
  padding: 0.5rem;
  padding-top: 0rem;
  padding-bottom: 0.6rem;
  color: rgba(140,140,140,1);
  flex: 1;
}

.job-description {
  font-size: 0.7rem;
  color: rgba(185,185,185,1);
}

.tags {
  flex-wrap: wrap;
  padding-bottom: 0.65rem;
  padding-top: 0.5rem;
}

.tag {
  width: 33.3%;
  text-align: left;
  padding-bottom: 0.15rem;
  font-size: 0.5rem;
  color: rgba(100,100,100,1);
}

.tag-text {  
  font-size: 0.6rem;
  color: white;
}

.tag-rank {
  font-size: 0.8rem;
}

/* Estimated tags (visa, soft language levels): AI-extracted and hedged, flagged
   with an ⓘ that reveals a "confirm with the employer" note on hover/long-press.
   The help cursor signals there's more to read. */
.tag--est {
  cursor: help;
}
.tag-info {
  font-size: 0.5rem;
  color: rgba(150, 150, 150, 1);
  vertical-align: super;
}

.job-footer {
  width: 91.5%;
  border-top: 0.031rem solid rgba(40,40,40,1);
  padding: 0.4rem;
}

.job-footer-item {
  
}

.grid-container {
  
}

.grid {
  display: grid;  
  padding-left: 1rem;
  padding-right: 1rem;      
  

  /* size of one "square" */
  grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr));

  gap: 0.6rem;

  /* this makes everything auto-pack */
  grid-auto-flow: dense;

  padding-top: 0.6rem;
  padding-bottom: 0vh;  
}

.card {
  background: #151419;
  border-radius: 0rem;
  padding: 0rem;
  min-height: 1.875rem;
  min-width: 1.875rem;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  border: 0.125rem solid var(--brand-fill);
}

/* size definitions */
.size-1x1 {
  grid-column: span 1;
  grid-row: span 1;
}

.size-2x1 {
  grid-column: span 2;
  grid-row: span 1;
}

.size-1x2 {
  grid-column: span 1;
  grid-row: span 2;
}

.size-2x2 {
  grid-column: span 2;
  grid-row: span 2;
}



/* Container element - essential for positioning the tooltip text */
.tooltip {
  position: relative;
  display: inline-block; /* Helps prevent the popup from affecting surrounding elements' layout */
}

/* The actual popup content - hidden by default */
.tooltip .tooltip-box {
  visibility: hidden;
  width: 11.25rem;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 0.375rem;
  padding: 0.3125rem 0.125rem;
  position: absolute; /* Position the tooltip text absolutely */
  z-index: 1; /* Ensure the popup appears in front of other elements */
  top: 0%; /* Position above the hovered element */
  right: 120%;
  opacity: 0;
  font-size: 0.8rem;
  transition: opacity 0.3s; /* Add a smooth fade-in effect */
}

.tooltip .tooltip-above {
  top: -250%; /* Position above the hovered element */
  left: -110%;
  width: 6.25rem;
}

/* Show the tooltip text when the user hovers over the container */
.tooltip:hover .tooltip-box {
  visibility: visible;
  opacity: 1;
}


/* Basic CSS for the range slider */
.slider-wrapper {
  width: 12.1875rem;
  font-family: sans-serif;
  position: relative;
}

.values {
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.range-container {
  position: relative;
  height: 1.75rem;
}

input[type="range"] {
  position: absolute;
  width: 100%;
  pointer-events: none; /* allow stacking */
  appearance: none;
  background: none;
}

input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  appearance: none;
  margin-bottom: -0.625rem;
  height: 0.625rem;
  width: 0.625rem;
  background: var(--brand);
  border-radius: 1.25rem;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  margin-bottom: -0.625rem;
  height: 0.625rem;
  width: 0.625rem;
  background: var(--brand);
  border-radius: 1.25rem;
  cursor: pointer;
  border: none;
}

.track {
  position: absolute;
  height: 0.1875rem;
  width: 100%;
  background: rgba(130,130,130,1);
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0.125rem;
}

.range-highlight {
  position: absolute;
  height: 0.1875rem;
  background: var(--brand);
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0.125rem;
}

/* moving value labels */
.value{
  position:absolute;
  top: 1.25rem;
  font-size: 0.75rem;
  transform:translateX(-50%);
  background:#000;
  color:#fff;
  padding: 0.125rem 0.375rem;
  border-radius:0.375rem;
  white-space:nowrap;
}

.slider-wrapper-single{
  position:relative;
}


.slider-wrapper-single .value{
  position:absolute;
  top: 1.25rem;
  left:0;
  transform:translateX(-50%);
}


.slider-wrapper-single .range-container{
  position:relative;
}

.job-like-image-container.is-liked img {
  transform: scale(1.05);
  transition: transform 0.15s ease;
}

/* hidden state */
.sidebar-hidden {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  width: 0.0625rem;
  overflow: hidden !important;
}


@media only screen and (max-width: 568px) {
  .hide-on-mobile {
    display: none !important; /* !important helps override other styles */
  }
}

.privacy-policy {
  max-width: 35rem;
}

.privacy-policy .c11 {
  font-size: 2.5rem;
}

.privacy-policy .c4 {
  font-size: 1rem;
  color: rgba(190,190,190,1);
}

.privacy-policy .c6 {
  font-size: 0.77rem;
  color: var(--brand);
  margin-top: 1.2rem;
}

.privacy-policy .c9 {
  font-size: 0.77rem;
  color: white;
  margin: 0.2rem;
}

/* ===== Listing page — extracted from inline styles ===== */
.filters-sidebar {
  padding-top: 1rem;
  padding-bottom: 2rem;
  padding-left: 1rem;
}
.results-count {
  font-size: 3.8rem;
  font-weight: bold;
}
.sidebar-title {
  font-size: 1.1rem;
  font-weight: 500;
  width: 100%;
  color: rgba(120,120,120,1);
}
.privacy-link {
  padding-top: 0;
  font-size: 0.8rem;
  font-weight: 500;
  width: 100%;
  color: rgba(120,120,120,1);
}
.salary-header {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.salary-header-label {
  color: white;
}
.salary-values {
  color: white;
  display: flex;
  flex-direction: row;
  margin-bottom: -2px;
}
.salary-sep {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: rgba(160,160,160,1);
}
.minLabel {
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
}
.maxLabel {
  font-size: 1.2rem;
  font-weight: bold;
}
.filter-search-input {
  width: 5.35rem; /* match the checkbox-button width exactly */
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}
.header-logo-wrap {
  padding-left: 1rem;
}
.header-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.header-row {
  flex: 1;
  display: flex;
  flex-direction: row;
}
.header-info-title {
  color: var(--brand);
  font-weight: bold;
}
.header-info-desc {
  color: rgba(125,125,125,1);
  font-size: 0.9rem;
}
.header-buttons-wrap {
  flex: 1;
  padding-right: 2rem;
  padding-left: 1rem;
}
.rank-toggle {
  background-color: rgba(20,20,20,1);
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  padding-bottom: 0.5rem;
  padding-top: 0;
  /* Inactive by default; globalfilters.js adds .rank-toggle--active to the
     selected one (PUBLIC on load). */
  opacity: 0.5;
  color: rgba(110,110,110,1);
}
.rank-toggle--active {
  opacity: 1;
  color: var(--brand);
}
/* "YOUR PROFILE" header button (showProfileButton pages). It's an action, not a
   ranking toggle, so it always reads as active/clickable rather than greyed. */
.rank-toggle--profile {
  opacity: 1;
  color: var(--brand);
  cursor: pointer;
}
.profile-badge {
  position: absolute;
  bottom: -1.15rem;
  right: 0;
}
/* Auth entry buttons start hidden; session.js reveals the correct set on load
   (driven by the localStorage session hint) so there's no flash of wrong state. */
#edit-profile,
#open-profile-edit,
#open-profile-login {
  display: none;
}
.badge-link {
  margin: 0.25rem;
}
.scroll-sentinel {
  height: 0.9375rem;
}

/* ===== Privacy policy page — extracted from inline styles ===== */
.privacy-logo-pane {
  height: 100vh;
  flex: 1;
  background-color: rgba(7,7,7,1);
}
.privacy-logo {
  height: 16vw;
}
.privacy-content-pane {
  height: 100vh;
  overflow: scroll;
  flex: 1.61803398875;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.privacy-body {
  padding: 3rem;
  text-align: left;
}

/* ===== Profile card (renderProfile) — extracted from inline styles =====
   Appended last so these override the shared .job-* / .card base rules. */
.profile-card {
  height: 14.5rem;
  width: 15rem;
  display: flex;
  align-items: center;
  position: relative;
  /* Fixed-height card: clip is the final backstop so nothing can spill past the
     box. Combined with the pinned footer below and the clamped description, the
     footer is always inside the card and never pushed out of view. */
  overflow: hidden;
}
.profile-image-container {
  position: relative;
  margin-top: 0.3rem;
  flex-shrink: 0;
}
.profile-image {
  height: 3.7rem;
  width: 3.7rem;
  transition: box-shadow 0.15s ease, opacity 0.15s ease;
}
/* In edit mode the icon is a click-to-upload target (the file input overlays
   it). Show a pointer and an orange ring that follows the icon's rounded shape
   so it's obviously interactive. */
.profile-card.editable .profile-image-container {
  cursor: pointer;
}
.profile-card.editable .profile-image-container:hover .profile-image {
  box-shadow: 0 0 0 2px var(--brand-ring);
  opacity: 0.85;
}
.image-upload-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.profile-header {
  align-items: center;
  text-align: center;
  width: 88%;
  flex-shrink: 0;
}
.w-full {
  width: 100%;
}
.profile-body {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  /* Allow this region to shrink below its content and clip the overflow, so in
     the rare case everything above is maxed out (2-line subtitle + 2 rows of
     tags + 4-line description) the description gives up its last line(s) instead
     of spilling over the footer. Normal content still shows all four lines. */
  min-height: 0;
  overflow: hidden;
}
.profile-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 82%;
  /* Tighter than the shared .tags spacing — reclaims vertical room above the
     description so four lines fit without pushing the footer down. */
  padding-top: 0.3rem;
  padding-bottom: 0.4rem;
}
.profile-desc-wrap {
  display: flex;
  align-items: center;
  text-align: center;
  width: 88%;
  /* Spacing between subtitle and description, restoring the gap the (removed)
     tags row used to provide. */
  margin-top: 0.5rem;
}
/* Profile-scoped spacing trims (job cards keep the shared .job-* spacing): pull
   a little off the title gap, the body's bottom pad and the footer pad so the
   4-line description fits the fixed-height card. */
.profile-card .job-body {
  padding-bottom: 0.3rem;
}
/* Title/subtitle vertical rhythm applied to BOTH view and edit modes, so
   toggling editing never moves them: the icon→title gap lives on the header and
   the title→subtitle gap on the title. In edit mode the chip only adds the
   (non-layout) outline + background on top of this exact same box. */
.profile-card .profile-header {
  margin-top: 0.28rem;
}
.profile-card .profile-header .job-title {
  padding-top: 0.04rem;
  margin-bottom: 0.12rem;
}
.profile-card .profile-footer {
  padding: 0.3rem;
}
.profile-footer {
  border-top: 0;
  align-items: flex-end;
  margin-bottom: 0.1rem;
  /* Pin to the bottom of the card and never shrink, so the salary/contact row
     stays visible regardless of how much the fields above it take up. */
  margin-top: auto;
  flex-shrink: 0;
}
.profile-salary {
  font-weight: bold;
  font-size: 1.1rem;
}
.profile-points-label {
  font-weight: 400;
  font-size: 0.6rem;
}
.profile-loc-badge {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
}
.profile-check-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
}
.items-center {
  align-items: center;
}
.profile-loc-icon {
  height: 0.7rem;
  width: 0.7rem;
  margin-top: 0.1rem;
}
.profile-check-icon {
  height: 1.2rem;
  width: 1.2rem;
}

/* ===== Editable profile card fields =====
   Each editable field reserves the same "chip" box — rounded + horizontally
   padded — in BOTH view and edit modes (applied by class here), so toggling
   editing only paints the chip's background + outline (neither affects layout)
   and nothing on the card reflows. The horizontal padding being present in view
   mode too means the description wraps to the exact same lines in both. */
.profile-card .profile-header .job-title,
.profile-card .profile-header .job-company,
.profile-card .job-description,
.profile-card .profile-tag-text,
.profile-card .profile-loc-badge .job-company {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  border-radius: 0.3rem;
}
.profile-card.editable [contenteditable] {
  cursor: text;
  outline-offset: 0;
  min-height: 0.9em;
  overflow-wrap: anywhere;
  transition: outline-color 0.15s ease, background-color 0.15s ease;
}
.profile-card.editable [contenteditable]:hover {
  outline-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
}
.profile-card.editable [contenteditable]:focus {
  outline: 1px solid var(--brand-ring);
  background: var(--brand-ring-soft);
}
/* Same tag min-width in both modes so short tags don't change the tag row's
   wrapping when editing turns on. */
.profile-card .profile-tag-text {
  min-width: 1.5rem;
}

/* The main fields keep their full width (and centered text) even when empty, so
   the editable area is always a stable, clickable box rather than collapsing to
   its content. The location badge only needs a small min-width. */
.profile-card.editable .profile-header .job-title,
.profile-card.editable .profile-header .job-company {
  width: 100%;
  text-align: center;
}
/* Center the description identically on the rendered and editable card, and
   keep the user's line breaks (saved as "\n" via innerText) instead of
   collapsing them onto one line. Scoped to .profile-card so job-card
   descriptions are unaffected. */
.profile-card .job-description {
  width: 100%;
  text-align: center;
  white-space: pre-wrap;
  /* Fixed, slightly tighter line-height so four lines fit the card without
     pushing the footer down (editable max-height + non-editable line-clamp both
     rely on this landing the same height regardless of the browser default). */
  line-height: 1.18;
}
.profile-card.editable .profile-loc-badge .job-company {
  min-width: 2.5rem;
  text-align: center;
}

/* Cap each field's growth so a long value can't squeeze its neighbours. These
   only constrain overflow — short/normal content still renders at its natural
   size and position. Title stays one line with an ellipsis; subtitle and
   description allow a few lines, then scroll. Heights include the chip padding
   so the last line isn't clipped. */
.profile-card.editable .profile-header .job-title {
  max-height: 1.7em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-card.editable .profile-header .job-company {
  max-height: 2.6em;
  overflow-y: auto;
}
.profile-card.editable .job-description {
  /* ~4 lines (+ chip padding) — matches the non-editable line-clamp below and
     the PROFILE_LIMITS.descriptionRows cap, so the editor shows what renders. */
  max-height: 5.1em;
  overflow-y: auto;
}

/* Render-time caps for displayed (non-editable) profile cards — including
   profiles coming from the API — so an over-long field can't overflow the fixed
   card box and shove its neighbours. PROFILE_LIMITS (cards.js) bounds the text;
   these line-clamps are the layout backstop. The editor has its own caps above. */
.profile-card:not(.editable) .profile-header .job-title,
.profile-card:not(.editable) .profile-loc-badge .job-company {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.profile-card:not(.editable) .profile-header .job-company {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.profile-card:not(.editable) .job-description {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Profile edit modal (shared by About + listing pages) ===== */
.profile-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: rgba(0,0,0,0.5);
  height: 100vh;
  width: 100vw;
  display: none;
  align-items: center;
  justify-content: center;
}
.profile-modal-content {
  position: relative;
  padding: 3rem;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.profile-modal-title {
  font-size: 4rem;
  font-weight: 700;
  text-align: center;
  padding-bottom: 20px;
  color: var(--brand);
}
.profile-modal-subtitle {
  font-size: 1.5rem;
  max-width: 480px;
  text-align: center;
  color: rgba(160,160,160,1);
  padding-bottom: 30px;
}
.profile-card-wrap {
  width: 15rem;
  margin: 0.5rem;
  flex: 0 0 auto;  
}
.profile-form-note {
  font-size: 0.9rem;
  max-width: 240px;
  text-align: center;
  color: rgba(160,160,160,1);
  padding-bottom: 30px;
}
/* Small link under the login/register forms to switch to the other one. */
.auth-toggle {
  font-size: 0.85rem;
  color: rgba(160,160,160,1);
  padding-top: 0.75rem;
}
.auth-toggle-link {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-toggle-link:hover {
  color: var(--brand-fill);
}
.permissions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin: 0.6rem 0;
}
.permission-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: rgba(200,200,200,1);
  cursor: pointer;
}
/* The global `input` rule forces width:13.5rem on every input; override it so
   the checkbox stays its natural size and sits right next to its label. */
.permission-row input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  margin-top: 0.15rem; /* align with the first text line when a hint wraps below */
}
.permission-required {
  color: var(--brand);
  font-size: 0.75rem;
}
/* Honest sublabel under a consent row (e.g. "your profile becomes public"). */
.permission-hint {
  display: block;
  font-size: 0.7rem;
  line-height: 1.2;
  color: rgba(140, 140, 140, 1);
  margin-top: 0.1rem;
}
.permission-row:has(input:disabled) {
  cursor: default;
  opacity: 0.7;
}
.register-email-input {
  width: 8.3rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}
.register-btn {
  margin: 0;
  background-color: rgba(20,20,20,1);
}
.register-btn-label {
  font-size: 1rem;
  color: var(--brand);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0;
  padding-top: 0.08rem;
}
/* Optional résumé upload on the registration form. A label styled as a button
   wraps a hidden file <input>; the chosen filename is echoed beside it. */
.resume-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.2rem 0 0.6rem;
}
.resume-upload-btn {
  display: inline-flex;
  align-items: center;
  background-color: rgba(20,20,20,1);
  border: 1px solid rgba(80,80,80,1);
  border-radius: 4px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
}
.resume-upload-label {
  font-size: 0.9rem;
  color: var(--brand);
}
.resume-filename {
  font-size: 0.8rem;
  color: rgba(160,160,160,1);
  word-break: break-all;
}
.resume-note {
  padding-bottom: 0 !important;
}
/* Résumé as the registration hero: the drop CTA leads the modal. */
.resume-hero {
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.75rem;
  margin: 0 0 0.9rem;
  border: 0.0625rem dashed var(--brand-fill);
  border-radius: 0.375rem;
  background: rgba(255, 128, 0, 0.05);
}
.resume-hero-title {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.25;
  color: white;
  margin: 0;
}
.resume-hero .resume-upload-btn {
  justify-content: center;
  padding: 0.45rem 0.9rem;
}
/* "or just use your email" divider under the résumé hero. */
.resume-or {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(140, 140, 140, 1);
  text-align: center;
  margin: 0.35rem 0 0;
}
/* Reassurance microcopy under the email field. */
.auth-reassure {
  font-size: 0.72rem;
  line-height: 1.25;
  color: rgba(150, 150, 150, 1);
  text-align: center;
  padding-bottom: 0 !important;
  margin-top: 0.5rem;
}
.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.modal-close-label {
  font-size: 1rem;
}
/* ===== Floating-card modals (auth + profile editor) =====
   Compact cards that float in the top-right corner (and center on narrow
   screens). Styled after the rank cards in functions/cards.js: a dark radial
   fill, a colorful (brand) edge + glow, and relative rem typography. The
   overlay is click-through (pointer-events:none) so the card floats above the
   page without dimming or blocking it; only the card itself captures clicks. */
.floating-card-overlay {
  background: transparent;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.25rem;
  pointer-events: none;
  z-index: 100; /* float above the header it overlaps, below the toast */
  /* Override .profile-modal's width:100vw — 100vw includes the scrollbar, which
     pushes the right-aligned card (and its Close X) off-screen. left:0/right:0
     already span the viewport excluding the scrollbar. */
  width: auto;
  box-sizing: border-box;
}
.floating-card {
  pointer-events: auto;
  align-items: stretch;
  width: 19rem;
  max-width: calc(100vw - 2.5rem);
  padding: 1.5rem 1.5rem 1.25rem;
  color: rgba(200, 200, 200, 1);
  background: radial-gradient(ellipse at right top, rgba(12,12,12,1) 0%, rgba(0,0,0,1) 55%, rgba(12,12,12,1) 100%);
  border: 0.125rem solid var(--brand-fill);
  box-shadow: 0 0 1.75rem rgba(255, 128, 0, 0.25), 0 0.75rem 2rem rgba(0, 0, 0, 0.6);
}
/* Compact, card-scale typography inside the floating card. */
.floating-card .profile-edit-form-col {
  flex: 1 1 auto;
  width: 100%;
}
.floating-card .profile-highlight-eyebrow {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  padding-right: 1.75rem; /* clear the X */
}
.floating-card .profile-modal-subtitle,
.floating-card .profile-edit-form-col .profile-modal-subtitle {
  font-size: 0.8rem;
  text-align: left;
  max-width: none;
  padding-bottom: 0.9rem;
  line-height: 1.2;
}
/* X close button, pinned to the card's top-right corner. */
.auth-modal-close-x {
  display: block;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.45rem 0.55rem;
  color: rgba(160, 160, 160, 1);
  transition: color 0.2s;
}
.auth-modal-close-x:hover {
  color: var(--brand);
}
/* Phones: keep the cards in the top-right (no layout change), but let them grow
   to almost the full screen width so the content isn't cramped. */
@media (max-width: 600px) {
  .floating-card-overlay {
    padding: 0.6rem;
  }
  .floating-card,
  .profile-edit-floating {
    width: calc(100vw - 1.2rem);
    max-width: none;
  }
  /* Scale the editor's dark patch to match the now near-full-width card. */
  #profile-edit-modal::before {
    width: calc(100vw - 0.6rem);
  }
}
/* ----- Profile editor — bare floating profile card ----- */
/* No surrounding card chrome: just the profile card floating top-right, with
   content-width action buttons wrapping beneath it. The button area is the same
   width as the card, so button rows never grow wider than the card.
   (Looking for / Offering are hidden for now; Preferences is the toggleable
   left-side .profile-vectors-panel.) */
.profile-edit-floating {
  padding: 0;
  /* Lay the (optional) left Preferences panel and the editor column side by
     side, both anchored to the top-right of the overlay. With the panel hidden
     this collapses to just the 15rem editor column — unchanged from before. */
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  width: auto;
  pointer-events: auto; /* the overlay itself is click-through */
  gap: 0.75rem;
  background: none;
  border: 0;
  box-shadow: none;
}
/* The editor column itself (titlebar + card + action buttons) — the original
   vertical stack, now wrapped so the Preferences panel can sit to its left. */
.profile-edit-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 15rem; /* match the profile card width */
  flex: 0 0 auto;
  gap: 0.6rem;
}
/* Left-side Preferences panel: the owner's vector on/off switches. Floats to the
   left of the editor card; hidden (display:none) until the Preferences button is
   toggled on (session.js). Self-contained chrome (matches the auth card) and
   scrolls internally so the long list never runs off-screen. */
.profile-vectors-panel {
  display: none;
  width: 17rem;
  max-width: calc(100vw - 2.5rem);
  max-height: min(82vh, 40rem);
  overflow-y: auto;
  padding: 0.9rem 1rem 1.1rem;
  color: rgba(200, 200, 200, 1);
  background: radial-gradient(ellipse at right top, rgba(12,12,12,1) 0%, rgba(0,0,0,1) 55%, rgba(12,12,12,1) 100%);
  border: 0.125rem solid var(--brand-fill);
  box-shadow: 0 0 1.75rem rgba(255, 128, 0, 0.25), 0 0.75rem 2rem rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}
.profile-switches-title {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand);
  margin: 0 0 0.25rem;
}
.profile-switches-note {
  font-size: 0.75rem;
  line-height: 1.25;
  color: rgba(160, 160, 160, 1);
  margin: 0 0 0.6rem;
}
/* Section header within the switch list (Employment / Language / …). */
.vector-switch-group {
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(150, 150, 150, 1);
  margin: 0.7rem 0 0.2rem;
  padding-bottom: 0.15rem;
  border-bottom: 0.0625rem solid rgba(80, 80, 80, 0.5);
}
.vector-switch-group:first-child {
  margin-top: 0;
}
.vector-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.18rem 0;
  cursor: pointer;
}
.vector-switch-label {
  font-size: 0.82rem;
  line-height: 1.2;
}
/* iOS-style toggle: a hidden checkbox over a track; the knob is the track's
   ::after, slid right and recolored when :checked. */
.vector-switch {
  position: relative;
  flex: 0 0 auto;
  width: 2rem;
  height: 1.05rem;
}
.vector-switch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.vector-switch-track {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  background: rgba(80, 80, 80, 1);
  transition: background 0.15s;
}
.vector-switch-track::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  left: 0.12rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: rgba(220, 220, 220, 1);
  transition: transform 0.15s, background 0.15s;
}
.vector-switch-input:checked + .vector-switch-track {
  background: var(--brand-fill);
}
.vector-switch-input:checked + .vector-switch-track::after {
  transform: translateX(0.95rem);
  background: #fff;
}
.vector-switch-input:focus-visible + .vector-switch-track {
  outline: 0.125rem solid var(--brand);
  outline-offset: 0.125rem;
}
/* Dark vignette behind the editor: anchored at the top-right viewport corner
   (solid there) and fading out down/left into the page. No blur, no box — the
   radial fade does the blending, so there are no visible edges/corners. Scoped
   to the editor by id so the auth card keeps its own chrome. */
#profile-edit-modal::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 21rem;
  height: 25rem;
  background: rgba(0, 0, 0, 0.97);
  pointer-events: none;
  /* Feather only the inner edges (left + bottom): the patch stays solid into
     the top-right viewport corner and fades into the page away from the card.
     Two linear masks intersected = a soft rectangle, not a rounded ellipse. */
  -webkit-mask-image:
    linear-gradient(to left, #000 80%, transparent 100%),
    linear-gradient(to bottom, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, #000 80%, transparent 100%),
    linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-composite: intersect;
}
/* Title row above the card: "Your profile" (orange badge) on the left, the
   Close button on the right — sitting just above the card's top edge. */
.profile-edit-titlebar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.4rem;
}
/* Same badge look as .profile-action-btn, but orange and a bit larger so it
   reads as a title. */
.profile-edit-title {
  font-weight: bold;
  font-size: 1.45rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.05rem 0.7rem 0.25rem;
  rotate: -1.5deg;
  color: white;
  background-color: var(--brand-fill);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
}
.profile-edit-card-host,
.profile-edit-floating .profile-card-wrap {
  display: block;
  width: 100%;
  margin: 0;
}
/* Drop shadow so the chrome-less card reads as floating over the page. */
.profile-edit-floating .profile-card-wrap {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.55);
}
.profile-edit-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.4rem;
  width: 100%; /* == card width → rows wrap within the card's footprint */
}
/* Same look as the "Account needed" / "Logged in" header badges
   (.header-button-soon): dark-red fill, light text, bold, slight tilt — just
   scaled down to suit the floating card. */
.profile-action-btn {
  text-align: center;
  font-weight: bold;
  font-size: 0.85rem;
  padding: 0.05rem 0.6rem 0.25rem;
  rotate: -1.5deg;
  color: rgba(200, 200, 200, 1);
  background-color: rgba(150, 20, 20, 1);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s, color 0.2s;
}
.profile-action-btn:hover {
  background-color: rgba(185, 30, 30, 1);
  color: white;
}
.profile-action-btn--on {
  background-color: var(--brand-fill);
  color: black;
}
/* ===== Profile-highlight two-column layout (read-only highlight modal) ===== */
.profile-edit-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  /* Drop the form column onto its own line when the viewport can't fit it
     beside the (now three-wide) card column, instead of shrinking both. */
  flex-wrap: wrap;
}
.profile-edit-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* The card column carries the card + lists + sliders in a row. Let it take the
   available width up to that row's natural size (~47rem) so the three sit side
   by side on desktop; below that it shrinks and the row wraps (see the scoped
   .profile-highlight-card rule) rather than cramping each column. */
.profile-edit-card-col {
  flex: 1 1 47rem;
  max-width: 47rem;
  min-width: 0;
}
/* Inside the editor, the card/lists/sliders row wraps and stays centred when
   the column is too narrow for all three (the read-only highlight modal keeps
   its own no-wrap two-up layout). */
.profile-edit-card-col .profile-highlight-card {
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 1.25rem;
}
.profile-edit-form-col {
  flex: 0 1 24rem;
  min-width: 0;
  align-items: stretch;
}
/* Instruction line under the form column heading. Left-aligned (not the big
   centered subtitle the old box used) so it reads as a hint above the form. */
.profile-edit-form-col .profile-modal-subtitle {
  font-size: 1rem;
  text-align: left;
  max-width: none;
  padding-bottom: 1rem;
}
.profile-edit-form-col .profile-form-note {
  text-align: left;
  max-width: none;
  padding-bottom: 1rem;
}
.profile-edit-form {
  gap: 0.75rem;
}
/* Mobile: stack the columns — card on top, form below — like the highlight
   modal does. */
@media (max-width: 760px) {
  .profile-edit-layout {
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
  }
  .profile-edit-form-col {
    flex: 1 1 auto;
    width: 100%;
    max-width: 22rem;
  }
}
/* ===== Profile / company highlight modal (functions/profileHighlight.js) =====
   The whole modal scrolls like a page (the jobs list can be long), so it's
   top-aligned and scrollable rather than a fixed centered box. */
.profile-highlight-modal {
  align-items: flex-start;
  overflow-y: auto;
  /* Darker backdrop than the base modal so the page behind doesn't bleed
     through and hurt readability. */
  background-color: rgba(0, 0, 0, 0.88);
  /* Don't chain scroll to the page behind when the modal's scroll hits its end. */
  overscroll-behavior: contain;
  padding: 3rem 0;
}
/* Lock the background page while the highlight modal is open (set in
   functions/profileHighlight.js) so scrolling never leaks behind it. */
body.highlight-open {
  overflow: hidden;
}
.profile-highlight-content {
  width: 100%;
  max-width: 92rem;
  /* Less horizontal padding on desktop so the content spans more of the screen
     (the mobile breakpoint tightens it again). */
  padding: 2.5rem 1.5rem;
  align-items: stretch;
}
/* Two labelled columns: the company spotlight on the left, its job listings on
   the right (the jobs column is hidden for a plain user profile). */
.profile-highlight-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 2.5rem;
  width: 100%;
}
.profile-highlight-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Spotlight stays put (sticky) while the longer job list scrolls past it. */
.profile-highlight-company-col {
  flex: 0 0 auto;
  position: sticky;
  top: 1rem;
}
.profile-highlight-jobs-col {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 60rem;
  align-items: stretch;
}
/* Section heading above each column ("COMPANY" / "OPEN POSITIONS · N"). */
.profile-highlight-eyebrow {
  width: 100%;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.0625rem solid rgba(60, 60, 60, 1);
}
/* The spotlight card and its "looking for" / "offering" lists sit side by side
   (card on the left, lists on the right). */
.profile-highlight-card {
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
/* "Looking for" / "Offering" lists rendered beside the spotlighted profile card
   (functions/cards.js renderProfileLists). */
.profile-lists {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 0 0 auto;
  width: 14rem;
  padding-top: 0.5rem;
}
.profile-list-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.5rem;
}
.profile-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.profile-list-item {
  background-color: rgba(40, 40, 40, 1);
  border: 0.0625rem solid rgba(70, 70, 70, 1);
  border-radius: 0.4rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.85rem;
  color: rgba(220, 220, 220, 1);
}
.profile-list-empty {
  font-size: 0.85rem;
  color: rgba(140, 140, 140, 1);
  font-style: italic;
}
/* Editable rows (editor only): a single-line editable chip + a remove control,
   and the "+ Add" button beneath. */
.profile-list-item--edit {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}
.profile-list-text {
  flex: 1 1 auto;
  min-width: 0;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-list-item--edit:focus-within {
  border-color: var(--brand);
}
.profile-list-remove {
  flex: 0 0 auto;
  color: rgba(200, 120, 120, 1);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.2rem;
}
.profile-list-add {
  align-self: flex-start;
  margin-top: 0.5rem;
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 700;
}
/* Personalization sliders rendered beside the card in the profile editor
   (functions/cards.js renderProfileVectors) — one 0..1 slider per dimension,
   shown only to the signed-in owner. The global input[type="range"] rules are
   tuned for the salary dual-thumb overlay (absolute, pointer-events:none); these
   selectors are scoped under .profile-vectors to win on specificity and reset
   them for standalone sliders. */
.profile-vectors {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 0 0 auto;
  width: 14rem;
  padding-top: 0.5rem;
}
.profile-vector-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.profile-vector-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  color: rgba(210, 210, 210, 1);
}
.profile-vector-value {
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.profile-vectors input[type="range"] {
  position: static;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 0;
  height: 0.35rem;
  margin: 0;
  padding: 0;
  border-radius: 0.2rem;
  background: rgba(70, 70, 70, 1);
  cursor: pointer;
}
.profile-vectors input[type="range"]:hover {
  background: rgba(70, 70, 70, 1); /* cancel the global input:hover fill */
}
.profile-vectors input[type="range"]:disabled {
  cursor: default;
  opacity: 0.65;
}
.profile-vectors input[type="range"]::-webkit-slider-thumb {
  margin-bottom: 0;
  height: 0.85rem;
  width: 0.85rem;
}
.profile-vectors input[type="range"]::-moz-range-thumb {
  margin-bottom: 0;
  height: 0.85rem;
  width: 0.85rem;
}
/* Job listings: smaller than the company spotlight and packed in a responsive
   grid — ~3 per row on desktop, dropping to 2 then 1 as width shrinks. */
.profile-highlight-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  justify-items: stretch;
  gap: 0.6rem;
  width: 100%;
}
.profile-highlight-jobs .job {
  width: 100%;
  min-height: 11.25rem;
}
.profile-highlight-jobs-msg {
  grid-column: 1 / -1;
  color: rgba(160, 160, 160, 1);
  font-size: 1rem;
  text-align: center;
  padding: 2rem 0;
}
/* Mobile: stack the columns — company (the thing you tapped) on top, its job
   listings below — and drop the sticky/grid behaviours that need width. */
@media (max-width: 760px) {
  .profile-highlight-content {
    padding: 1.25rem;
    padding-top: 3.5rem;
  }
  .profile-highlight-layout {
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
  }
  .profile-highlight-company-col {
    position: static;
    width: 100%;
  }
  /* Stack the lists under the card when there isn't width for a side column. */
  .profile-highlight-card {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  .profile-lists {
    width: 15rem;
  }
  .profile-highlight-jobs-col {
    width: 100%;
    max-width: none;
  }
  .profile-highlight-jobs {
    grid-template-columns: 1fr;
  }
}
/* Match the other modal buttons (Log out, Save changes). Fixed to the viewport
   corner so it stays reachable while the modal scrolls. */
#close-profile-highlight {
  position: fixed;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 1;
  background-color: rgba(150, 20, 20, 1);
  color: rgba(200, 200, 200, 1);
  padding: 0.0rem 0.8rem 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
/* Demo job cards on the About page (runtime listing cards are not wrapped). */
.job-card-wrap .job {
  min-height: 10rem;
}

/* ===== About / landing page — extracted from inline styles ===== */
.about-parallax {
  position: relative;
  width: 100vw;
  overflow: hidden;
}
.about-hero {
  height: 100vh;
  max-height: 100vw;
  flex: 1;
  background-color: rgba(9,9,9,1);
  position: relative;
}
.about-hero-circuit {
  position: absolute;
  margin-top: 1.7rem;
}
.about-hero-logo {
  height: 15rem;
}
.about-section {
  padding-top: 6rem;
  position: relative;
  padding-right: 4rem;
  padding-left: 4rem;
  border-top: 0.35rem solid rgba(5,5,5,1);
}
.section-title {
  font-size: 4rem;
  font-weight: 700;
  text-align: center;
  padding-bottom: 20px;
}
.text-white {
  color: white;
}
.section-subtitle {
  font-size: 1.5rem;
  max-width: 480px;
  text-align: center;
  color: rgba(160,160,160,1);
  padding-bottom: 30px;
}
.about-features {
  padding-top: 3rem;
  padding-left: 3rem;
  padding-right: 3rem;
  position: relative;
}
.about-feature-row {
  max-width: 45rem;
}
.about-feature-row-spaced {
  max-width: 45rem;
  padding-top: 2rem;
}
.about-feature-icon {
  height: 5rem;
}
.about-feature-text {
  font-size: 1rem;
  color: white;
  text-align: center;
  width: 65%;
}
.about-categories {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 45rem;
  margin-top: 5.5rem;
  justify-content: center;
  position: relative;
}
.category-link {
  margin: 0.25rem;
  background-color: rgba(20,20,20,1);
}
.is-dimmed {
  opacity: 0.35;
}
.category-link-label {
  font-size: 1.8rem;
  color: var(--brand);
  padding-top: 0;
  padding-right: 1.2rem;
  padding-bottom: 0.5rem;
  padding-left: 1.2rem;
}
.about-soon-wrap {
  position: absolute;
  top: 5.3rem;
}
.launching-badge {
  rotate: -3.5deg;
  background-color: rgba(150,20,20,1);
  font-size: 1.45rem;
  color: rgba(200,200,200,1);
  padding-top: 0;
  padding-right: 1.2rem;
  padding-bottom: 0.5rem;
  padding-left: 1.2rem;
}
.about-join {
  margin-top: 7rem;
  padding-top: 2.6rem;
  position: relative;
  background-color: rgba(10,10,10,1);
  border-top: 0.35rem solid rgba(5,5,5,1);
}
.about-join-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 45rem;
  margin-bottom: 1.5rem;
  justify-content: center;
  position: relative;
}
.join-btn {
  margin: 0.25rem;
  background-color: rgba(20,20,20,1);
  cursor: pointer;
}
.join-btn-label {
  background-color: rgba(5,5,5,1);
  font-size: 1.8rem;
  color: var(--brand);
  padding-top: 0;
  padding-right: 1.2rem;
  padding-bottom: 0.5rem;
  padding-left: 1.2rem;
}
.justify-center {
  justify-content: center;
}
.slider-offset {
  margin-top: -0.3rem;
}
.about-info-row {
  margin-top: 0.3rem;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.about-info-label {
  font-size: 0.9rem;
  color: rgba(160,160,160,1);
}
.about-privacy-wrap {
  margin-bottom: 1rem;
}
.card-margin {
  margin: 0.5rem;
}
.job-card-wrap {
  width: 17rem;
  margin: 0.5rem;
}
.about-layer-jobs-1 {
  position: absolute;
  top: 6.6rem;
  left: -16.72rem;
}
.about-layer-jobs-2 {
  position: absolute;
  top: 28.09rem;
  left: 0.8rem;
}
.about-layer-prof-1 {
  position: absolute;
  top: -11.8rem;
  right: -12.3rem;
}
.about-layer-prof-2 {
  position: absolute;
  top: -11.8rem;
  right: 3.4rem;
}
.about-layer-prof-3 {
  position: absolute;
  top: -11.8rem;
  right: 19.2rem;
}

/* Visible keyboard focus for pressable controls (functions/a11y.js gives them
   role="button" + tabindex). Mouse clicks don't trigger :focus-visible, so this
   only shows for keyboard navigation. */
.pressable:focus-visible {
  outline: 2px solid var(--info-blue);
  outline-offset: 2px;
  border-radius: 0.4rem;
}

/* --- Global status toast (functions/toast.js) --- */
.toast {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 22rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.6rem;
  background: rgba(20, 20, 20, 0.92);
  color: rgba(250, 250, 250, 1);
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  line-height: 1.2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border-left: 4px solid #888;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast--visible {
  opacity: 1;
  transform: translateY(0);
}
.toast--loading { border-left-color: var(--info-blue); }
.toast--success { border-left-color: #1ec773; }
.toast--error { border-left-color: #ff4d4f; }
.toast-icon {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
}
.toast-spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--info-blue);
  animation: toast-spin 0.7s linear infinite;
}
@keyframes toast-spin {
  to { transform: rotate(360deg); }
}

/* 404 page (pages/shared.jsx NotFound → output/404.html) */
.notfound-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
}
.notfound-logo { width: 180px; max-width: 60vw; height: auto; }
.notfound-title { font-size: 28px; margin: 0; }
.notfound-text { opacity: 0.7; margin: 0; }
.notfound-home-link {
  margin-top: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--brand, #ff7a00);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}