/* Masar - visual identity. */

/* Web fonts, served from this site (2026-09-30): from Google Fonts they arrived late, and each one
   that landed laid the whole Arabic page out again. Arabic and Latin subsets as Google cuts them;
   Noto Kufi Arabic is one variable file for 700-900. font-display: optional - a font that is not in by
   first paint is not swapped in later (the swap moved every Arabic line: CLS 0.3 on phones); it is cached
   for the next page, and the two main files are preloaded so a normal connection has them in time. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: optional;
  src: url(fonts/ibm-plex-sans-arabic-arabic-400.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: optional;
  src: url(fonts/ibm-plex-sans-arabic-latin-400.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; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: optional;
  src: url(fonts/ibm-plex-sans-arabic-arabic-500.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: optional;
  src: url(fonts/ibm-plex-sans-arabic-latin-500.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; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: optional;
  src: url(fonts/ibm-plex-sans-arabic-arabic-600.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: optional;
  src: url(fonts/ibm-plex-sans-arabic-latin-600.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; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 700 900; font-display: optional;
  src: url(fonts/noto-kufi-arabic-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 700 900; font-display: optional;
  src: url(fonts/noto-kufi-arabic-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; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: optional;
  src: url(fonts/montserrat-latin-800.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; }

/* v5 (2026-09-30): the owner found v3 tiring - bright grey panels on a charcoal page and a burgundy
   that fought the greys. Now one navy-ink family for page, surfaces and panels (panels are a step of
   the same family, not bright islands), text off-white rather than pure white, and one calm sky-blue
   accent for actions and for what is exclusive or training. Panels read their colours from --p-*.
   Old token names kept: --mint = action colour, --sand = accent text, --wine = accent fill. */
:root {
  --bg: #0F1720;
  --bar: #0B1219;
  --surface: #16202B;
  --surface-2: #1C2835;
  --hairline: #283645;
  --text: #E3EAF2;
  --muted: #9BA9B8;
  --mint: #7CC0EE;
  --mint-text: #E3EAF2;
  --on-mint: #0B1219;
  --sand: #8CC8F0;
  --wine: #1E5F8E;
  --focus: #8CC8F0;
  --logo: #E3EAF2;
  --panel: linear-gradient(160deg, #1B2734 0%, #16202B 100%);
  --p-text: #E3EAF2; --p-muted: #A5B2C0; --p-line: #2F3E4E; --p-surface: #1F2B38;
  --p-btn: #7CC0EE; --p-on-btn: #0B1219; --p-accent: #8CC8F0; --p-paper: #111B25;
  /* chart steps, validated per surface with the dataviz validator */
  --req: #E3EAF2;
  --pref: #6E8196;

  --kufi: "Noto Kufi Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --plex: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #EEF2F6; --bar: #FFFFFF; --surface: #FFFFFF; --surface-2: #E6ECF2; --hairline: #D3DCE6;
    --text: #0E1A26; --muted: #4B5B6C; --mint: #0B5C8E; --mint-text: #0B5C8E;
    --on-mint: #FFFFFF; --sand: #0B5C8E; --wine: #0B5C8E; --focus: #0B5C8E; --logo: #1B2733;
    --panel: linear-gradient(160deg, #FFFFFF 0%, #F6F9FC 100%);
    --p-text: #0E1A26; --p-muted: #4B5B6C; --p-line: #D3DCE6; --p-surface: #EDF2F7;
    --p-btn: #0B5C8E; --p-on-btn: #FFFFFF; --p-accent: #0B5C8E; --p-paper: #FFFFFF;
    --req: #0E1A26; --pref: #8A9AAB;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #EEF2F6; --bar: #FFFFFF; --surface: #FFFFFF; --surface-2: #E6ECF2; --hairline: #D3DCE6;
  --text: #0E1A26; --muted: #4B5B6C; --mint: #0B5C8E; --mint-text: #0B5C8E;
  --on-mint: #FFFFFF; --sand: #0B5C8E; --wine: #0B5C8E; --focus: #0B5C8E; --logo: #1B2733;
  --panel: linear-gradient(160deg, #FFFFFF 0%, #F6F9FC 100%);
  --p-text: #0E1A26; --p-muted: #4B5B6C; --p-line: #D3DCE6; --p-surface: #EDF2F7;
  --p-btn: #0B5C8E; --p-on-btn: #FFFFFF; --p-accent: #0B5C8E; --p-paper: #FFFFFF;
  --req: #0E1A26; --pref: #8A9AAB;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--plex);
  font-size: 17px;
  line-height: 1.75;
}
a { color: var(--mint-text); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 20px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 16px; margin-inline: -20px; padding-inline: 20px;
  background: var(--bar);
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--kufi); font-weight: 800; font-size: 1.75rem; letter-spacing: 0;
  color: var(--logo); text-decoration: none; line-height: 1;
}
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a {
  position: relative; color: var(--muted); text-decoration: none; font-size: 0.95rem;
  padding: 8px 12px; border-radius: 10px; transition: color .15s;
}
.nav a:hover { color: var(--text); }
.tools { display: flex; gap: 8px; }
.tool {
  font: inherit; font-size: 0.9rem; color: var(--text);
  background: transparent; border: 1px solid var(--hairline);
  border-radius: 999px; padding: 7px 12px; cursor: pointer; min-width: 44px; min-height: 40px;
}
.tool:hover { border-color: var(--mint); }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px;
  align-items: center; padding-block: 48px 88px;
}
.hero h1 {
  font-family: var(--kufi); font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.45;
  margin: 0 0 20px; max-width: 18ch;
}
.lede { color: var(--muted); font-size: 1.1rem; max-width: 52ch; margin: 0 0 32px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; text-decoration: none;
  padding: 12px 24px; border-radius: 999px; min-height: 48px;
  transition: transform .15s, box-shadow .15s, border-color .15s, filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--mint); color: var(--on-mint); }
.btn-primary:hover { filter: brightness(.92); }
.btn-quiet { color: var(--text); border: 1px solid var(--hairline); background: transparent; }
.btn-quiet:hover { border-color: var(--mint); }
.meta { color: var(--muted); font-size: 0.95rem; margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- the route ---------- */
.line-panel {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 20px; padding: 28px 28px 20px;
}
.line-sign { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.line-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mint); color: var(--on-mint);
  font-family: var(--kufi); font-weight: 700; font-size: 0.95rem;
  padding: 4px 14px 6px; border-radius: 999px;
}
.line-caption { color: var(--muted); font-size: 0.88rem; margin: 0 0 14px; }

.route { list-style: none; margin: 0; padding: 0; position: relative; }
.route::before {
  content: ""; position: absolute; inset-block: 22px; inset-inline-start: 11px;
  width: 6px; border-radius: 3px; background: var(--mint);
  transform-origin: top; animation: draw 0.9s cubic-bezier(.4, 0, .2, 1) both;
}
.stop {
  position: relative; display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; column-gap: 18px; padding-block: 12px;
  animation: arrive 0.45s ease-out both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.08s);
}
.stop .dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface); border: 5px solid var(--mint); z-index: 1;
}
.stop:first-child .dot { background: var(--mint); box-shadow: 0 0 0 5px var(--surface); }
.stop-name { font-family: var(--kufi); font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.stop-share { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 1rem; }
.stop:first-child .stop-share { color: var(--text); font-weight: 600; }
.route-note { color: var(--muted); font-size: 0.95rem; padding: 12px 0; }

@keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
.section { padding-block: 72px; border-top: 1px solid var(--hairline); }
.section h2 {
  font-family: var(--kufi); font-weight: 700; font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.5; margin: 0 0 8px;
}
.section-lede { color: var(--muted); margin: 0 0 32px; max-width: 64ch; }

/* co-op postings: rows, not cards */
.jobs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.job {
  display: grid; grid-template-columns: 1fr 13rem 6rem auto;
  gap: 16px; align-items: center;
  padding-block: 16px; border-bottom: 1px solid var(--hairline);
}
.job-title { font-weight: 600; display: block; line-height: 1.5; }
.job-company { color: var(--muted); font-size: 0.92rem; display: block; }
.job-where { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }

/* Postings arrive in German, English and Arabic. plaintext lets each string
   take its own direction, so "Data Analyst (Senior)" keeps its closing
   bracket at the end instead of flipping to the far side of an RTL line; the
   explicit alignment keeps the column straight on the Arabic page. */
.job-title, .job-company, .job-where, .stop-name { unicode-bidi: plaintext; }
[dir="rtl"] .job-title, [dir="rtl"] .job-company, [dir="rtl"] .job-where { text-align: right; }
.level {
  justify-self: start; font-size: 0.82rem; font-weight: 600;
  padding: 2px 12px 4px; border-radius: 999px; border: 1px solid currentColor;
}
.level-intern { color: var(--sand); }
.level-junior { color: var(--mint-text); }
.level-other { color: var(--muted); border-color: var(--hairline); }
.job a { font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.empty { color: var(--muted); padding-block: 24px; margin: 0; }

/* how it works: the same route, laid sideways - these steps are a real sequence */
.route-h { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; position: relative; }
.route-h::before {
  content: ""; position: absolute; top: 11px; inset-inline: 14px;
  height: 6px; border-radius: 3px; background: var(--hairline);
}
.step { position: relative; }
.step .dot {
  display: block; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg); border: 5px solid var(--mint); margin-bottom: 16px; position: relative;
}
.step h3 { font-family: var(--kufi); font-weight: 700; font-size: 1.15rem; margin: 0 0 6px; }
.step p { color: var(--muted); margin: 0; font-size: 0.97rem; }

.companies { color: var(--muted); max-width: 90ch; margin: 0; line-height: 2.1; }

.upcoming { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.upcoming li {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 24px;
  padding-block: 20px; border-bottom: 1px solid var(--hairline);
}
.upcoming li:first-child { border-top: 1px solid var(--hairline); }
.upcoming h3 { font-family: var(--kufi); font-weight: 700; font-size: 1.1rem; margin: 0; }
.upcoming p { color: var(--muted); margin: 0; grid-column: 1; }
.status { color: var(--sand); font-size: 0.9rem; grid-column: 2; grid-row: 1; }

footer {
  border-top: 1px solid var(--hairline); color: var(--muted);
  font-size: 0.9rem; padding-block: 32px 48px; line-height: 2;
}
footer a { color: var(--text); }

/* ---------- small screens ---------- */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 24px 64px; }
  .job { grid-template-columns: 1fr auto; row-gap: 4px; }
  .job-where { grid-column: 1; grid-row: 2; }
  .level { grid-column: 2; grid-row: 1; }
  .job a { grid-column: 2; grid-row: 2; justify-self: end; }
  .route-h { grid-template-columns: 1fr; gap: 8px; }
  .route-h::before { top: 14px; bottom: 14px; inset-inline: auto; inset-inline-start: 11px; width: 6px; height: auto; }
  li.step { display: grid; grid-template-columns: 28px 1fr; column-gap: 18px; padding-block: 8px; }
  li.step .dot { margin: 0; grid-row: span 2; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .topbar { flex-wrap: wrap; }
  .nav { order: 3; width: 100%; margin-inline: -12px; }
  .line-panel { padding: 22px 18px 14px; }
  .section { padding-block: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .route::before, .stop { animation: none; }
}

/* ================= market index ================= */

.nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--mint);
}

.page-head { padding-block: 32px 28px; }
.page-head h1 {
  font-family: var(--kufi); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  line-height: 1.45; margin: 0 0 10px;
}

/* filters: one row above the charts, wrapping on narrow screens */
.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px;
  padding: 20px; margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px;
}
.field { display: grid; gap: 6px; font-size: 0.88rem; color: var(--muted); }
.field-label { color: var(--muted); }
.filters select {
  font: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg);
  border: 1px solid var(--hairline); border-radius: 10px; padding: 8px 12px; min-height: 42px;
}
.segmented { display: inline-flex; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: block; padding: 9px 14px; font-size: 0.92rem; color: var(--muted);
  min-height: 42px; line-height: 1.6;
}
.segmented input:checked + span { background: var(--mint); color: var(--on-mint); font-weight: 600; }
.segmented input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.check { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 0.92rem; min-height: 42px; }
.check input { width: 18px; height: 18px; accent-color: var(--mint); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 0.88rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 4px 6px 4px 12px; cursor: pointer;
}
[dir="rtl"] .chip { padding: 4px 12px 4px 6px; }
.chip:hover { border-color: var(--mint); }
.chip .x { color: var(--muted); font-size: 0.8rem; padding-inline: 4px; }
.reset { font: inherit; font-size: 0.9rem; color: var(--mint-text); background: none; border: 0; padding: 10px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.match-meta { color: var(--muted); margin: 0 0 20px; font-variant-numeric: tabular-nums; }

/* charts */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 22px 22px 16px; }
.panel.wide { grid-column: 1 / -1; }
.panel h2 { font-family: var(--kufi); font-weight: 700; font-size: 1.1rem; margin: 0 0 4px; }
.panel-note { color: var(--muted); font-size: 0.85rem; margin: 0 0 14px; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); margin: 0 0 12px; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }

.bars { list-style: none; margin: 0; padding: 0; }
.bar-row {
  display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 3.2rem;
  align-items: center; gap: 12px; padding-block: 5px; border-radius: 6px; cursor: default;
}
.bar-row:hover, .bar-row:focus-visible { background: var(--surface-2); }
.bar-label { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
[dir="rtl"] .bar-label { text-align: right; }
.bar-track { display: flex; height: 12px; }
/* data end is rounded, the baseline end square; segments separated by a
   2px surface gap */
.seg { height: 100%; min-width: 2px; }
.seg + .seg { margin-inline-start: 2px; }
.seg:last-child { border-start-end-radius: 4px; border-end-end-radius: 4px; }
.seg.req { background: var(--req); }
.seg.pref {
  background: repeating-linear-gradient(135deg, var(--pref) 0 5px,
              color-mix(in srgb, var(--pref) 55%, var(--surface)) 5px 8px);
}
.bar-value { font-size: 0.88rem; color: var(--text); font-variant-numeric: tabular-nums; text-align: end; }
.no-data { color: var(--muted); font-size: 0.92rem; margin: 8px 0; }

.tip {
  position: fixed; z-index: 10; pointer-events: none; max-width: 280px;
  background: var(--text); color: var(--bg); font-size: 0.85rem; line-height: 1.6;
  padding: 8px 12px; border-radius: 8px; opacity: 0; transition: opacity .12s;
}
.tip.on { opacity: 1; }

/* postings list reuses .jobs/.job from the landing page */
.req-skills { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.82rem; color: var(--muted); margin-top: 4px; }
.more { margin-top: 18px; font: inherit; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 18px; cursor: pointer; }
.more:hover { border-color: var(--mint); }

@media (max-width: 880px) {
  .charts { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 7.5rem 1fr 2.8rem; }
}

/* ---------- CV builder ---------- */
.privacy { color: var(--muted); font-size: 0.92rem; margin: 0; max-width: 70ch; border-inline-start: 3px solid var(--mint); padding-inline-start: 12px; }
.step { padding-block: 28px; border-top: 1px solid var(--hairline); }
.step h2 { font-family: var(--kufi); font-weight: 700; font-size: 1.25rem; margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.step-n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--mint); color: var(--on-mint); font-size: 1rem;
}
.import { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 18px 20px; margin-bottom: 24px; display: grid; gap: 12px; }
.import .field-label { margin: 0; }
.import-row, .make-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.file { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px dashed var(--mint); border-radius: 12px; cursor: pointer; color: var(--text); }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
button.btn { border: 0; cursor: pointer; }
button.btn-quiet { background: none; border: 1px solid var(--hairline); }
button.btn:disabled { opacity: 0.55; cursor: progress; }
#profile fieldset { border: 0; padding: 0; margin: 0 0 22px; display: grid; gap: 14px; }
#profile legend { font-weight: 600; color: var(--text); padding: 0; margin-bottom: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px; }
.step input:not([type=radio]):not([type=file]), .step textarea, .step select {
  font: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg); width: 100%;
  border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 12px; min-height: 42px;
}
.step textarea { resize: vertical; line-height: 1.7; }
.step input:focus-visible, .step textarea:focus-visible, .step select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pick { display: grid; gap: 10px; margin-top: 16px; max-width: 760px; }
.pick select { padding: 6px; }
.pick optgroup { color: var(--muted); font-style: normal; }
.pick option { color: var(--text); padding: 6px 8px; border-radius: 6px; }
.job-needs { color: var(--muted); font-size: 0.92rem; margin: 0; unicode-bidi: plaintext; }
.step .status { grid-column: auto; grid-row: auto; font-size: 0.95rem; margin: 12px 0 0; min-height: 1.75em; color: var(--muted); }
.step .status.bad { color: var(--sand); }
.muted { color: var(--muted); }

#result { padding-block: 8px 40px; }
.coverage { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 18px 20px; margin-bottom: 14px; }
.coverage p { margin: 0 0 8px; }
.coverage-head { font-weight: 600; }
.meter { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; margin-bottom: 12px; }
.meter::before { content: ""; display: block; height: 100%; width: calc(var(--share) * 100%); background: var(--mint); border-radius: 5px; }
.removed { margin-bottom: 14px; color: var(--muted); font-size: 0.92rem; }
.removed summary { cursor: pointer; color: var(--text); }
.removed li { display: grid; margin-block: 6px; }
.removed-text { unicode-bidi: plaintext; text-decoration: line-through; }

/* the CV itself is a document, not part of the site: white paper, plain type,
   one column and standard headings, which is what ATS parsers read reliably */
.paper {
  background: #fff; color: #111; max-width: 820px; margin-top: 18px; padding: 44px 48px;
  border-radius: 4px; font-size: 14px; line-height: 1.5;
  font-family: Calibri, Carlito, Arial, Helvetica, sans-serif;
}
.paper:lang(ar) { font-family: "IBM Plex Sans Arabic", Arial, sans-serif; line-height: 1.7; }
/* "fi", "ff" drawn as one glyph reach a screening system as one odd character ("Certificates"), so the English CV keeps them apart */
.paper:lang(en) { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0; }
.paper h1 { font-size: 24px; margin: 0 0 4px; font-family: inherit; }
.paper h2 { font-size: 15px; margin: 18px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #999; font-family: inherit; }
.paper p { margin: 0 0 6px; }
.paper ul { margin: 2px 0 8px; padding-inline-start: 20px; }
.paper li { margin-bottom: 2px; }
.cv-contact { color: #333; unicode-bidi: plaintext; }
.cv-item { margin-bottom: 8px; }
.cv-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cv-row span { color: #333; }

@media (max-width: 560px) { .paper { padding: 24px 18px; } }

/* Print size, also applied on screen for a moment to measure it. --fit is set
   by cv.js (0.9 to 1.25) so the CV fills one A4 page: type grows with fit,
   spacing faster, so a short CV breathes instead of shouting. */
.paper.print-size {
  --f: var(--fit, 1);
  width: 210mm; max-width: none; box-sizing: border-box; margin: 0; border-radius: 0;
  padding: calc(10mm * var(--f)) 13mm;
  font-size: calc(9.5pt * var(--f)); line-height: calc(1.3 + (var(--f) - 1) * 0.4);
}
.paper.print-size h1 { font-size: calc(16pt * var(--f)); margin: 0 0 calc(2px * var(--f)); }
.paper.print-size h2 { font-size: calc(10.5pt * var(--f)); margin: calc(7px * var(--f) * var(--f)) 0 calc(3px * var(--f)); break-after: avoid; }
.paper.print-size p { margin: 0 0 calc(3px * var(--f)); }
.paper.print-size ul { margin: 1px 0 calc(4px * var(--f) * var(--f)); }
.paper.print-size li { margin-bottom: calc(1px * var(--f) * var(--f)); }
.paper.print-size .cv-item { margin-bottom: calc(4px * var(--f) * var(--f)); break-inside: avoid; }

@media print {
  /* no page margin: the browser has nowhere to print its URL, date and title;
     the paper's own padding is the margin */
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .wrap > :not(main), main > :not(#result), #result > :not(#cv-paper) { display: none !important; }
}


/* ---------- postings page ---------- */
.filters .grow { flex: 1 1 240px; }
.filters input[type=search] {
  font: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg); width: 100%;
  border: 1px solid var(--hairline); border-radius: 10px; padding: 8px 12px; min-height: 42px;
}
.posting-group { margin-bottom: 36px; }
.posting-group h2 {
  font-family: var(--kufi); font-weight: 700; font-size: 1.2rem; margin: 0 0 14px;
  display: flex; align-items: baseline; gap: 12px;
}
.group-count { font-family: var(--plex); font-weight: 400; font-size: 0.9rem; color: var(--muted); }
.postings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.posting {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
}
.posting:hover { border-color: var(--mint); }
.posting-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; }
.posting-top .level { margin: 0; }
.tag { color: var(--muted); border: 1px solid var(--hairline); border-radius: 999px; padding: 1px 10px; }
.posting-age { margin-inline-start: auto; color: var(--muted); }
.posting-title { font-size: 1.08rem; font-weight: 600; line-height: 1.5; margin: 0; unicode-bidi: plaintext; text-align: start; }
.posting-who { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.93rem; }
.posting-company { font-weight: 600; unicode-bidi: plaintext; }
.posting-where { color: var(--muted); }
.posting-skills { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.posting-label { color: var(--muted); font-size: 0.85rem; }
.skill { font-size: 0.82rem; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text); direction: ltr; }
.posting-pref { margin: 0; color: var(--muted); font-size: 0.85rem; unicode-bidi: plaintext; }
.posting-actions { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.btn-small { padding: 8px 14px; min-height: 40px; font-size: 0.9rem; border-radius: 10px; }
@media (max-width: 560px) { .postings { grid-template-columns: 1fr; } }
.all-jobs { margin: 18px 0 0; }

/* ---------- employers and admin ---------- */
.step fieldset { border: 0; padding: 0; margin: 0 0 22px; display: grid; gap: 14px; }
.step legend { font-weight: 600; color: var(--text); padding: 0; margin-bottom: 12px; }
/* no offset: in a right-to-left page "left: -9999px" widens the page by that much */
.trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.admin-desc { white-space: pre-wrap; font-size: 0.9rem; max-height: 14em; overflow: auto; margin: 0; color: var(--text); }
.badge-exclusive { background: var(--sand); color: var(--on-mint); border-radius: 999px; padding: 1px 10px; font-weight: 600; }
.posting.exclusive { border-color: var(--sand); }
.risk { align-self: flex-start; border-radius: 999px; padding: 1px 10px; font-size: 0.85rem; font-weight: 600; border: 1px solid; }
.risk-green { color: var(--mint-text); }
.risk-yellow { color: var(--sand); }
.risk-red { color: #E5484D; }

/* ---------- applying through Masar ---------- */
.manage-link { display: grid; gap: 8px; margin-top: 12px; padding: 14px; border: 1px solid var(--sand); border-radius: 12px; }
.manage-link a { overflow-wrap: anywhere; color: var(--mint-text); }
.manage-link .btn { justify-self: start; }
.apply { margin: 18px 0; padding: 16px; border: 1px solid var(--mint); border-radius: 12px; background: var(--surface); }
.apply h2 { margin: 0 0 6px; font-size: 18px; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; cursor: pointer; }
.consent input { margin-top: 5px; accent-color: var(--mint); }
.app-new { color: var(--text); }
.app-shortlisted, .app-done { color: var(--mint-text); border-color: var(--mint); }
.app-rejected { color: var(--muted); }

/* ---------- swipe to apply ---------- */
.swipe-page { max-width: 560px; margin-inline: auto; }
.swipe-setup { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); }
.swipe-setup .btn { justify-self: start; }
/* the route: a mint line with one station per application */
.route { position: relative; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; list-style: none;
  min-height: 28px; margin: 18px 0 10px; padding: 6px 4px; }
.route::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 3px; border-radius: 3px;
  background: var(--mint); opacity: .55; }
.route:empty::after { content: "مسارك يبدأ من أول إعلان تقدّم عليه"; position: relative; margin-inline: auto; padding: 0 10px;
  background: var(--bg); color: var(--muted); font-size: 13px; }
.station { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--mint); background: var(--bg); }
.station.arrived { animation: station-pop .35s ease-out; }
.station.sent { background: var(--mint); }
.station.failed { border-color: var(--sand); }
.station.held-back { border-style: dashed; border-color: var(--muted); }
.station.pending.arrived { animation: station-pop .35s ease-out, station-wait 1.2s ease-in-out .35s infinite; }
@keyframes station-pop { 0% { transform: scale(0); } 70% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes station-wait { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mint) 25%, transparent); } }
.deck { position: relative; height: 430px; margin-top: 8px; }
.swipe-card { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 20px;
  border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); overflow: hidden;
  transform: translateY(calc(var(--depth, 0) * 10px)) scale(calc(1 - var(--depth, 0) * 0.04));
  transition: transform .25s ease; touch-action: pan-y; user-select: none; }
.swipe-card.top { cursor: grab; box-shadow: 0 14px 30px rgb(0 0 0 / .25); }
.swipe-card.held { cursor: grabbing; transition: none; }
.swipe-title { margin: 4px 0 0; font-size: 22px; line-height: 1.4; }
.swipe-desc { color: var(--muted); margin: 0; flex: 1; overflow: hidden; }
.stamp { position: absolute; top: 22px; padding: 2px 14px; border: 3px solid; border-radius: 8px; font: 800 22px var(--kufi);
  pointer-events: none; }
.stamp-go { inset-inline-start: 18px; color: var(--mint-text); opacity: var(--go, 0); transform: rotate(-10deg); }
.stamp-skip { inset-inline-end: 18px; color: var(--muted); opacity: var(--skip, 0); transform: rotate(10deg); }
.swipe-empty-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 14px 0 0; }
.swipe-empty { display: grid; place-items: center; align-content: center; height: 100%; margin: 0; padding: 24px; text-align: center; color: var(--muted);
  border: 1px dashed var(--hairline); border-radius: 16px; }
.swipe-buttons { display: flex; justify-content: center; gap: 28px; margin: 22px 0; direction: ltr; } /* skip on the left, apply on the right, like the swipe */
.swipe-btn { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 2px solid; background: var(--surface);
  font-size: 26px; cursor: pointer; }
.swipe-btn span { font-size: 12px; margin-top: -8px; }
.swipe-btn.go { color: var(--mint-text); border-color: var(--mint); }
.swipe-btn.skip { color: var(--muted); border-color: var(--hairline); }
.swipe-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.swipe-log { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.swipe-log li { padding: 8px 12px; border-radius: 8px; background: var(--surface); }
.swipe-log li.bad { border-inline-start: 3px solid var(--sand); }
@media (max-width: 480px) { .deck { height: 400px; } .swipe-title { font-size: 19px; } }
.swipe-demo { margin: 12px 0 0; padding: 6px 12px; border: 1px dashed var(--sand); border-radius: 8px; color: var(--sand); font-size: 14px; }

/* ---------- postings: fit, save, share, links ---------- */
.check { display: flex; gap: 8px; align-items: center; align-self: end; padding-bottom: 8px; cursor: pointer; }
.check input { accent-color: var(--mint); }
.posting-title a { color: inherit; text-decoration: none; }
.posting-title a:hover, .posting-title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
a.skill { text-decoration: none; }
a.skill:hover { border-color: var(--mint); }
.skill.have { border-color: var(--mint); color: var(--mint-text); }
.tag-training { color: var(--sand); border-color: var(--sand); }
.posting-fit { margin: 2px 0 6px; font-size: 14px; color: var(--muted); }
.posting-fit.good { color: var(--mint-text); font-weight: 600; }
.icon-btn { background: none; border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 12px; color: var(--text);
  font: inherit; font-size: 14px; cursor: pointer; }
.icon-btn[aria-pressed="true"] { color: var(--sand); border-color: var(--sand); }
.icon-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- one posting ---------- */
.job-page { max-width: 760px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 24px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--mint-text); }
.crumb-sep { opacity: .6; }
/* the posting page's article is not a row of the co-op list above */
.job-page .job { display: block; }
.job-page .job a { white-space: normal; }
.job { margin-top: 14px; padding: 24px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); }
.job-title { font-family: var(--kufi); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.4; margin: 12px 0 4px; unicode-bidi: plaintext; text-align: start; }
.job-who { margin: 0 0 4px; font-size: 1.05rem; }
.job h2 { font-size: 1.05rem; margin: 22px 0 8px; }
.job .posting-actions { margin: 16px 0 4px; }
.job-desc { white-space: pre-line; line-height: 1.8; unicode-bidi: plaintext; text-align: start; }
.job-match { margin: 18px 0 6px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 14px; }
.job-match h2 { margin-top: 0; }
.job-match h3 { font-size: .95rem; margin: 12px 0 6px; }
.job-match .chips { list-style: none; margin: 0; padding: 0; }
.job-match .chip { cursor: default; }
.job-match-num { font-family: var(--kufi); font-weight: 800; font-size: 2.4rem; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.job-match-num .ats-level { font-family: var(--plex, inherit); }
.health { margin: 22px 0; padding: 18px; border: 1px solid var(--hairline); border-radius: 14px; }
.health h2 { margin-top: 0; }
.health h3 { font-size: .95rem; margin: 14px 0 6px; }
.health-fixes { margin: 0; padding-inline-start: 22px; line-height: 1.8; }
.health-fixes .ats-points { color: var(--mint-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.job-match-actions { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ats-level.lvl-good { background: var(--mint); border-color: var(--mint); color: var(--on-mint); }
.related { margin-top: 28px; }
.related h2 { font-size: 1.1rem; }

/* ---------- my applications: each one a short route ---------- */
.my-apps { list-style: none; padding: 0; display: grid; gap: 14px; }
.my-app { padding: 18px 20px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); }
.my-app .posting-title a { color: inherit; }
.app-route { list-style: none; padding: 0; margin: 14px 0 8px; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.app-route::before { content: ""; position: absolute; top: 7px; inset-inline: 16.6%; height: 3px; background: var(--hairline); border-radius: 3px; }
.app-route li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; font-size: 13px; }
.app-route .dot { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--hairline); background: var(--bg); }
.app-route li.done .dot { border-color: var(--mint); background: var(--mint); }
.app-route li.done .step-label { color: var(--mint-text); font-weight: 600; }
.app-note { margin: 6px 0 0; }
[hidden] { display: none !important; }

/* ---------- swipe on phones: one posting a screen, up for the next ---------- */
.feed-mode .page-head, .feed-mode #deck, .feed-mode #buttons { display: none; }
.feed-mode .route { position: fixed; top: 64px; inset-inline: 16px; z-index: 25; margin: 0; pointer-events: none; }
.feed-mode .route:empty::after { background: transparent; }
.feed-mode .topbar { position: fixed; inset-inline: 0; margin: 0; z-index: 30; background: linear-gradient(var(--bg), transparent); border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.feed-mode .topbar .nav { display: none; }
.feed-mode .swipe-demo { position: fixed; top: 96px; inset-inline: 16px; z-index: 25; margin: 0; text-align: center;
  background: var(--bg); font-size: 12px; padding: 4px 10px; }
.feed { position: fixed; inset: 0; z-index: 20; height: 100dvh; border-radius: 0 !important; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain;
  border-radius: 18px; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.reel { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 150px 20px 56px; padding-right: 88px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--bg) 70%); border-bottom: 1px solid var(--hairline); }
.reel.exclusive { background: linear-gradient(180deg, color-mix(in srgb, var(--wine) 40%, var(--bg)), var(--bg) 70%); }
.reel.training { box-shadow: inset 0 4px 0 var(--wine); }
.reel-body { display: grid; gap: 10px; }
.reel-title { font-family: var(--kufi); font-size: 1.6rem; line-height: 1.4; margin: 0; unicode-bidi: plaintext; text-align: start; }
.reel-who { margin: 0; font-size: 1.05rem; color: var(--muted); }
.reel-desc { margin: 0; color: var(--muted); line-height: 1.7; }
.reel-hint { margin: 6px 0 0; font-size: 13px; color: var(--mint-text); animation: hint 1.6s ease-in-out 3; }
@keyframes hint { 50% { transform: translateY(-6px); } }
/* the rail sits on the right edge, under the thumb */
.rail { position: absolute; right: 12px; bottom: 56px; display: grid; gap: 16px; direction: ltr; }
.rail-btn { display: grid; justify-items: center; gap: 2px; background: none; border: 0; padding: 0; color: var(--text);
  font: inherit; text-decoration: none; cursor: pointer; }
.rail-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 22px;
  background: color-mix(in srgb, var(--bg) 70%, transparent); border: 2px solid var(--hairline); }
.rail-label { font-size: 12px; }
.rail-btn.go .rail-icon { background: var(--mint); color: var(--on-mint); border-color: var(--mint); font-size: 26px; }
.rail-btn.on .rail-icon { color: var(--sand); border-color: var(--sand); }
.rail-btn:focus-visible .rail-icon { outline: 3px solid var(--focus); outline-offset: 2px; }
.reel-stamp { position: absolute; top: 34%; inset-inline: 0; margin: auto; width: max-content; padding: 4px 22px;
  border: 4px solid var(--mint); border-radius: 12px; color: var(--mint-text); font: 800 2rem var(--kufi);
  transform: rotate(-12deg) scale(0); opacity: 0; pointer-events: none; }
.reel.applied .reel-stamp { animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.reel.applied .rail-btn.go .rail-icon { background: var(--surface-2); color: var(--mint-text); }
@keyframes stamp { to { transform: rotate(-12deg) scale(1); opacity: 1; } }
.reel-end { justify-content: center; align-items: center; text-align: center; gap: 14px; padding-right: 20px; }
.undo-toast { position: fixed; bottom: 16px; inset-inline: 16px; z-index: 20; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--text); color: var(--bg);
  box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.undo-toast .btn { color: var(--bg); border-color: var(--bg); }
.feed-mode .swipe-log { position: fixed; top: 70px; inset-inline: 16px; z-index: 15; }
.feed-mode .swipe-log li { animation: fade-out 4s forwards; }
.feed-mode .swipe-log li:not(:first-child) { display: none; }
@keyframes fade-out { 80% { opacity: 1; } to { opacity: 0; visibility: hidden; } }
.setup-actions { display: flex; gap: 10px; }
.swipe-setup:not(.sheet) #later { display: none; }
.swipe-setup.sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 25; border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgb(0 0 0 / .4); max-height: 85dvh; overflow-y: auto; }
@media (prefers-reduced-motion: reduce) { .reel-hint, .reel.applied .reel-stamp, .feed-mode .swipe-log li { animation-duration: .01s; } }

/* ---------- identity v3: light panels on a charcoal page ---------- */
/* A panel re-declares the tokens, so everything inside it (chips, buttons,
   tags, links) turns dark-on-light without its own rules: black pill buttons,
   near-black type, burgundy for exclusive and training. */
.posting, .job, .my-app, .apply, .line-panel, .swipe-card, .manage-link {
  --text: var(--p-text); --muted: var(--p-muted); --hairline: var(--p-line); --surface: var(--p-surface); --surface-2: color-mix(in srgb, var(--p-text) 8%, transparent);
  --mint: var(--p-btn); --mint-text: var(--p-text); --on-mint: var(--p-on-btn); --sand: var(--p-accent); --focus: var(--p-accent);
  --req: var(--p-text); --pref: var(--p-muted);
  background: var(--panel); color: var(--text); border: 0; border-radius: 28px;
}
.posting { transition: transform .2s; }
.posting:hover { transform: translateY(-2px); }
.posting.exclusive { box-shadow: inset 0 0 0 2px var(--wine); }
.badge-exclusive { background: var(--wine); color: #FFFFFF; }
.posting-title, .job-title { color: var(--text); }
.skill { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); border: 1px solid transparent; }
.skill.have { background: var(--mint); color: var(--on-mint); border-color: var(--mint); }
.icon-btn { background: transparent; }
.filters select, .filters input, .step input:not([type=radio]):not([type=file]), .step textarea, .step select {
  border-radius: 12px; }
::selection { background: rgb(128 128 128 / .4); }

/* ---------- the logo: the owner's wordmark, white on dark, graphite on light ---------- */
.wordmark img { display: block; height: 40px; width: auto; }
.logo-on-light { display: none !important; }
:root[data-theme="light"] .logo-on-dark { display: none !important; }
:root[data-theme="light"] .logo-on-light { display: block !important; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-on-dark { display: none !important; }
  :root:not([data-theme="dark"]) .logo-on-light { display: block !important; }
}
@media (max-width: 720px) { .wordmark img { height: 32px; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- postings board: search on top, filters beside, results ---------- */
.board { display: grid; gap: 18px; }
.searchbar { display: flex; gap: 8px; align-items: stretch; padding: 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hairline); }
.searchbar input, .searchbar select { font: inherit; color: var(--text); background: transparent; border: 0; min-height: 44px; }
.searchbar input { width: 100%; padding-inline: 16px; }
.searchbar input:focus-visible, .searchbar select:focus-visible { outline: 2px solid var(--focus); border-radius: 999px; }
.search-q { flex: 1; display: flex; }
.search-where { display: flex; border-inline-start: 1px solid var(--hairline); padding-inline-start: 8px; }
.search-where select { padding-inline: 8px 12px; }
.searchbar option { color: #1C1C1C; }
.filters-toggle { display: none; min-height: 44px; padding: 8px 18px; }
.board-body { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }
.board-filters { position: sticky; top: 92px; display: grid; gap: 14px; padding: 18px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--hairline); }
.board-filters .field { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.board-filters select { font: inherit; font-size: 15px; color: var(--text); background: var(--bg); border: 1px solid var(--hairline);
  border-radius: 12px; min-height: 42px; padding-inline: 10px; }
.board-filters .check { align-self: start; padding: 0; }
.side-head { display: none; }
.board-list { min-width: 0; }
.board-list .posting-group h2 { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; cursor: pointer;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); color: var(--text); }
.chip:hover { border-color: var(--text); }
.chip-x { font-size: 16px; line-height: 1; opacity: .7; }
.chip-clear { font: inherit; font-size: 14px; background: none; border: 0; color: var(--muted); text-decoration: underline;
  text-underline-offset: 4px; cursor: pointer; padding: 6px 8px; }
.co-logo { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--mint); color: var(--on-mint); font: 700 14px var(--plex); margin-inline-end: 8px; vertical-align: middle; }
.posting-who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }

@media (max-width: 900px) {
  .board-body { grid-template-columns: 1fr; }
  .filters-toggle { display: inline-flex; }
  .searchbar { border-radius: 18px; flex-wrap: wrap; }
  .search-q { flex-basis: 100%; }
  .search-where { flex: 1; border: 0; padding: 0; }
  /* on phones the filters open as a sheet from the bottom */
  .board-filters { position: fixed; inset: auto 0 0 0; top: auto; z-index: 40; max-height: 85dvh; overflow-y: auto;
    border-radius: 22px 22px 0 0; transform: translateY(105%); box-shadow: 0 -16px 40px rgb(0 0 0 / .45);
    /* closed, it is out of the Tab order too (hidden once it has slid away) */
    visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .board-filters.open { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  .side-head { display: flex; justify-content: space-between; align-items: center; }
  body.sheet-open::after { content: ""; position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / .45); }
}
@media (prefers-reduced-motion: reduce) { .board-filters { transition: none; } }
.hero-search { margin: 0 0 18px; max-width: 560px; }
.hero-search .btn { min-height: 44px; padding: 8px 22px; }

/* the reel's top: the hiring company and the student's fit, so the screen is never half empty */
.reel { justify-content: space-between; }
.reel-head { display: flex; align-items: center; gap: 14px; }
.reel-logo { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 18px;
  background: var(--panel); color: var(--p-text); font: 800 30px var(--plex); }
.reel-org { display: grid; gap: 2px; min-width: 0; }
.reel-org strong { font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel-org span { color: var(--muted); font-size: 14px; }
.reel-fit { margin-inline-start: auto; display: grid; place-items: center; width: 70px; height: 70px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--text) calc(var(--share) * 1turn), var(--hairline) 0); position: relative; text-align: center; }
.reel-fit::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg); }
.reel-fit > * { position: relative; line-height: 1.1; }
.reel-fit strong { font-size: 18px; }
.reel-fit span { font-size: 9px; color: var(--muted); }
.reel-title { text-wrap: balance; hyphens: none; overflow-wrap: normal; word-break: keep-all; font-size: clamp(1.3rem, 6.4vw, 1.6rem); }

/* company logos sit on a light tile, whatever their own background */
.co-logo.has-img, .reel-logo.has-img { background: #FFFFFF; padding: 3px; overflow: hidden; }
.co-logo img, .reel-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.reel-logo.has-img { padding: 8px; }
.co-logo-lg { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; }
.job-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- phones: each posting a light banner, like the reference ---------- */
.reel {
  --text: var(--p-text); --muted: var(--p-muted); --hairline: var(--p-line); --surface-2: color-mix(in srgb, var(--p-text) 8%, transparent);
  --mint: var(--p-btn); --mint-text: var(--p-text); --on-mint: var(--p-on-btn); --sand: var(--p-accent);
  color: var(--text); background: var(--panel) padding-box;
  border: 8px solid var(--bg); border-radius: 38px;
}
.reel.exclusive { background: var(--panel) padding-box; box-shadow: inset 0 0 0 2px var(--wine); }
.reel.training { box-shadow: inset 0 5px 0 var(--wine); }
.reel.exclusive.training { box-shadow: inset 0 0 0 2px var(--wine), inset 0 5px 0 var(--wine); }
.reel-word { margin: 0; text-align: center; direction: ltr; font: 800 clamp(1.9rem, 10vw, 2.8rem)/1.05 var(--plex);
  color: var(--p-muted); letter-spacing: .01em; }
.reel-word::after { content: ""; display: block; width: 62%; height: 12px; margin: 14px auto 0;
  border-top: 3px solid var(--p-text); border-bottom: 3px solid var(--p-text); border-radius: 3px; }
.reel-logo, .reel-logo.has-img { background: #FFFFFF; box-shadow: 0 6px 18px rgb(0 0 0 / .12); }
.reel-fit::before { background: color-mix(in srgb, var(--p-text) 12%, transparent); }
.reel .rail-icon { background: color-mix(in srgb, var(--p-surface) 70%, transparent); border-color: var(--p-line); color: var(--p-text); }
.reel .rail-btn { color: var(--p-text); }
.reel .rail-btn.go .rail-icon { background: var(--p-btn); color: var(--p-on-btn); border-color: var(--p-btn); }
.reel .rail-btn.on .rail-icon { color: var(--wine); border-color: var(--wine); }
.reel .tag { border-color: var(--p-line); color: var(--p-muted); }
.reel-hint { color: var(--p-text); }
.reel-end { color: var(--text); }

/* the header stack on phones is a solid bar, like the reference; the banners start below it */
.feed-mode .topbar { background: var(--bar); height: 64px; padding-block: 0; }
.feed-mode .route { top: 64px; inset-inline: 0; height: 34px; margin: 0; padding: 4px 16px; background: var(--bar); }
.feed-mode .swipe-demo { top: 98px; inset-inline: 0; border-radius: 0; border-width: 1px 0; background: var(--bar); }
.feed-mode .feed { top: 98px; height: calc(100dvh - 98px); }
.feed-mode.demo .feed { top: 128px; height: calc(100dvh - 128px); }
.feed-mode .reel { padding-top: 26px; }

.badge-verified { border-radius: 999px; padding: 1px 10px; font-size: .85em; font-weight: 600; background: var(--p-btn); color: var(--p-on-btn); }
/* employers: facts, then the three steps */
.pitch { display: grid; gap: 22px; margin-bottom: 32px; }
.pitch-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fact { display: grid; gap: 4px; padding: 18px 20px; border-radius: 24px; background: var(--panel); color: var(--p-text); }
.fact strong { font: 800 1.7rem/1.2 var(--plex); direction: ltr; text-align: start; unicode-bidi: plaintext; }
.fact span { font-size: 14px; color: var(--p-muted); }
.pitch-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pitch-steps li { counter-increment: step; display: grid; gap: 6px; align-content: start; padding: 18px 20px; border-radius: 24px;
  background: var(--surface); border: 1px solid var(--hairline); }
.pitch-steps li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--mint); color: var(--on-mint); font-weight: 700; }
.pitch-steps span { color: var(--muted); font-size: 15px; }
@media (max-width: 720px) { .pitch-facts, .pitch-steps { grid-template-columns: 1fr; } }
.install-bar { position: fixed; bottom: 16px; inset-inline-start: 16px; z-index: 50; display: flex; gap: 8px; align-items: center;
  padding: 8px; border-radius: 999px; background: var(--bar); border: 1px solid var(--hairline); box-shadow: 0 10px 30px rgb(0 0 0 / .4); }
.feed-mode .install-bar { display: none; }

.nudges { display: grid; gap: 8px; }
.nudges:empty { display: none; }
.nudge { margin: 0; padding: 10px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hairline); font-size: 15px; }
.job .nudge { background: color-mix(in srgb, var(--text) 6%, transparent); border-color: transparent; }
.badge-new { border-radius: 999px; padding: 1px 10px; font-size: .85em; font-weight: 600; background: var(--wine); color: #FFFFFF; }

/* the postings list with a posting open beside it (wide screens) */
.board-body.has-detail { grid-template-columns: 230px minmax(0, 1fr) minmax(380px, 38%); }
.board-body.has-detail .postings { grid-template-columns: 1fr; }
.board-detail { position: sticky; top: 92px; height: calc(100vh - 110px); display: grid; grid-template-rows: auto 1fr; gap: 8px; }
.board-detail iframe { width: 100%; height: 100%; border: 0; border-radius: 24px; background: var(--bg); }
.detail-close { justify-self: end; }
.posting.selected { box-shadow: 0 0 0 3px var(--text); }
html.embed .topbar, html.embed footer, html.embed .crumbs, html.embed .install-bar { display: none !important; }
html.embed body { background: var(--bg); }
html.embed .wrap { padding-inline: 0; }
html.embed .job { margin-top: 0; }
@media (max-width: 1099px) { .board-detail { display: none !important; } }
html.embed .job-title { font-size: 1.35rem; }

/* the co-op guide */
.guide section { margin-bottom: 34px; }
.guide-bars { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.guide-bars li { display: grid; grid-template-columns: 140px 1fr 48px; align-items: center; gap: 12px; }
.guide-bars a { color: var(--text); font-weight: 600; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.guide-bar { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--req), var(--req)) 0 0 / calc(var(--share) * 100%) 100% no-repeat, var(--surface-2); }
[dir="rtl"] .guide-bar { background-position: 100% 0; }
.guide-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.guide-places { display: grid; gap: 6px; }
.guide details { padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hairline); margin-bottom: 8px; }
.guide summary { cursor: pointer; font-weight: 600; }

/* interview prep and earlier CVs on the CV page */
.prep { margin: 18px 0; padding: 18px 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--hairline); }
.prep h2, .versions h2 { margin: 0 0 6px; font-size: 1.15rem; }
.prep-list { display: grid; gap: 14px; padding-inline-start: 22px; margin: 14px 0 0; }
.prep-list p { margin: 4px 0 0; }
.prep-tip { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.versions { margin: 18px 0; }
.version-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.version-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--hairline); }
.version-name { flex: 1; min-width: 200px; font-weight: 600; }
@media print { #prep, #versions { display: none !important; } }
.rank { margin: 6px 0 0; font-weight: 600; }
.tips { margin: 14px 0; padding: 16px 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--hairline); }
.tips h2 { margin: 0 0 6px; font-size: 1.1rem; }
.tips ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; }
.tips code { padding: 2px 8px; border-radius: 8px; background: var(--surface-2); font-family: var(--plex); }
@media print { #tips { display: none !important; } }

/* ================= identity v4: the stage =================
   After Handshake's home page, in Masar's own colours: a floating header, a
   headline that fills the screen, a search box that types its own examples,
   live postings sliding past, and tiles that show each tool working. */
:root { --blob-a: #2E4863; --blob-b: #1E5F8E; --blob-c: #8CC8F0; --blob-op: .3; }
:root[data-theme="light"] { --blob-a: #C4D3E2; --blob-b: #9CC7E6; --blob-c: #FFFFFF; --blob-op: .55; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --blob-a: #C4D3E2; --blob-b: #9CC7E6; --blob-c: #FFFFFF; --blob-op: .55; }
}
body { overflow-x: clip; }

/* the header floats as a pill over the page */
.topbar {
  top: 12px; margin: 12px 0 0; padding-block: 8px; padding-inline: 18px 10px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
  background: color-mix(in srgb, var(--bar) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 10px 30px rgb(0 0 0 / .22);
}
.feed-mode .topbar { top: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 560px) { .topbar { border-radius: 24px; } }

/* ---------- the stage ---------- */
.stage {
  position: relative; isolation: isolate; text-align: center;
  margin-inline: calc(50% - 50vw); margin-top: -76px;
  padding: calc(76px + clamp(56px, 11vh, 128px)) max(20px, calc(50vw - 560px)) 48px;
}
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: var(--blob-op);
  animation: drift 24s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 60vmax; height: 60vmax; top: -30vmax; inset-inline-start: 5%; background: var(--blob-a); }
.aurora i:nth-child(2) { width: 42vmax; height: 42vmax; bottom: -18vmax; inset-inline-end: -6%; background: var(--blob-b); animation-duration: 28s; }
.aurora i:nth-child(3) { width: 28vmax; height: 28vmax; top: 18%; inset-inline-end: 28%; background: var(--blob-c); opacity: calc(var(--blob-op) * .35); animation-duration: 32s; }
.aurora::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, var(--bg)); }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, 4vh) scale(1.08); }
  100% { transform: translate(-5vw, -3vh) scale(.95); }
}

.mega {
  font-family: var(--kufi); font-weight: 900; color: var(--logo);
  font-size: clamp(3.1rem, 10.5vw, 8.6rem); line-height: 1.18; letter-spacing: -.01em; margin: 0 0 22px;
}
.mega-line { display: block; overflow: hidden; padding-block: .06em; }
.mega .w { display: inline-block; animation: rise .95s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.1s + var(--i, 0) * .13s); }
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
.stage-lede { max-width: 58ch; margin: 0 auto 34px; color: var(--muted); font-size: 1.15rem; }

/* the search box: a light card, like a message you are about to send */
.ask {
  --text: var(--p-text); --muted: var(--p-muted); --hairline: var(--p-line); --focus: var(--p-accent);
  max-width: 760px; margin-inline: auto; text-align: start;
  background: var(--panel); color: var(--text); border-radius: 30px; padding: 14px 14px 12px;
  box-shadow: 0 30px 80px rgb(0 0 0 / .35); transition: box-shadow .2s;
  animation: arrive .7s .5s ease-out both;
}
.ask:focus-within { box-shadow: 0 0 0 3px var(--logo), 0 30px 80px rgb(0 0 0 / .4); }
.ask input { width: 100%; font: inherit; font-size: 1.3rem; color: var(--text); background: transparent;
  border: 0; outline: 0; padding: 10px 12px; min-height: 60px; }
.ask input::placeholder { color: var(--p-muted); }
.ask-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ask-where select { font: inherit; font-size: .95rem; color: var(--text); background: transparent;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 14px; min-height: 44px; cursor: pointer; }
.ask-where select:focus-visible { outline: 3px solid var(--focus); }
.ask-go { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--p-btn); color: var(--p-on-btn); cursor: pointer; transition: transform .15s; }
.ask-go:hover { transform: translateY(-2px); }
.ask-go:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ask option { color: #1C1C1C; }

.quick { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  padding: 0; margin: 26px auto 18px; max-width: 760px; }
.quick a { display: inline-block; padding: 8px 18px; border-radius: 999px; color: var(--text); text-decoration: none;
  font-size: .95rem; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--bg) 45%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .15s, background .15s; }
.quick a:hover { border-color: var(--text); background: var(--surface); }
.stage .meta { text-align: center; }

/* ---------- live postings: rows that slide past, paused under the pointer ---------- */
.rail-section { margin-inline: calc(50% - 50vw); padding-block: 24px 40px; }
.rail-head { max-width: 1120px; margin: 0 auto 14px; padding-inline: 20px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.rail-head h2 { font-family: var(--kufi); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0; }
.link-more { font-weight: 600; color: var(--text); }
.marquee { overflow: hidden; direction: ltr; padding-block: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.track { display: flex; gap: 16px; width: max-content; animation: slide calc(var(--n, 10) * 6s) linear infinite; }
.marquee.reverse .track { animation-direction: reverse; }
.marquee:hover .track, .marquee:focus-within .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(calc(-50% - 8px)); } }
.rail-card {
  --text: var(--p-text); --muted: var(--p-muted); --focus: var(--p-accent);
  direction: rtl; flex: none; width: 290px; display: grid; gap: 2px; align-content: start;
  padding: 18px 20px; border-radius: 24px; background: var(--panel); color: var(--text); text-decoration: none;
  transition: transform .2s;
}
.rail-card:hover { transform: translateY(-3px); }
.rail-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rail-tag { font-size: .8rem; font-weight: 600; padding: 2px 10px 3px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.rail-tag.wine { background: var(--wine); color: #FFFFFF; }
.rail-title { font-weight: 600; color: var(--text); line-height: 1.45; min-height: 2.9em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rail-co, .rail-where { font-size: .88rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-title, .rail-co, .rail-where { unicode-bidi: plaintext; text-align: right; }
html[dir="ltr"] .rail-card { direction: ltr; }
html[dir="ltr"] .rail-title, html[dir="ltr"] .rail-co, html[dir="ltr"] .rail-where { text-align: left; }

.logos-section { margin-inline: calc(50% - 50vw); padding-block: 8px 40px; text-align: center; }
.logos-title { font-family: var(--plex); font-size: .95rem; font-weight: 500; color: var(--muted); margin: 0 0 14px; }
.marquee.slow .track { gap: 36px; animation-duration: calc(var(--n, 10) * 4s); }
.logo-item { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* ---------- sections on the home page ---------- */
.home .section { border-top: 0; padding-block: 72px; }
.big-h { font-family: var(--kufi); font-weight: 800; font-size: clamp(1.9rem, 4.4vw, 3.3rem); line-height: 1.35; margin: 0 0 12px; max-width: 18ch; }

/* four tools, each showing itself at work */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.tile {
  --text: var(--p-text); --muted: var(--p-muted); --focus: var(--p-accent);
  grid-column: span 3; position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 360px; padding: 24px; border-radius: 32px; background: var(--panel); color: var(--text);
  text-decoration: none; transition: transform .25s;
}
.tile-cv, .tile-apps { grid-column: span 4; }
.tile-swipe, .tile-market { grid-column: span 2; }
.tile:hover { transform: translateY(-4px); }
.tile h3 { font-family: var(--kufi); font-weight: 800; font-size: 1.45rem; color: var(--text); margin: 20px 0 6px; line-height: 1.4; }
.tile p { color: var(--muted); margin: 0 0 18px; max-width: 46ch; }
.tile-go { margin-top: auto; align-self: flex-start; background: var(--p-btn); color: var(--p-on-btn);
  padding: 9px 20px; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.tile-swipe { background: linear-gradient(160deg, #2C7DB5, #123F63); color: #FFFFFF; }
.tile-swipe h3 { color: #FFFFFF; }
.tile-swipe p { color: rgb(255 255 255 / .82); }
.tile-swipe .tile-go { background: #FFFFFF; color: #0E1A26; }
.tile-demo { position: relative; height: 160px; border-radius: 22px; background: color-mix(in srgb, var(--text) 6%, transparent); overflow: hidden; display: grid; place-items: center; }

.mini-paper { width: min(62%, 300px); background: #FFFFFF; border-radius: 10px; padding: 14px; display: flex; flex-wrap: wrap;
  gap: 7px; align-content: flex-start; box-shadow: 0 10px 24px rgb(0 0 0 / .12); transform: translateY(18px); }
.mini-paper b { flex-basis: 45%; height: 10px; border-radius: 3px; background: #222; }
.mini-paper i { flex-basis: 100%; height: 6px; border-radius: 3px; background: #DADADA; }
.mini-paper i.s { flex-basis: 58%; }
.mini-paper em { font-style: normal; font-size: 11px; font-weight: 600; line-height: 1.6; padding: 0 9px; border-radius: 999px;
  direction: ltr; background: #EDEDED; color: #111; animation: mark 4.5s ease-in-out infinite; }
.mini-paper em + i + em { animation-delay: .6s; }
@keyframes mark { 0%, 30% { background: #EDEDED; color: #111; } 45%, 90% { background: var(--p-btn); color: var(--p-on-btn); } 100% { background: #EDEDED; color: #111; } }
.mini-meter { position: absolute; bottom: 14px; inset-inline-end: 14px; width: 140px; padding: 8px 12px 10px; border-radius: 14px;
  background: var(--p-btn); color: var(--p-on-btn); font-size: .78rem; text-align: start; }
.mini-meter div { height: 6px; border-radius: 3px; background: #444; margin-top: 6px; overflow: hidden; }
.mini-meter i { display: block; height: 100%; border-radius: 3px; background: #E0E0E0; animation: fillm 4.5s ease-in-out infinite; }
@keyframes fillm { 0%, 20% { width: 34%; } 55%, 92% { width: 88%; } 100% { width: 34%; } }

.demo-swipe { background: rgb(0 0 0 / .2); }
.mini-card { position: absolute; width: 56%; height: 112px; border-radius: 16px; background: #EDEDED; padding: 14px;
  display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start; box-shadow: 0 10px 20px rgb(0 0 0 / .25); }
.mini-card.c3 { transform: translateY(16px) scale(.88); opacity: .55; }
.mini-card.c2 { transform: translateY(8px) scale(.94); opacity: .8; }
.mini-card b { flex-basis: 50%; height: 9px; border-radius: 3px; background: #222; }
.mini-card i { flex-basis: 100%; height: 6px; border-radius: 3px; background: #C9C9C9; }
.mini-card i.s { flex-basis: 60%; }
.mini-card.c1 { animation: fling 3.8s cubic-bezier(.5, 0, .3, 1) infinite; }
.mini-stamp { position: absolute; top: 12px; inset-inline-end: 12px; font-size: .8rem; font-weight: 700; color: #111;
  border: 2px solid #111; border-radius: 8px; padding: 0 8px; transform: rotate(-8deg); opacity: 0; animation: stamp 3.8s infinite; }
@keyframes fling {
  0%, 30% { transform: none; opacity: 1; }
  55% { transform: translateX(80%) rotate(14deg); opacity: 0; }
  56%, 72% { transform: translateY(8px) scale(.94); opacity: 0; }
  86%, 100% { transform: none; opacity: 1; }
}
@keyframes stamp { 0%, 22% { opacity: 0; } 34%, 50% { opacity: 1; } 56%, 100% { opacity: 0; } }

.demo-market ol { list-style: none; margin: 0; padding: 0; width: 86%; display: grid; gap: 7px; }
.demo-market li { display: grid; grid-template-columns: 5.2rem 1fr 2.6rem; align-items: center; gap: 8px; font-size: .8rem; }
.demo-market span { direction: ltr; text-align: start; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .demo-market span { text-align: right; }
.demo-market i { display: block; height: 10px; border-radius: 0 5px 5px 0; background: var(--p-text);
  width: calc(var(--w, 0) * 100%); transform-origin: left; transition: transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.2s + var(--i, 0) * .09s); }
[dir="rtl"] .demo-market i { border-radius: 5px 0 0 5px; transform-origin: right; }
.demo-market b { font-weight: 600; font-variant-numeric: tabular-nums; }
html.motion .reveal:not(.in) .demo-market i { transform: scaleX(0); }

.demo-apps ol { list-style: none; margin: 0; padding: 0; width: 86%; display: flex; position: relative; }
.demo-apps ol::before { content: ""; position: absolute; top: 12px; inset-inline: 16%; height: 5px; border-radius: 3px; background: #BDBDBD; }
.demo-apps li { flex: 1; position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font-size: .82rem; color: var(--muted); text-align: center; }
.demo-apps li::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: #EDEDED; border: 5px solid var(--p-text);
  animation: station 4.8s infinite; }
.demo-apps li:nth-child(2)::before { animation-delay: .9s; }
.demo-apps li:nth-child(3)::before { animation-delay: 1.8s; border-color: var(--wine); animation-name: station-w; }
@keyframes station { 0%, 8% { background: #EDEDED; } 18%, 82% { background: var(--p-text); } 100% { background: #EDEDED; } }
@keyframes station-w { 0%, 8% { background: #EDEDED; } 18%, 82% { background: var(--wine); } 100% { background: #EDEDED; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .actions { margin: 8px 0 0; }

.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-block: 16px 40px; }
.numbers > div { display: grid; gap: 2px; padding: 26px; border-radius: 28px; border: 1px solid var(--hairline); color: var(--muted); }
.num { font-family: var(--kufi); font-weight: 900; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.25; color: var(--logo); font-variant-numeric: tabular-nums; }

.hire { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-block: 24px 88px;
  padding: clamp(28px, 5vw, 52px); border-radius: 36px; color: #FFFFFF; background: linear-gradient(120deg, #1E5F8E, #0E2D47); }
.hire h2 { font-family: var(--kufi); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 8px; line-height: 1.4; }
.hire p { margin: 0; max-width: 56ch; color: rgb(255 255 255 / .84); }
.btn-light { background: #FFFFFF; color: #111111; flex: none; }
.btn-light:hover { filter: brightness(.92); }
.btn-light:focus-visible { outline-color: #FFFFFF; }

.site-foot { border-top: 1px solid var(--hairline); padding-block: 48px 40px; color: var(--muted); font-size: .92rem; line-height: 1.9; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 32px; margin-bottom: 28px; }
.foot-cols h2 { font-family: var(--kufi); font-weight: 700; font-size: 1rem; color: var(--text); margin: 0 0 8px; }
.foot-cols a { display: block; color: var(--muted); text-decoration: none; padding-block: 3px; }
.foot-cols a:hover { color: var(--text); }
.foot-src { margin: 0; }
.foot-src a { color: var(--text); }

/* sections rise into place the first time they are seen (core.js) */
html.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
html.motion .reveal.in { opacity: 1; transform: none; }

/* ---------- phones: the sections as a bar under the thumb ---------- */
.tabbar { display: none; }
@media (max-width: 720px) {
  .has-tabbar .topbar .nav { display: none; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 34;
    bottom: max(10px, env(safe-area-inset-bottom)); inset-inline: 10px; padding: 6px; border-radius: 26px;
    background: color-mix(in srgb, var(--bar) 88%, transparent); border: 1px solid var(--hairline);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgb(0 0 0 / .35);
  }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 54px; border-radius: 20px;
    color: var(--muted); text-decoration: none; font-size: .72rem; line-height: 1.3; }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a[aria-current="page"] { background: var(--mint); color: var(--on-mint); font-weight: 600; }
  html.has-tabbar body { padding-bottom: 96px; }
  html.has-tabbar .install-bar { bottom: 100px; }

  .stage { margin-top: -68px; padding-top: calc(68px + 48px); }
  .ask input { font-size: 1.1rem; }
  .bento { grid-template-columns: 1fr; }
  .tile, .tile-cv, .tile-apps, .tile-swipe, .tile-market { grid-column: auto; min-height: 0; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .numbers { grid-template-columns: 1fr 1fr; gap: 12px; }
  .numbers > div { padding: 18px; }
  .hire { flex-direction: column; align-items: flex-start; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .rail-card { width: 250px; }
  .home .section { padding-block: 56px; }
}
@media (min-width: 721px) and (max-width: 980px) {
  .tile-cv, .tile-apps, .tile-swipe, .tile-market { grid-column: span 3; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora i, .mega .w, .ask, .mini-paper em, .mini-meter i, .mini-card.c1, .mini-stamp, .demo-apps li::before { animation: none; }
  .mini-meter i { width: 88%; }
  .track { animation: none; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .track > [aria-hidden="true"] { display: none; }
}

/* the home page's skills line: the swipe page's .route (sideways) must not reach it */
.line-panel .route { display: block; min-height: 0; margin: 0; padding: 0; }
.line-panel .route::before { inset-inline: auto; inset-inline-start: 11px; inset-block: 22px; top: 22px; width: 6px; height: auto; opacity: 1; }
.big-h { max-width: 24ch; }

/* ---------- the name across the bottom of every page (core.js) ---------- */
.foot-brand { padding: 48px 0 24px; border-top: 1px solid var(--hairline); overflow: hidden; }
.foot-mark { container-type: inline-size; direction: ltr; text-align: center; overflow: hidden;
  font-family: "Montserrat", var(--plex); font-weight: 800; color: var(--logo); line-height: .78;
  padding: .04em 12px 0; user-select: none; }
.foot-mark span { display: inline-block; font-size: 25.5cqi; letter-spacing: -.01em; }
html.motion .foot-mark.reveal { opacity: 1; transform: none; }
html.motion .foot-mark span { transform: translateY(105%); transition: transform 1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .08s); }
html.motion .foot-mark.in span { transform: none; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; margin: 20px auto 0;
  max-width: 1120px; padding-inline: 20px; color: var(--muted); font-size: .88rem; }
.foot-legal a { color: var(--muted); text-decoration: none; }
.foot-legal a:hover { color: var(--text); }
.foot-legal span { margin-inline-end: auto; }
.home .site-foot { padding-bottom: 8px; }
/* "---- • RADAR • ----" under the name, as in the wordmark */
.foot-radar { display: flex; align-items: center; gap: 18px; direction: ltr; margin: 14px 12px 0; color: var(--logo);
  font-family: "Montserrat", var(--plex); font-weight: 800; font-size: clamp(.8rem, 1.6vw, 1.3rem); letter-spacing: .6em; }
.foot-radar::before, .foot-radar::after { content: ""; flex: 1; height: 2px; background: currentColor; }

/* ---------- accounts ---------- */
.account-btn { display: inline-grid; place-items: center; text-decoration: none; font-weight: 600; }
.account-btn.in { width: 40px; min-width: 40px; padding: 0; border-radius: 50%; background: var(--mint); color: var(--on-mint); border-color: var(--mint); }
.account { max-width: 680px; margin-inline: auto; padding-block: 48px 72px; }
.account-card { --text: var(--p-text); --muted: var(--p-muted); --hairline: var(--p-line); --surface: var(--p-surface); --mint: var(--p-btn); --mint-text: var(--p-text);
  --on-mint: var(--p-on-btn); --focus: var(--p-accent); background: var(--panel); color: var(--text); border-radius: 32px; padding: clamp(24px, 5vw, 44px); }
.account-card a { color: var(--text); }
.account-card h1 { font-family: var(--kufi); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.4; margin: 0 0 8px; }
.google-btn { min-height: 44px; margin: 8px 0 4px; }
.account-facts { list-style: none; padding: 0; margin: 22px 0 16px; display: grid; gap: 12px; }
.account-facts li { padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.account-who { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.account-who h1 { margin: 0; unicode-bidi: plaintext; }
.account-who p { margin: 0; direction: ltr; text-align: right; }
.account-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--p-btn); color: var(--p-on-btn); font-family: var(--kufi); font-weight: 800; font-size: 1.6rem; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sync-state { color: var(--muted); margin: 0 0 18px; }
.account-links, .account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.danger { margin-top: 18px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.danger summary { cursor: pointer; color: var(--wine); font-weight: 600; }
.danger p { color: var(--muted); }
.btn-danger { background: var(--wine); color: #FFFFFF; }
.account .status { min-height: 1.6em; color: var(--muted); margin: 8px 0 0; }
.account .status.bad { color: var(--wine); }
.synced-bar { position: fixed; z-index: 45; top: 84px; inset-inline: 16px; max-width: 520px; margin-inline: auto; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: 0 10px 30px rgb(0 0 0 / .3); }

/* account page v2: centred card over the same aurora as the home page. The
   Google button is an iframe with a light page inside; on our dark-scheme page
   Chrome paints it an opaque white box unless its colour scheme matches. */
.account { position: relative; isolation: isolate; max-width: 760px; padding-block: 56px 80px; }
.account .aurora { inset: -120px calc(50% - 50vw) 0; }
.account-card { box-shadow: 0 30px 80px rgb(0 0 0 / .35); }
#signed-out { text-align: center; }
#signed-out h1 { font-size: clamp(2rem, 5vw, 3rem); }
#signed-out .section-lede { margin-inline: auto; max-width: 48ch; }
.google-btn { color-scheme: light; display: flex; justify-content: center; margin: 24px 0 6px; min-height: 44px; }
.google-btn iframe { color-scheme: light; }
.account-facts { grid-template-columns: 1fr 1fr; text-align: start; margin-top: 28px; }
.account-facts li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 20px; }
.account-facts strong { font-family: var(--kufi); font-weight: 700; font-size: 1rem; }
.account-facts span { color: var(--muted); font-size: .92rem; line-height: 1.7; }
@media (max-width: 560px) { .account-facts { grid-template-columns: 1fr; } }

/* ---------- profile on the account page ---------- */
.me, .cv-state { margin: 22px 0; padding-top: 20px; border-top: 1px solid var(--hairline); }
.me h2, .cv-state h2 { font-family: var(--kufi); font-weight: 700; font-size: 1.2rem; margin: 0 0 4px; }
.me .grid { margin: 14px 0; }
/* the alerts form, company search and admin token had no field styles and showed the browser's grey boxes */
.me input, .me select, .me textarea, .alert-fields input, .alert-fields select, .companies-tools input, .companies-tools select, .field.grow input { font: inherit; font-size: .95rem; color: var(--text); background: color-mix(in srgb, var(--p-surface) 80%, transparent); width: 100%;
  border: 1px solid var(--hairline); border-radius: 12px; padding: 9px 12px; min-height: 44px; }
.me textarea { resize: vertical; }
.me .check { margin-top: 10px; }
.cv-state { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cv-state p { margin: 0; }
.small { font-size: .88rem; }

/* ---------- support: conversations like a chat ---------- */
.support { padding-bottom: 72px; }
.support-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
.chat-card { --text: var(--p-text); --muted: var(--p-muted); --hairline: var(--p-line); --surface: var(--p-surface); --mint: var(--p-btn); --mint-text: var(--p-text);
  --on-mint: var(--p-on-btn); --focus: var(--p-accent); background: var(--panel); color: var(--text); border-radius: 28px; padding: 22px; }
.chat-card a { color: var(--text); }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.chat-head h2 { font-family: var(--kufi); font-weight: 700; font-size: 1.2rem; margin: 0; }
.chat-card input, .chat-card select, .chat-card textarea { font: inherit; font-size: .95rem; color: var(--text); background: color-mix(in srgb, var(--p-surface) 80%, transparent);
  width: 100%; border: 1px solid var(--hairline); border-radius: 12px; padding: 9px 12px; min-height: 42px; }
.ticket-form { display: grid; gap: 12px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.chat-card .status { min-height: 1.5em; margin: 0; color: var(--wine); }
.tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticket-row { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: inherit; color: var(--text);
  text-align: start; background: color-mix(in srgb, var(--text) 6%, transparent); border: 0; border-radius: 16px; padding: 14px 16px; cursor: pointer; }
.ticket-row:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.support-admin .ticket-row { background: var(--surface); color: var(--text); }
.link-back { font: inherit; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.chat-topic { font-weight: 600; margin: 10px 0; }
.bubbles { list-style: none; margin: 0 0 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  max-height: 52vh; overflow-y: auto; background: color-mix(in srgb, var(--text) 5%, transparent); border-radius: 18px; }
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 18px; display: grid; gap: 2px; }
.bubble p { margin: 0; white-space: pre-wrap; unicode-bidi: plaintext; }
.bubble-who { font-size: .78rem; font-weight: 600; opacity: .75; }
.bubble time { font-size: .72rem; opacity: .6; }
.from-me { align-self: flex-start; background: var(--p-btn); color: var(--p-on-btn); border-start-start-radius: 6px; }
.from-team { align-self: flex-end; background: var(--p-paper); color: var(--p-text); border-start-end-radius: 6px; }
.bubble-note { align-self: center; font-size: .85rem; color: var(--muted); text-align: center; }
.chat-send { display: flex; gap: 10px; align-items: flex-end; }
.chat-send textarea { resize: none; }
.faq h2 { font-family: var(--kufi); font-weight: 700; font-size: 1.2rem; margin: 6px 0 12px; }
.faq details { border-bottom: 1px solid var(--hairline); padding: 12px 2px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { color: var(--muted); margin: 8px 0 0; }
.support-admin { margin-top: 48px; }
.support-admin .chat-card { margin-top: 14px; }
@media (max-width: 880px) { .support-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- long text pages (privacy, terms) ---------- */
.prose { max-width: 760px; padding-bottom: 72px; }
.prose h2 { font-family: var(--kufi); font-weight: 700; font-size: 1.25rem; margin: 32px 0 8px; }
.prose p, .prose li { color: var(--muted); }
.prose ul { padding-inline-start: 22px; }

/* ---------- admin: visitors ---------- */
.stats { margin-top: 14px; }
.stats-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.stats-lists h3 { font-family: var(--kufi); font-size: 1rem; margin: 0 0 6px; }
.stats-lists ol { margin: 0; padding-inline-start: 20px; color: var(--muted); }

/* the skills line's field switch (home page) */
.field-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.field-btn { font: inherit; font-size: .85rem; color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid transparent;
  border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.field-btn[aria-pressed="true"] { background: var(--p-btn); color: var(--p-on-btn); }
.field-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- v4 on every page: the page title sits on the same soft light ---------- */
.page-head { position: relative; isolation: isolate; padding-block: 56px 28px; }
.page-head::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -96px calc(50% - 50vw) -20px;
  background:
    radial-gradient(38vmax 26vmax at 85% 0%, color-mix(in srgb, var(--blob-a) 55%, transparent), transparent 70%),
    radial-gradient(30vmax 22vmax at 10% 40%, color-mix(in srgb, var(--blob-b) 32%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.page-head h1 { font-weight: 900; font-size: clamp(2.2rem, 5.2vw, 3.8rem); line-height: 1.3; letter-spacing: -.01em; color: var(--logo); }
.page-head .section-lede { font-size: 1.08rem; }
.support-admin .page-head, .support-admin .page-head::before { padding-block: 24px 8px; }
.support-admin .page-head::before { display: none; }
@media (max-width: 720px) { .page-head { padding-block: 40px 20px; } }

/* ---------- landing pages (docs/l/, written by radar/landing.py) ---------- */
.landing { padding-bottom: 72px; }
.landing .page-head .btn { margin-top: 8px; }
.land-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.land-row { --text: var(--p-text); --muted: var(--p-muted); display: grid; gap: 2px; padding: 16px 18px; border-radius: 22px;
  background: var(--panel); color: var(--text); text-decoration: none; transition: transform .2s; height: 100%; }
.land-row:hover { transform: translateY(-2px); }
.land-title { font-weight: 600; color: var(--text); unicode-bidi: plaintext; text-align: right; }
.land-co, .land-meta { font-size: .88rem; color: var(--muted); unicode-bidi: plaintext; text-align: right; }
.land-related { margin-top: 40px; }
.land-related h2 { font-family: var(--kufi); font-size: 1.2rem; margin: 0 0 12px; }
.land-related .chip { text-decoration: none; padding: 6px 14px; }

/* an employer that opens CVs quickly */
.badge-fast { font-size: .78rem; font-weight: 600; padding: 2px 10px 3px; border-radius: 999px; background: var(--p-btn); color: var(--p-on-btn); }

/* LinkedIn helper on the CV page */
.li-out h3 { font-family: var(--kufi); font-size: 1rem; margin: 18px 0 6px; }
.li-text { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; margin: 0 0 8px; unicode-bidi: plaintext; }
.li-out ul { margin: 0; padding-inline-start: 20px; color: var(--muted); }

/* the support assistant */
.ask-bot { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.ask-bot-row { display: flex; gap: 8px; }
.bot-answer { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--p-paper); color: var(--p-text); }
.bot-answer p { margin: 0 0 10px; white-space: pre-wrap; }

/* opt-in card and invitations (account page), candidate search (applicants page) */
.talent-box { margin: 22px 0; padding-top: 20px; border-top: 1px solid var(--hairline); }
.talent-box h2 { font-family: var(--kufi); font-weight: 700; font-size: 1.2rem; margin: 0 0 4px; }
.talent-box h3 { font-size: 1rem; margin: 14px 0 8px; }
.talent-box .ticket-row { text-decoration: none; }
.cands { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
#t-more { display: block; margin: 16px auto 0; min-height: 44px; padding-inline: 22px; }
#t-more[hidden] { display: none; }
.cand { --text: var(--p-text); --muted: var(--p-muted); display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: 22px; background: var(--panel); color: var(--text); }
.cand strong { font-family: var(--kufi); }
.cand p { margin: 0; color: var(--muted); font-size: .9rem; }
.cand .skills-line { direction: ltr; text-align: right; unicode-bidi: plaintext; }

/* room kept for what loads after the first paint, so nothing below it jumps */
#hero-meta { min-height: 1.75em; }
.rail-section .marquee { min-height: 150px; }

/* the ATS check (ats.html): two scores on a light panel, then what to fix, then the raw text */
.ats .step:first-of-type { border-top: 0; }
.ats-report { display: grid; gap: 18px; padding-block: 12px 28px; }
.ats-scores { --text: var(--p-text); --muted: var(--p-muted); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px;
  border-radius: 24px; overflow: hidden; background: var(--panel); color: var(--text); }
.ats-score { padding: 22px 26px; }
.ats-score + .ats-score { border-inline-start: 1px solid var(--p-line); }
.ats-num { font-family: var(--kufi); font-weight: 800; font-size: clamp(3rem, 9vw, 4.6rem); line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.ats-report[data-level="poor"] #total-score { color: var(--wine); }
.ats-total { grid-column: 1 / -1; border-bottom: 1px solid var(--p-line); }
.ats-total .ats-num { font-size: clamp(4rem, 13vw, 6.5rem); }
.ats-total .ats-label { font-size: 1.1rem; }
.ats-level { display: inline-block; margin-inline-start: 8px; padding: 2px 12px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  border: 1px solid var(--p-line); color: var(--p-text); vertical-align: middle; }
.ats-level:empty { display: none; }
.ats-report[data-level="good"] .ats-level { background: var(--p-btn); border-color: var(--p-btn); color: var(--p-on-btn); }
.ats-total + .ats-score { border-inline-start: 0; }
.ats-label { font-weight: 600; margin: 2px 0 0; }
.ats-sub { color: var(--muted); margin: 0; font-size: .92rem; min-height: 1.4em; }
.ats-block { border-top: 1px solid var(--hairline); padding-top: 18px; }
.ats-block h2, .ats-how h2 { font-family: var(--kufi); font-weight: 700; font-size: 1.2rem; margin: 0 0 12px; }
.ats-block h3 { font-size: .95rem; margin: 0 0 8px; color: var(--muted); font-weight: 600; }
.ats-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ats-checks .bad { padding: 12px 16px; border-radius: 14px; background: var(--surface); border-inline-start: 4px solid var(--wine); }
.ats-checks .bad p { margin: 0; }
.ats-checks .bad p + p { color: var(--muted); margin-top: 4px; }
.ats-check-title { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ats-points { color: var(--sand); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.ats-checks .ok-all { font-weight: 600; }
.ok-list { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: .92rem; }
.ok-list .ok::before { content: "✓"; margin-inline-end: 6px; color: var(--text); }
.ok-list .note { flex-basis: 100%; }
.ats-kw { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ats-kw .chips { list-style: none; margin: 0; padding: 0; }
.ats-kw .chip { cursor: default; }
.kw-no { border-style: dashed; color: var(--muted); }
.kw-pref { opacity: .75; }
.ats-fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 14px; }
.ats-fields dt { color: var(--muted); }
.ats-fields dd { margin: 0; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.ats-fields dd.missing { color: var(--sand); }
.ats-raw summary { cursor: pointer; font-weight: 600; }
.ats-raw pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; margin: 10px 0 0; padding: 18px 20px;
  border-radius: 14px; background: var(--p-paper); color: var(--p-text); font: .9rem/1.6 ui-monospace, Consolas, "Courier New", monospace; unicode-bidi: plaintext; }
.ats-next { margin: 0; }
.ats-how { border-top: 1px solid var(--hairline); padding-block: 24px; color: var(--muted); max-width: 78ch; }
.ats-how p { margin: 0 0 10px; }
@media (max-width: 560px) { .ats-kw { grid-template-columns: 1fr; } .ats-score + .ats-score { border-inline-start: 0; border-top: 1px solid var(--p-line); } }

/* the ATS line under a finished CV (cv.html) */
.ats-inline { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 14px 18px; margin-bottom: 14px; }
.ats-inline p { margin: 0 0 6px; }
.ats-inline ul { margin: 0; padding-inline-start: 20px; color: var(--muted); }

/* seven sections in the top menu: between the phone tab bar and a wide screen they keep one line */
@media (min-width: 721px) and (max-width: 1080px) {
  .nav { gap: 0; }
  .nav a { padding: 8px 7px; font-size: .88rem; white-space: nowrap; }
}

/* phones: every tap target at least 44px high (launch audit, WCAG 2.5.5) */
@media (max-width: 767px) {
  .tool, .topbar .wordmark, .chip, .chips a, .segmented span, .step select, .step input:not([type=radio]):not([type=checkbox]):not([type=file]),
  .filters select, .filters input, select, .btn-small { min-height: 44px; }
  .topbar .wordmark { display: inline-flex; align-items: center; }
  .segmented span { display: inline-flex; align-items: center; }
  footer a, .site-foot a { display: inline-block; padding-block: 10px; min-width: 44px; text-align: center; }
  .companies-tools input { min-height: 44px; }
}
/* touch screens: a skill chip keeps its small look but takes a 44px tap; the
   rows open up so no two tap areas overlap */
@media (pointer: coarse) {
  .posting-skills, .chips:has(> a.skill) { row-gap: 16px; }
  a.skill { position: relative; }
  a.skill::after { content: ""; position: absolute; inset: -8px -3px; }
}
/* a long search shown as a filter chip wraps instead of widening the page */
.chips .chip, .chip { max-width: 100%; overflow-wrap: anywhere; }
input[type=date]:focus-visible, input[type=date]:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.ask-bot-row input { flex: 1; min-width: 0; }
@media (max-width: 767px) {
  .foot-legal a, .link-more, .guide-bars a, .jobs .job a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-legal a { min-width: 44px; justify-content: center; }
  .field-btn, .icon-btn { min-height: 44px; }
}
@media (max-width: 767px) {
  .board-filters select, .board-filters input:not([type=checkbox]):not([type=radio]) { min-height: 44px; }
  details > summary { min-height: 44px; display: flex; align-items: center; }
}
/* a textarea's default columns must not hold the support column wider than a phone */
.chat-card { min-width: 0; }
.chat-card textarea, .chat-card input, .chat-card select { width: 100%; min-width: 0; box-sizing: border-box; }
.chat-card .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
/* room for what is drawn after the data and the fonts arrive, so the footer does not jump into view */
#groups:empty { min-height: 140vh; }
.charts:has(.bar-list:empty), .charts:has(ol:empty) { min-height: 140vh; }
.match-meta:empty, #match-meta:empty { min-height: 3.4em; }

/* phones on pages without the tab bar (swipe, admin, applicants): the sections stay one line
   that scrolls sideways under the logo, instead of three wrapped lines above the deck */
@media (max-width: 720px) {
  html:not(.has-tabbar) .topbar { flex-wrap: wrap; row-gap: 6px; }
  html:not(.has-tabbar) .topbar .nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: 0;
    scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  html:not(.has-tabbar) .topbar .nav::-webkit-scrollbar { display: none; }
  html:not(.has-tabbar) .topbar .nav a { white-space: nowrap; padding: 10px 10px; font-size: .9rem; }
}
.swipe-try { margin: 14px 0 0; }

/* companies */
.companies-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.companies-tools input { flex: 1 1 260px; }
.companies-tools select { width: auto; }
.co-grid { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.co-card { padding: 16px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.co-card p { margin: 0; }
.co-link { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-height: 44px; }
.co-link:hover .co-name, .co-link:focus-visible .co-name { text-decoration: underline; text-underline-offset: 4px; }
.co-name { unicode-bidi: plaintext; overflow-wrap: anywhere; }
.co-one { padding-block: 28px 40px; }
.co-title { display: flex; align-items: center; gap: 14px; font-family: var(--kufi); font-size: clamp(1.5rem, 4vw, 2.2rem); margin: 14px 0 6px; }
.co-follow { margin-top: 24px; }

/* interview question pages (docs/l/interview-*.html) */
.interview h2 { margin: 36px 0 14px; }
.iv-q { padding: 18px 20px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); margin-bottom: 12px; max-width: 78ch; }
.iv-q h3 { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.iv-skill { font-weight: 700; }
.iv-ask { font-weight: 600; font-size: 1.05rem; margin: 0 0 8px; }
.iv-q p { margin: 0 0 6px; line-height: 1.8; }
.iv-general { max-width: 78ch; padding-inline-start: 22px; }
.iv-general li { margin-bottom: 14px; }
.iv-general p { margin: 0 0 4px; line-height: 1.8; }

/* job alerts */
.chip-alert { border-color: var(--mint); color: var(--mint-text); font-weight: 600; }
.alert-new { padding: 18px 20px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); margin-bottom: 24px; }
.alert-new h2 { margin: 0 0 12px; font-size: 1.1rem; }
.alert-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.alert-list { display: grid; gap: 14px; margin-bottom: 40px; }
.alert-card { padding: 18px 20px; border: 1px solid var(--hairline); border-radius: 14px; }
.alert-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.alert-head h2 { margin: 0; font-size: 1.1rem; unicode-bidi: plaintext; }
.alert-card .postings { margin-top: 12px; }
.alert-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.app-boosted { color: var(--mint-text); font-weight: 600; }

/* skill tests */
.test-grid { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.test-card { padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.test-card h2 { margin: 0; font-size: 1.2rem; }
.test-card p { margin: 0; }
.test-ok { color: var(--mint-text); font-weight: 600; }
.test-run { margin-bottom: 48px; max-width: 760px; }
.test-questions { padding-inline-start: 22px; }
.test-q { margin-bottom: 18px; }
.test-q fieldset { border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; margin: 0; }
.test-q legend { font-weight: 600; padding-inline: 6px; }
.test-code { background: color-mix(in srgb, var(--text) 7%, transparent); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: .9rem; text-align: left; }
.test-opt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; min-height: 44px; cursor: pointer; }
.test-opt span { unicode-bidi: plaintext; white-space: pre-wrap; }
.test-q.is-right fieldset { border-color: var(--mint); }
.test-q.is-wrong fieldset { border-color: #D9534F; }
.verified-skill { display: inline-flex; gap: 4px; align-items: center; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--mint); color: var(--mint-text); font-size: .85rem; font-weight: 600; }

/* premium */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 24px; }
.plan { padding: 22px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); }
.plan-pro { border-color: var(--mint); }
.plan h2 { margin: 0; }
.plan-price { font-family: var(--kufi); font-weight: 800; font-size: 1.6rem; margin: 6px 0 10px; }
.plan-list { list-style: none; margin: 0 0 18px; padding: 0; }
.plan-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--hairline); }
.plan-list p { margin: 2px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.plan-list .btn { flex: none; }

/* ---------- header v6 (2026-10-01): a full-width blue bar, the second colour of the theme ----------
   The page stays navy ink; the bar is one solid brand blue in both themes, edge to edge,
   with white type. Content inside still lines up with the 1120px column. */
:root { --brand: #0B5C8E; --brand-deep: #094B74; --on-brand: #FFFFFF; --on-brand-muted: rgb(255 255 255 / .82); }
.topbar {
  position: sticky; top: 0; z-index: 40;
  margin: 0 -20px; padding-block: 10px; padding-inline: 20px;
  border: 0; border-radius: 0;
  background: var(--brand); color: var(--on-brand);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
/* the colour runs past the column to both edges of the screen (the menu below it is not clipped) */
html { overflow-x: clip; }
.topbar::before { content: ""; position: absolute; inset-block: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: inherit; z-index: -1;
  box-shadow: 0 2px 14px rgb(0 0 0 / .22); pointer-events: none; }
@media (max-width: 560px) { .topbar { border-radius: 0; } }
html .topbar .wordmark .logo-on-dark { display: block !important; }
html .topbar .wordmark .logo-on-light { display: none !important; }
.topbar .nav a { color: var(--on-brand-muted); font-weight: 500; }
.topbar .nav a:hover, .topbar .nav a:focus-visible { color: var(--on-brand); background: rgb(255 255 255 / .1); }
.topbar .nav a[aria-current="page"] { color: var(--on-brand); font-weight: 700; }
.topbar .nav a[aria-current="page"]::after { background: var(--on-brand); height: 3px; bottom: 0; }
.topbar .tool { color: var(--on-brand); border-color: rgb(255 255 255 / .45); background: transparent; }
.topbar .tool:hover { border-color: var(--on-brand); background: rgb(255 255 255 / .1); }
.topbar .account-btn { background: var(--on-brand); color: var(--brand); border-color: var(--on-brand); font-weight: 700; }
.topbar .account-btn.in { background: var(--on-brand); color: var(--brand); border-color: var(--on-brand); }
.topbar :focus-visible { outline: 3px solid var(--on-brand); outline-offset: 2px; }
.tools { align-items: center; }
.side-link { color: var(--on-brand); text-decoration: none; font-size: .9rem; font-weight: 600; white-space: nowrap; padding: 8px 6px; min-height: 40px; display: inline-flex; align-items: center; }
.side-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.side-tag { font-family: var(--plex); font-size: .78rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .55); color: var(--on-brand); margin-inline-start: 4px; }
.employer-side .topbar { background: var(--brand-deep); }
/* the account menu */
.account-menu { position: relative; }
.account-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); min-width: 230px; z-index: 50;
  background: var(--surface); color: var(--text); border: 1px solid var(--hairline); border-radius: 14px; padding: 8px;
  box-shadow: 0 16px 40px rgb(0 0 0 / .3); display: flex; flex-direction: column; }
.account-pop[hidden] { display: none; }
.account-pop a, .account-pop-out { color: var(--text); text-decoration: none; padding: 10px 12px; border-radius: 10px; min-height: 44px; display: flex; align-items: center;
  font: inherit; font-size: .95rem; background: none; border: 0; text-align: start; cursor: pointer; }
.account-pop a:hover, .account-pop a:focus-visible, .account-pop-out:hover { background: var(--surface-2); }
.account-pop a[aria-current="page"] { font-weight: 700; }
.account-pop-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 10px; margin: 0 0 6px; border-bottom: 1px solid var(--hairline); }
.account-pop-who span { color: var(--muted); font-size: .85rem; }
.account-pop-out { color: var(--muted); border-top: 1px solid var(--hairline); border-radius: 0 0 10px 10px; margin-top: 6px; }
/* the swipe feed on phones keeps its own fixed bar */
.feed-mode .topbar { margin: 0; padding-inline: 16px; }
.feed-mode .topbar::before { left: 0; right: 0; }
@media (min-width: 721px) and (max-width: 1180px) {
  .topbar .nav { gap: 0; }
  .topbar .nav a { padding: 8px 6px; font-size: .86rem; white-space: nowrap; }
  .side-link { font-size: .82rem; }
}
@media (max-width: 720px) { .side-link, .side-tag { display: none; } }

/* ---------- the employer side (employers.html, employer.html) ---------- */
.emp-hero { padding-block: 48px 28px; max-width: 880px; }
.emp-hero h1 { font-family: var(--kufi); font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.4; margin: 0 0 14px; }
.emp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 26px; }
.emp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-block: 12px 32px; }
.emp-features article { padding: 20px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); }
.emp-features article:first-child { border-color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); }
.emp-features h2 { font-size: 1.1rem; margin: 0 0 8px; }
.emp-features p { margin: 0; color: var(--muted); line-height: 1.8; font-size: .95rem; }
.emp-form-title { font-family: var(--kufi); font-size: 1.6rem; margin: 40px 0 10px; scroll-margin-top: 90px; }
#post { scroll-margin-top: 90px; }
.emp-account { margin-bottom: 14px; color: var(--muted); }
.autofill { padding: 18px 20px; border-radius: 16px; margin-bottom: 18px; border: 1px dashed var(--brand);
  background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.autofill h3 { margin: 0 0 6px; font-size: 1.1rem; }
.autofill textarea { width: 100%; font: inherit; font-size: .95rem; line-height: 1.7; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text); resize: vertical; }
.autofilled { border-color: var(--mint) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint) 35%, transparent); }
.employer-dash { padding-block: 28px 48px; }
.dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.dash-head h1 { font-family: var(--kufi); margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.dash-head p { margin: 4px 0 0; }
.dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.co-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--hairline); border-radius: 14px; margin-bottom: 24px; }
.co-profile .status { grid-column: 1 / -1; margin: 0; }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.dash-stats .fact { padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.dash-stats strong { font-family: var(--kufi); font-size: 1.8rem; }
.dash-stats span { color: var(--muted); font-size: .9rem; }
.dash-postings { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 10px; }
.dash-posting { padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); }
.dash-posting h3 { margin: 0 0 4px; unicode-bidi: plaintext; }
.dash-posting p { margin: 4px 0; }
.dash-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-live { border-color: var(--mint); color: var(--mint-text); }
.dash-row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px !important; }
.dash-talent { padding: 18px; border: 1px solid var(--hairline); border-radius: 16px; scroll-margin-top: 90px; }
.dash-talent h2 { margin-top: 0; }
.dash-talent-row { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-talent-row select { flex: 1 1 240px; min-height: 44px; }
.co-profile input, .dash-talent select { font: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg); width: 100%;
  border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 12px; min-height: 44px; }
.co-profile input:focus-visible, .dash-talent select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.af-jobs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.af-jobs p { flex: 1 0 100%; margin: 0 0 4px; }
.af-jobs .btn.on { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 18%, transparent); font-weight: 700; }

/* the CV page's two ways in */
.cv-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 8px 0 40px; }
.start-card { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px;
  padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer;
  transition: border-color .15s, transform .15s; }
.start-card:hover, .start-card:focus-visible { border-color: var(--brand); transform: translateY(-2px); }
.start-card svg { width: 64px; height: 64px; fill: none; stroke: var(--mint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.start-card strong { font-size: 1.25rem; }
.start-card span { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .start-card { transition: none; } }
.ats-how summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; }
.ats-how summary::-webkit-details-marker { display: none; }
.ats-how summary h2 { margin: 0; }
.ats-how summary h2::after { content: " ▾"; color: var(--muted); font-size: .9em; }
.ats-how[open] summary h2::after { content: " ▴"; }
a.start-card { text-decoration: none; }
#choose .cv-start { margin-bottom: 8px; }
.emp-gate { padding: 22px; border: 1px solid var(--brand); border-radius: 16px; background: color-mix(in srgb, var(--brand) 9%, var(--surface)); color: var(--text); }
.emp-gate p { margin: 0 0 14px; max-width: 70ch; line-height: 1.8; }

/* home: how many postings fit your CV */
.fit-drop { margin: 8px auto 40px; max-width: 880px; padding: 24px; border: 1px solid var(--hairline); border-radius: 20px; background: var(--surface);
  display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: center; }
.fit-ask h2 { margin: 0 0 4px; font-family: var(--kufi); font-size: 1.35rem; }
.fit-ask p { margin: 0; }
.fit-pick { cursor: pointer; }
.fit-out { grid-column: 1 / -1; }
.fit-out:empty { display: none; }
.fit-num { margin: 6px 0 10px; font-size: 1.1rem; }
.fit-num strong { font-family: var(--kufi); font-size: 2.6rem; color: var(--mint-text); vertical-align: middle; }
.fit-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.fit-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 12px; }
.fit-list a { font-weight: 600; unicode-bidi: plaintext; }
.fit-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
@media (max-width: 640px) { .fit-drop { grid-template-columns: 1fr; } }
/* the admin funnel: longer step names than the day labels */
#stats-funnel .bar-row { grid-template-columns: minmax(8rem, 13rem) 1fr 3rem; }
#stats-funnel .bar-label { white-space: normal; }