/* Remote Gig: styles taken from the "RemoteGig job board redesign" design.
   Desktop two-pane layout from 1100px; card list and full job page below. */

:root {
  --bg: #F0F6F4;
  --ink: #0E2521;
  --muted: #4D6A64;
  --muted-2: #3F5A54;
  --primary: #0F766E;
  --primary-h: #0B5F58;
  --card: #FFFFFF;
  --ring: #D5E3DF;
  --line: #D5E3DF;
  --line-2: #E3EEEA;
  --chip: #E3F0EC;
  --sel: #D9F0EA;
  --on-primary: #FFFFFF;
  --india-bg: #FFE8D1;
  --india-ink: #8A3C00; --in-big: #B54708;
  --band: #0F766E;
  --inv: #0B3B36;
  --hover: #E2EEEA;
  --edge-soft: #D0DFDB;
  --edge: #BFD3CE;
  --edge-strong: #8AA7A0;
  --edge-hover: #A9C2BC;
  --mono-bg: #E3EEEA;
  --ink-2: #2B4540;
  --prose: #1B332E;
  --info-bg: #D3EEE8;
  --info-bg-2: #E1F4F0;
  --info-ink: #075B52;
  --warn-bg: #FCEFD0;
  --warn-ink: #7A4A00;
  --ok-bg: #E3F3DC;
  --ok-ink: #2B6A12;
  --outline-hover: #D9F0EA;
  --disabled: #DCE8E4;
  --danger: #9B1C1C;
  --danger-edge: #C98585;
  --danger-bg: #FBEDED;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
  --script: 'Leckerli One', cursive;
  color-scheme: light;
}

/* Dark mode: the device setting, unless the visitor picked light; or their pick of dark (app.js, the theme button). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #071412; --ink: #E6F2EE; --muted: #8FA9A2; --muted-2: #A7C0B9; --primary: #4FD1BD; --primary-h: #86E3D4;
    --card: #0E1F1C; --ring: #1D3430; --line: #1D3430; --line-2: #162A26; --chip: #153029; --sel: #0F3A34;
    --on-primary: #04201C; --india-bg: #3A2010; --india-ink: #FFB27A; --in-big: #FF8A3D; --band: #0F766E; --inv: #12332E; --hover: #14292A; --edge-soft: #244039; --edge: #2F4E48; --edge-strong: #4F7A71; --edge-hover: #3A5A53;
    --mono-bg: #153029; --ink-2: #C5D8D2; --prose: #CFE0DA; --info-bg: #0F3A34; --info-bg-2: #0F3A34; --info-ink: #A8EFE3;
    --warn-bg: #33270B; --warn-ink: #EBC067; --ok-bg: #12301B; --ok-ink: #8BDB8A; --outline-hover: #0F3A34; --disabled: #153029;
    --danger: #F3A0A0; --danger-edge: #8C4848; --danger-bg: #3B1D1D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #071412; --ink: #E6F2EE; --muted: #8FA9A2; --muted-2: #A7C0B9; --primary: #4FD1BD; --primary-h: #86E3D4;
  --card: #0E1F1C; --ring: #1D3430; --line: #1D3430; --line-2: #162A26; --chip: #153029; --sel: #0F3A34;
  --on-primary: #04201C; --india-bg: #3A2010; --india-ink: #FFB27A; --in-big: #FF8A3D; --band: #0F766E; --inv: #12332E; --hover: #14292A; --edge-soft: #244039; --edge: #2F4E48; --edge-strong: #4F7A71; --edge-hover: #3A5A53;
  --mono-bg: #153029; --ink-2: #C5D8D2; --prose: #CFE0DA; --info-bg: #0F3A34; --info-bg-2: #0F3A34; --info-ink: #A8EFE3;
  --warn-bg: #33270B; --warn-ink: #EBC067; --ok-bg: #12301B; --ok-ink: #8BDB8A; --outline-hover: #0F3A34; --disabled: #153029;
  --danger: #F3A0A0; --danger-edge: #8C4848; --danger-bg: #3B1D1D;
  color-scheme: dark;
}
/* A company's coloured square keeps its hue in the dark, with the light and dark swapped. The swap is done by an overlay that
   filters only what sits behind it (the tile colour and the initials), so a logo layered above it is never inverted and no
   :has() support is needed. */
:root[data-theme="dark"] .mono[style]::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; -webkit-backdrop-filter: invert(1) hue-rotate(180deg); backdrop-filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mono[style]::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; -webkit-backdrop-filter: invert(1) hue-rotate(180deg); backdrop-filter: invert(1) hue-rotate(180deg); } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--body); }
a { color: var(--primary); }
a:hover { color: var(--primary-h); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .wrap { padding: 0 40px; } }
@media (min-width: 1100px) { .wrap { padding: 0 80px; } }

/* Header: logo, the main links, and the light or dark switch with one dark pill (the artifact's header) */
.site-header .wrap { min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand img { display: block; width: 32px; height: 32px; border-radius: 50%; }
.brand span { font-family: var(--script); font-size: 22px; line-height: 1; }
.site-nav { order: 3; display: flex; align-items: center; gap: 4px; width: 100%; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.nl { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 500 15px var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.nl:hover { background: var(--hover); color: var(--ink); }
.nl.is-on, .nl[aria-current="page"] { background: var(--hover); }
.pill-dark { display: inline-block; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--inv); color: #F2F8F6; font: 600 15px/44px var(--body); text-decoration: none; white-space: nowrap; }
.pill-dark:hover { color: #F2F8F6; filter: brightness(1.15); }
/* On a phone the pill gives way to the bell and the nav drops Sources (it is in the footer), so the header stays two short rows. */
@media (max-width: 639px) {
  .pill-dark { padding: 0 14px; font-size: 14px; }
  .nl-sources { display: none; }
  .nl { padding: 0 12px; }
}
@media (min-width: 900px) {
  .site-header .wrap { flex-wrap: nowrap; min-height: 80px; }
  .site-nav { order: 0; width: auto; flex: 1; justify-content: center; padding-bottom: 0; overflow: visible; }
}
.icon-link { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--ink); }
.icon-link:hover { background: var(--hover); color: var(--ink); }
@media (min-width: 1100px) {
  .brand { gap: 12px; }
  .brand img { width: 40px; height: 40px; }
  .brand span { font-size: 27px; }
}

/* Filter bar */
.filters { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.chips { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 0 0 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--edge); font-size: 15px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--edge-strong); }
.chip:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.chip.is-on { background: var(--ink); color: var(--bg); box-shadow: none; }
.chip span { font-weight: 500; opacity: 0.85; }
.select-field { display: flex; align-items: center; gap: 10px; }
.select-field label { font-size: 14px; font-weight: 600; color: var(--muted-2); }
.select-wrap { position: relative; }
.select-wrap select {
  -webkit-appearance: none; appearance: none; height: 44px; padding: 0 40px 0 14px; border: 0; border-radius: 10px;
  background: var(--card); box-shadow: 0 0 0 1px var(--edge); font-size: 15px; cursor: pointer;
}
.select-wrap svg { position: absolute; right: 14px; top: 16px; pointer-events: none; }
@media (max-width: 639px) { .chips { flex-wrap: wrap; overflow: visible; } }
.count { margin: 20px 0 12px; scroll-margin-top: 12px; font-family: var(--display); font-weight: 600; font-size: 18px; }
@media (min-width: 1100px) { .count { margin: 28px 0 16px; font-size: 20px; } }

/* Filters drawer: a side sheet at every width, full screen on phones */
.chip-filters svg { flex: none; }
.chip-filters span:empty { display: none; }
@media (max-width: 1099px) { .chip-filters { order: -1; } }
body.drawer-open { overflow: hidden; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(14, 37, 33, 0.35); }
.drawer {
  position: fixed; z-index: 21; top: 0; bottom: 0; left: 0; width: 100%; background: var(--bg);
  display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(14, 37, 33, 0.12);
  transform: translateX(-100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform 0.2s ease; }
.drawer:focus { outline: none; }
@media (min-width: 640px) { .drawer { width: 380px; } }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer.is-open { transition: none; } }
.drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 20px; }
.drawer-head .icon-link { border: 0; background: none; cursor: pointer; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 8px; }
.facet-sort { justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.facet { margin: 0; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line-2); min-width: 0; }
.facet:last-child { border-bottom: 0; }
.facet legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-family: var(--display); font-weight: 600; font-size: 17px; }
.facet legend + * { clear: left; }
.facet-opt { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; cursor: pointer; }
.facet-opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.facet-name { min-width: 0; overflow-wrap: anywhere; }
.facet-count { margin-left: auto; font-size: 13px; color: var(--muted); }
.facet-opt.is-empty .facet-name { color: var(--muted); }
.drawer-foot { flex: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 20px 20px; border-top: 1px solid var(--line); background: var(--card); }
.drawer-foot .btn { flex: 1; height: 48px; padding: 0 16px; }
.reset-link {
  flex-basis: 100%; min-height: 32px; margin-top: -4px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 14px; color: var(--primary); text-decoration: underline; text-underline-offset: 2px;
}
.reset-link:hover { color: var(--primary-h); }
.reset-link.is-armed { color: var(--warn-ink); font-weight: 600; }
.reset-link:disabled { color: var(--muted); text-decoration: none; cursor: default; }

/* Browse layout */
.list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Job rows */
.row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "mono head" "tags tags" "side side";
  gap: 10px 12px; padding: 16px; border-radius: 14px; background: var(--card); color: var(--ink);
  text-decoration: none; box-shadow: inset 0 0 0 1px var(--ring);
}
.row:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge-hover); }
.row.no-tags { grid-template-areas: "mono head" "side side"; }
.mono {
  display: grid; place-items: center; font-family: var(--display); font-weight: 700;
  background: var(--mono-bg); color: var(--ink-2); position: relative; overflow: hidden; isolation: isolate;
}
/* A Logo.dev logo covers the initials on a white tile once it has loaded. Until then (and if it fails and removes itself) it is
   invisible, so the initials stay showing and there is never a blank white box. */
.mono .logo { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 14%; object-fit: contain; background: #fff; opacity: 0; }
.mono .logo.loaded { opacity: 1; }
.row .mono { grid-area: mono; width: 40px; height: 40px; border-radius: 10px; font-size: 15px; }
.row-head { grid-area: head; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.3; text-wrap: pretty; }
.row-meta { font-size: 14px; color: var(--muted); }
.row-tags { grid-area: tags; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 6px; }
.row-side { grid-area: side; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.row-side .posted { margin-left: auto; order: 2; font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (min-width: 1100px) {
  .row {
    grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "mono head side" "mono tags side";
    column-gap: 14px; row-gap: 8px; padding: 18px;
  }
  .row.no-tags { grid-template-areas: "mono head side"; }
  .row .mono { width: 44px; height: 44px; border-radius: 11px; font-size: 16px; }
  .row-side { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 8px; }
  .row-side .posted { order: -1; margin-left: 0; }
  .row-tags { margin-top: 0; }
}

.tag { font-size: 12.5px; font-weight: 500; line-height: 1.4; padding: 2px 8px; border-radius: 6px; background: var(--chip); color: var(--ink-2); }
.tag-more { padding: 2px 4px; background: none; color: var(--muted); align-self: center; }
.badge { font-size: 12.5px; font-weight: 600; line-height: 1.4; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.badge-full { background: var(--mono-bg); color: var(--ink-2); }
.badge-contract { background: var(--info-bg-2); color: var(--info-ink); }
.badge-feat { background: var(--warn-bg); color: var(--warn-ink); }
.badge-new { background: var(--ok-bg); color: var(--ok-ink); }

/* Saved and viewed: a heart and an eye on each row (beside the row, not inside its link), chips on a job's page */
.row-item { position: relative; }
.row-item .row-head { padding-right: 72px; }
.row-acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; }
.row-item.has-tailor .row { padding-bottom: 58px; }
.row-tailor { position: absolute; right: 22px; bottom: 6px; min-height: 44px; display: flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.row-tailor:hover { color: var(--primary); }
.mark-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer;
}
.mark-btn:hover { background: var(--hover); color: var(--ink); }
.mark-btn.is-on { color: var(--primary); }
@media (max-width: 1099px) {
  .row-item .row-head { padding-right: 92px; }
  .row-acts { top: 4px; right: 4px; gap: 0; }
  .mark-btn { width: 44px; height: 44px; }
}
.save-chip svg { flex: none; }
.job-marks { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.aside-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* A job page's marks start hidden until its script runs; without JavaScript the box would be empty but for its gap and margin. */
.aside-marks:not(:has(> :not([hidden]))), .job-marks:not(:has(> :not([hidden]))) { display: none; }
@media (min-width: 900px) {
  /* Save, Mark as applied and Share live under the Apply button here, so the header keeps only the rest. */
  .job-company .job-marks [data-save-id], .job-company .job-marks [data-mark="saved"], .job-company .job-marks .applied-chip, .job-company .job-marks .share-chip { display: none; }
}
@media (min-width: 1100px) {
  .row-item .row-head { padding-right: 0; }
  .row-item .row-side { margin-top: 22px; min-width: 76px; }
  .badge-visit { white-space: normal; text-align: right; max-width: 9.5em; }
}

/* Viewed and applied: a muted title and a small tag on the row, toggles beside Save */
.row.is-viewed .row-title { color: var(--muted); }
.row-mark:empty { display: none; }
.row-mark .badge { margin-left: 8px; padding: 1px 7px; font-family: var(--body); font-size: 12px; vertical-align: 2px; }
.badge-viewed { background: var(--chip); color: var(--muted); }
.badge-applied { background: var(--ink); color: var(--bg); }

/* A company with many jobs in the results: one row that opens to its jobs */
.group { display: flex; flex-direction: column; gap: 10px; }
.group-row { width: 100%; border: 0; text-align: left; cursor: pointer; }
.group-row[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--edge-hover); }
.group-jobs { display: flex; flex-direction: column; gap: 10px; padding-left: 12px; border-left: 2px solid var(--line); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px; border: 0;
  border-radius: 11px; background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--primary-h); color: var(--on-primary); }
.btn-outline { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }
.btn-outline:hover { background: var(--outline-hover); color: var(--primary); }
.btn-disabled, .btn-disabled:hover { background: var(--disabled); color: var(--muted-2); cursor: default; }
.btn-block { width: 100%; height: 52px; font-size: 17px; }
/* A button is a flex box, so the space before the arrow in "Apply on <site> ↗" collapses; the arrow (aria-hidden, so a screen reader skips it) keeps its own gap. */
.btn > [aria-hidden="true"] { margin-left: 0.35em; }
.more-btn { height: 52px; margin-top: 6px; }

.empty {
  padding: 28px 20px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--ring);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.empty strong { font-family: var(--display); font-weight: 600; font-size: 18px; }
.empty span { color: var(--muted); font-size: 15px; }
.empty .btn { height: 44px; padding: 0 18px; border-radius: 10px; }

.section-title { margin: 32px 0 8px; font-family: var(--display); font-weight: 600; font-size: 19px; }
.section-title.tight { margin-top: 28px; margin-bottom: 10px; }
.prose { margin: 0; font-size: 17px; line-height: 1.65; color: var(--prose); max-width: 64ch; text-wrap: pretty; }
.prose p { margin: 0 0 1em; white-space: pre-line; overflow-wrap: anywhere; }
.prose .desc-list { margin: 0 0 1em; padding-left: 1.25em; }
.prose .desc-list li { margin: 0 0 0.35em; overflow-wrap: anywhere; }
.prose > :last-child { margin-bottom: 0; }
.techs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.techs li { font-size: 14px; font-weight: 500; padding: 5px 12px; border-radius: 8px; background: var(--chip); color: var(--prose); }
.note { margin: 0; font-size: 15px; color: var(--muted); }

/* Job page */
.job-page { padding-top: 12px; padding-bottom: 156px; }
.back { display: inline-flex; align-items: center; gap: 6px; height: 44px; font-weight: 600; text-decoration: none; }
.job-grid { display: block; margin-top: 12px; }
.job-company { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.job-company .mono { width: 48px; height: 48px; border-radius: 12px; font-size: 17px; }
.job-company strong { font-weight: 600; font-size: 17px; }
.job-company .badge-feat { font-size: 12.5px; }
.job-page h1 { margin: 18px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.job-meta { margin: 12px 0 0; font-size: 15px; color: var(--muted-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.job-meta span + span::before { content: '·'; margin-right: 12px; }
.job-meta .meta-level { display: none; }
.job-page h3 { margin: 32px 0 8px; font-family: var(--display); font-weight: 600; font-size: 20px; }
.job-page h3.tight { margin-top: 28px; margin-bottom: 10px; }
.job-page .prose { font-size: 17px; }
.job-page .techs li { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.only-desk { display: none; }
.details { margin: 0; display: flex; flex-direction: column; }
.details > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.details > div:last-child { border-bottom: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; font-weight: 600; text-align: right; }
.apply-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--card); border-top: 1px solid var(--line);
  padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 6px;
}
.apply-bar span { text-align: center; font-size: 13px; color: var(--muted); }
.more { display: none; }
@media (min-width: 900px) {
  .job-page { padding-top: 24px; padding-bottom: 80px; }
  .job-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; margin-top: 28px; align-items: start; }
  .job-company .mono { width: 56px; height: 56px; border-radius: 14px; font-size: 20px; }
  .job-company strong { font-size: 19px; }
  .job-page h1 { margin-top: 24px; max-width: 18ch; }
  .job-meta { margin-top: 20px; font-size: 18px; gap: 6px 18px; }
  .job-meta span + span::before { content: none; }
  .job-meta .meta-level { display: inline; }
  .job-meta .meta-posted { display: none; }
  .job-page h3 { margin-top: 48px; margin-bottom: 12px; font-size: 24px; }
  .job-page h3.tight { margin-top: 40px; margin-bottom: 14px; }
  .job-page .prose { font-size: 19px; line-height: 1.7; max-width: 66ch; }
  .job-page .techs li { font-size: 15px; padding: 6px 14px; }
  .only-desk { display: block; }
  .only-mob { display: none; }
  .aside { position: sticky; top: 24px; background: var(--card); border-radius: 18px; box-shadow: 0 0 0 1px var(--ring); padding: 28px; }
  .aside .btn { width: 100%; height: 54px; border-radius: 12px; font-size: 17px; }
  .aside .details { margin-top: 24px; }
  .aside .details > div { border-bottom: 1px solid var(--line-2); }
  .aside .details > div:last-child { border-bottom: 0; }
  .aside p { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
  .apply-bar { display: none; }
  .more { display: block; margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--line); }
  .more h2 { margin: 0 0 20px; font-family: var(--display); font-weight: 600; font-size: 26px; }
  .more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1100px) { .job-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; } }
.more-card {
  background: var(--card); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ring); padding: 22px;
  display: flex; flex-direction: column; gap: 12px; color: var(--ink); text-decoration: none;
}
.more-card:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--primary); }
.more-top { display: flex; align-items: center; justify-content: space-between; }
.more-top .mono { width: 44px; height: 44px; border-radius: 11px; font-size: 16px; }
.more-top span:last-child { font-size: 13px; color: var(--muted); }
.more-card strong { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.25; text-wrap: pretty; }
.more-card .row-meta { display: block; }
.more-card .badges { display: flex; gap: 6px; }
.gone-page { padding-top: 48px; padding-bottom: 48px; }
.gone-page h1 { margin: 0 0 12px; font-family: var(--display); font-weight: 600; font-size: 32px; line-height: 1.2; }
.gone-page .lede { margin: 0 0 20px; font-size: 18px; color: var(--muted-2); }
.gone-page .more { margin-top: 48px; }
@media (max-width: 899px) { .gone-page .more-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* Resume match: a button in the header and a panel above the list. The resume is read in the browser (app.js). */
.match {
  margin: 4px 0 20px; padding: 18px 20px 20px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--ring);
}
.match-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.match-head h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 20px; }
.match-head .icon-link { margin: -8px -10px -8px 0; border: 0; background: none; cursor: pointer; }
.match-note { margin: 4px 0 0; font-size: 14px; color: var(--muted-2); }
.match-inputs { display: grid; gap: 12px; margin-top: 16px; }
.match-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 140px;
  padding: 20px; border: 2px dashed var(--edge); border-radius: 14px; background: var(--bg); text-align: center; cursor: pointer; position: relative;
}
.match-file { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 100px; z-index: 1; }
.match-file:disabled { cursor: progress; }
.match-drop:has(.match-pick:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.match-drop:hover, .match-drop.is-over { border-color: var(--primary); background: var(--sel); }
.match-drop.is-busy { opacity: 0.6; cursor: progress; }
.match-drop strong { font-weight: 600; }
.match-drop > span { font-size: 14px; color: var(--muted); }
.match-pick { padding: 0; border: 0; background: none; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
.match-pick:disabled { cursor: progress; }
.match-paste { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.match-paste textarea {
  width: 100%; min-height: 140px; resize: vertical; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--edge); font: inherit; font-size: 15px; line-height: 1.5;
}
.match-paste textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
.match-paste .btn, .match-actions .btn { height: 44px; padding: 0 20px; border-radius: 10px; }
.match-paste .btn { align-self: flex-start; }
.match-paste .btn:disabled { opacity: 0.6; cursor: progress; }
.match-msg { margin: 12px 0 0; font-size: 15px; color: var(--muted-2); }
.match-msg:empty { display: none; }
.match-msg.is-error { padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); }
.match-results { margin-top: 16px; }
.match-results h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--muted-2); }
.match-results h3:focus { outline: none; }
.match-file-name { max-width: 100%; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; color: var(--muted-2); }
.match-file-name[hidden], .match-hint[hidden] { display: none; }
.match-hint { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; }
.match-summary { margin: 2px 0 10px; font-size: 14px; color: var(--muted); }
.match-skills { flex-wrap: wrap; overflow: visible; padding: 0; }
.match-skills .chip { height: 36px; padding: 0 8px 0 14px; font-size: 14px; gap: 4px; }
.chip-skill svg { flex: none; opacity: 0.6; }
.chip-skill:hover svg { opacity: 1; }
.match-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.match-actions .chip { height: 44px; font-size: 14px; }
.empty .match-actions { margin-top: 0; }
.badge-match { background: var(--info-bg); color: var(--info-ink); }
.row-reason { font-size: 13.5px; color: var(--info-ink); }
@media (min-width: 900px) {
  .match { padding: 24px 28px 28px; }
  .match-inputs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}
@media (min-width: 1100px) { .match { margin-top: 8px; } }
/* Save my resume: only when the site is built with SITE_API_URL. The notice sits right by an unticked box. */
.save-consent { grid-column: 1 / -1; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.save-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; cursor: pointer; }
.save-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primary); cursor: pointer; }
.save-notice { margin: 6px 0 0 30px; font-size: 14px; color: var(--muted-2); }
.save-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.save-msg { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.save-msg:empty { display: none; }
.save-msg.is-error { padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); font-weight: 500; }
.save-token { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--sel); }
.save-token p { margin: 0 0 10px; font-size: 14px; }
.save-token-row { display: flex; gap: 8px; margin-bottom: 10px; }
.save-token-field { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font: 500 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.save-token .btn { height: 44px; padding: 0 18px; border-radius: 10px; }
.save-token .chip { height: 40px; font-size: 14px; }
.save-view { margin-top: 14px; }
.save-view h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--muted-2); }
.save-view h3:focus { outline: none; }
.chip-static { height: 32px; padding: 0 12px; font-size: 14px; cursor: default; }
.save-matches { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 6px; font-size: 15px; }
.save-matches li { overflow-wrap: anywhere; }
.save-matches .badge { margin-left: 8px; }
.save-manage .match-actions { margin-top: 12px; }
.save-manage .btn { height: 44px; padding: 0 18px; border-radius: 10px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--primary); font-weight: 600; text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--primary-h); }
.btn-danger { color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--danger-edge); }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger); }
.save-panel button:disabled { opacity: 0.6; cursor: progress; }

/* India, IST, level and pay: the build's guesses (scripts/lib/job-insights.js) on rows, panels and job pages */
.badge-india { background: var(--india-bg); color: var(--india-ink); }
.badge-open { background: var(--info-bg-2); color: var(--info-ink); }
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); }
.row-facts { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.row-missing { font-size: 13px; color: var(--muted); }
.needs-note { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-ink); font-size: 15px; }
.drawer-note { margin: 14px 0 6px; font-size: 13px; color: var(--muted); }
.match-box { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: var(--sel); }
.match-box-head { margin: 0; font-size: 15px; color: var(--info-ink); }
.match-box-label { margin: 10px 0 8px; font-size: 14px; font-weight: 600; }
.match-box .note { margin-top: 8px; font-size: 14px; }
.techs-missing li { background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); }
.match-tips-box { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.chip-tip { height: 36px; padding: 0 14px; font-size: 14px; }
.chip-tip span { font-size: 12.5px; color: var(--muted); }
.share-chip svg { flex: none; }

/* Header actions: install the app, light or dark, resume match */
.header-acts { display: flex; align-items: center; gap: 6px; }
.theme-toggle { border: 0; background: none; cursor: pointer; }

/* Weekly newsletter sign-up in the footer, when the build has NEWSLETTER_FORM_URL */
.footer-link, .footer-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.newsletter { display: flex; flex-direction: column; gap: 8px; }
.newsletter label { font-size: 14px; color: var(--muted-2); }
.newsletter label strong { color: var(--ink); }
.newsletter-row { display: flex; gap: 8px; max-width: 460px; }
.newsletter input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge); }
.newsletter input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
.newsletter .btn { height: 44px; padding: 0 18px; border-radius: 10px; font-size: 15px; }

/* The weekly page (scripts/lib/site-digest.js) */
.digest-intro { margin: 14px 0 0; max-width: 68ch; color: var(--muted-2); }
.digest-row-facts { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-2); }

.status { padding: 48px 0; font-size: 18px; color: var(--muted-2); }
.status .btn { margin-top: 16px; }

/* Home: the landing page at the plain address (app.js renderHome). A teal band, the totals, the newest jobs as cards, a
   resume panel and ways into the list. The band stays teal in dark mode; --inv is the deep panel. */
.home-hero .wrap { padding-top: 16px; }
.home-band { background: var(--band); color: #fff; border-radius: 36px; padding: 72px 56px 56px; display: flex; flex-direction: column; gap: 28px; }
.home-tag { align-self: flex-start; margin: 0; padding: 8px 18px; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.home-band h1 { margin: 0; max-width: 12ch; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 8vw, 96px); line-height: 0.96; letter-spacing: -0.045em; text-wrap: balance; }
.home-lede { margin: 0; max-width: 560px; font-size: 20px; line-height: 1.5; color: #EAF8F5; }
.home-search { display: flex; flex-wrap: wrap; gap: 8px; max-width: 760px; padding: 8px; border-radius: 20px; background: var(--card); }
.home-search input { flex: 1 1 260px; min-width: 0; height: 52px; padding: 0 16px; border: 0; background: transparent; color: var(--ink); font: 500 17px var(--body); outline: none; }
.home-search input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 12px; }
.home-search button { height: 52px; padding: 0 32px; border: 0; border-radius: 14px; background: var(--inv); color: #F2F8F6; font: 700 16px var(--body); cursor: pointer; }
.home-search button:hover { filter: brightness(1.15); }
.home-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.home-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--card); color: var(--ink); border: 1px solid var(--line); font-weight: 600; font-size: 15px; text-decoration: none; }
.home-pill span, .home-chip span { color: var(--muted); font-weight: 500; }
.home-pill:hover, .home-chip:hover { border-color: var(--ink); color: var(--ink); }
.home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 24px; padding-top: 48px; padding-bottom: 0; }
.home-stats > div { padding-top: 18px; border-top: 2px solid var(--ink); }
.home-stat { margin: 0; font-family: var(--display); font-weight: 700; font-size: 56px; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.home-stat-label { margin: 4px 0 0; font-size: 15px; color: var(--muted-2); }
.home-section { padding-top: 72px; }
.home-section h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.03em; line-height: 1.05; }
.home-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.home-all { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; }
.home-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.home-card:hover { color: var(--ink); transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); }
.home-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.home-card-top { display: flex; align-items: center; gap: 12px; }
.home-card .mono { flex: none; width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
.home-card-co { min-width: 0; display: flex; flex-direction: column; }
.home-card-co strong { font-size: 15px; }
.home-card-co span { font-size: 14px; color: var(--muted-2); overflow-wrap: anywhere; }
.home-card h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; line-height: 1.2; }
.home-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-india { background: var(--india-bg); color: var(--india-ink); }
.home-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted-2); }
.home-card-pay { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.home-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 56px; border-radius: 36px; background: var(--inv); color: #F2F8F6; }
.home-resume > div { max-width: 620px; }
.home-resume h2 { color: #F2F8F6; }
.home-resume p { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: #BFD2CD; }
.home-match { min-height: 56px; padding: 0 32px; border: 0; border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 17px var(--body); cursor: pointer; }
.home-match:hover { filter: brightness(0.95); }
.home-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 32px; margin-top: 32px; }
.home-groups h3 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.home-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.home-chip { padding: 8px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.home-explore { margin: 28px 0 0; padding-bottom: 72px; }
.home-explore a { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .home-band { padding: 40px 22px 32px; gap: 22px; border-radius: 28px; }
  .home-lede { font-size: 17px; }
  .home-search button { flex: 1 1 100%; }
  .home-stat { font-size: 44px; }
  .home-section { padding-top: 56px; }
  .home-resume { padding: 32px 24px; border-radius: 28px; }
}

/* Footer: the script name, the links, then the small print (the artifact's footer) */
.site-footer { margin-top: 32px; border-top: 1px solid var(--line); }
.site-footer .wrap { padding-top: 32px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; color: var(--muted-2); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.footer-brand { font-family: var(--script); font-size: 26px; line-height: 1; color: var(--ink); text-decoration: none; }
.footer-brand:hover { color: var(--ink); }
.site-footer p { margin: 0; max-width: 760px; }
.site-footer a { color: inherit; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (min-width: 900px) { .site-footer { margin-top: 0; } }
.report-link { margin: 12px 0 0; font-size: 14px; }
.report-link a { color: var(--muted-2); }
@media (max-width: 899px) { .route-job .site-footer { display: none; } }

/* Static pages: the job, category and hub pages that scripts/build-site.js writes. They reuse the classes above. */
.gone-note { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-ink); font-size: 15px; }
.gone-note a { color: inherit; font-weight: 600; }
.job-page .prose ul { margin: 0 0 1em; padding-left: 1.25em; }
.job-page .prose li { margin: 0 0 0.35em; overflow-wrap: anywhere; }
.static-page { padding-bottom: 48px; }
.static-page h1 { margin: 20px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.static-page h2 { margin: 40px 0 12px; font-family: var(--display); font-weight: 600; font-size: 22px; }
.static-page .lede { margin: 14px 0 0; max-width: 68ch; font-size: 17px; line-height: 1.6; color: var(--muted-2); text-wrap: pretty; }
.static-page .follow { margin: 12px 0 0; max-width: 68ch; font-size: 15px; line-height: 1.5; color: var(--muted-2); }
.static-page .follow a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.static-list { margin-top: 24px; }
.link-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.link-chips a { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--ring); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.link-chips a:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--primary); }
.link-chips a span { color: var(--muted); font-weight: 400; }
.source-chip { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--ring); font-weight: 500; font-size: 15px; }
.source-chip span { color: var(--muted); font-weight: 400; }
.static-links { padding-top: 24px; padding-bottom: 24px; }
.static-links h2 { margin: 28px 0 10px; font-family: var(--display); font-weight: 600; font-size: 22px; }
.static-links h3 { margin: 18px 0 8px; font-size: 15px; font-weight: 600; color: var(--muted-2); }
.static-links ul:not(.link-chips) { margin: 0; padding-left: 1.2em; columns: 2 320px; }
.static-links li { margin: 0 0 6px; }
@media (min-width: 900px) {
  .static-page h1 { margin-top: 28px; }
  .static-page .lede { font-size: 19px; }
}

/* My tracker (#/tracker): saved and applied jobs by stage, with a note and a follow-up date each */
.tracker-link #tracker-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 12.5px; line-height: 20px; text-align: center; }
/* On a phone the tracker is an icon (its count is on the page itself) so the header keeps fitting. */
@media (max-width: 639px) {
  .header-acts { gap: 4px; }
  .brand { flex: none; white-space: nowrap; }
  .brand { gap: 6px; }
  .brand img { width: 28px; height: 28px; }
  .brand span { font-size: 18px; }
}
@media (max-width: 639px) {
  /* Export and Import sit under the text, on the left, instead of being pushed to the right edge. */
  .tracker-actions { margin-left: 0; }
}
.tracker-search {
  flex: 1 1 260px; max-width: 440px; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--edge); font: inherit; font-size: 15px;
}
.tracker-search:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tracker-status { margin: 10px 0 0; min-height: 1.4em; font-size: 14px; color: var(--ok-ink); }
.tracker-status.is-error { color: var(--danger); }
.tracker-empty { padding: 28px clamp(18px, 4vw, 36px); border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--ring); }
.tracker-empty h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 22px; }
.tracker-steps { margin: 14px 0 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; color: var(--muted-2); }
.tracker-steps strong { color: var(--ink); }
.tracker-empty-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 22px; }
.tracker-none { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px 0; }
.tracker-none p { margin: 0; font-size: 16px; color: var(--muted-2); }
.tc-ask { padding: 10px 12px; border-radius: 10px; background: var(--info-bg-2); }
.tc-ask p { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--info-ink); }
.tc-more { border-top: 1px solid var(--line-2); padding-top: 4px; }
.tc-more summary { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--primary); cursor: pointer; list-style: none; }
.tc-more summary::-webkit-details-marker { display: none; }
.tc-more summary::after { content: ''; width: 8px; height: 8px; margin: 0 4px 3px auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
.tc-more[open] summary::after { margin-bottom: -3px; transform: rotate(-135deg); }
.tc-more summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.tc-has-note { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--info-bg-2); color: var(--info-ink); font-size: 12px; font-weight: 600; }
.tc-more[open] .tc-has-note { display: none; }
.tc-body { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 4px; }
.tc-more[open] + .tc-preview { display: none; }
.tc-preview { margin: -2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.tc-field { display: flex; flex-direction: column; gap: 4px; }
.tc-field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.tc-field select, .tc-field input[type="date"], .tc-note {
  width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--bg); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--edge); font: inherit; font-size: 14.5px;
}
.tc-note { min-height: 84px; resize: vertical; line-height: 1.45; }
.tc-follow-row { display: flex; gap: 8px; }
.tc-follow-row input { flex: 1; min-width: 0; }
.tc-plus { height: 44px; padding: 0 14px; font-size: 14px; }

/* Application kit: "Tailor my application" on a job (site/tailor.js) */
.tailor-kit { margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: var(--sel); }
.tailor-kit:focus { outline: none; }
.tailor-kit .section-title { margin: 0 0 6px; }
.tailor-kit h4 { margin: 18px 0 8px; font-size: 15px; font-weight: 700; }
.tailor-kit .note { font-size: 14px; }
.kit-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; font-size: 15px; }
.kit-btn { height: 40px; padding: 0 16px; font-size: 14px; }
.kit-keywords li { display: inline-flex; align-items: center; gap: 5px; }
.kit-keywords li svg { flex: none; width: 14px; height: 14px; }
.kit-keywords .kw-have { background: var(--ok-bg); color: var(--ok-ink); }
.kit-keywords .kw-miss { background: var(--card); outline: 1px dashed var(--edge-strong); outline-offset: -1px; }
.kw-tag { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.kit-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kit-line p { flex: 1 1 260px; margin: 0; font-weight: 600; }
.kit-line p.note { font-weight: 400; }
.kit-copy { height: 36px; padding: 0 14px; font-size: 14px; }
.kit-checks { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.kit-warn { color: var(--warn-ink); }
.kit-note { display: block; width: 100%; margin-bottom: 8px; padding: 12px; border: 0; border-radius: 10px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); font: inherit; font-size: 15px; line-height: 1.55; resize: vertical; }

/* Links to a company's own page: "All jobs at X" in the panel and on a job's page, and the company page's facts */
.company-slot:empty { display: none; }
.company-slot a, .job-meta a { color: var(--primary); font-weight: 600; text-decoration: none; }
.company-slot a:hover, .job-meta a:hover { text-decoration: underline; }
.job-company strong a { color: inherit; text-decoration: none; }
.job-company strong a:hover { text-decoration: underline; }
.company-facts { max-width: 520px; margin-top: 20px; }
.chip-plain { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--chip); color: var(--ink); font-size: 15px; font-weight: 500; }
.chip-plain span { color: var(--muted); font-weight: 400; }
@media (max-width: 359px) { .brand span { display: none; } }

/* Jobs: the list page (app.js renderBrowse), after the design's Jobs board. A teal band with the search on a wide screen,
   a plain heading and search on a phone. The filters are the sidebar from 1100px up and the drawer below that. */
.jobs-band { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 48px 56px; }
.jobs-band h1 { max-width: none; font-size: clamp(40px, 6vw, 72px); line-height: 1; }
.jobs-eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.jobs-search { flex-wrap: nowrap; align-items: center; width: min(460px, 100%); max-width: none; padding: 6px; border-radius: 16px; }
.jobs-search input { flex: 1 1 0; height: 48px; font-size: 16px; }
.jobs-search button { flex: none; height: 48px; padding: 0 24px; border-radius: 12px; }
@media (max-width: 639px) {
  /* The phone board has no band: the heading and a bordered search field sit straight on the page. */
  .jobs-hero .wrap { padding-top: 4px; }
  .jobs-band { background: none; color: var(--ink); padding: 0; border-radius: 0; gap: 16px; }
  .jobs-eyebrow { display: none; }
  .jobs-band h1 { font-size: 40px; letter-spacing: -0.045em; }
  .jobs-search { width: 100%; padding: 0 6px 0 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--edge-strong); }
  .jobs-search input { padding: 0; height: 50px; }
  .jobs-search button { padding: 0 18px; height: 44px; border-radius: 10px; }
}
.jobs-layout { display: block; margin-top: 28px; padding-bottom: 32px; }
.jobs-side { display: contents; }
.jobs-main { min-width: 0; }
@media (max-width: 639px) {
  /* The board's order on a phone: the shortcuts, then Filters and Sort, then the count, then the cards. */
  .jobs-layout { margin-top: 16px; }
  .jobs-main { display: flex; flex-direction: column; }
  .jobs-main .jobs-head { display: contents; }
  .jobs-quick { order: 1; }
  .jobs-main .jobs-tools { order: 2; width: 100%; justify-content: space-between; margin: 0 0 12px; }
  .jobs-main .jobs-head .count { order: 3; margin: 0 0 12px; }
  .list { order: 4; }
}
/* The quick filters wrap onto as many lines as they need, so none is cut off at the edge with nothing to say it is there. */
.jobs-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.jobs-quick .chip { height: 44px; padding: 0 16px; font-size: 14px; border-radius: 999px; }
.jobs-quick .chip.is-on { background: var(--in-big, #B54708); color: #fff; }
.jobs-quick .chip[hidden] { display: none; }
.jobs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 14px; }
.jobs-head .count { margin: 0; font-size: 15px; font-weight: 600; font-family: var(--body); }
.jobs-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.jobs-tools .select-field label { display: none; }
.jobs-tools .select-wrap select { height: 44px; border-radius: 999px; padding: 0 38px 0 16px; font-weight: 600; font-size: 14px; }
.jobs-tools .select-wrap svg { top: 15px; }
.jobs-tools .chip-filters { border-radius: 999px; }
.jobs-tools .chip-filters span:not(:empty) { background: var(--inv); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 700; opacity: 1; }
.sidebar-clear { display: none; }

/* Cards, as on the board: a white card, a hairline, a ring when the pointer is over it */
.row { border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.2s ease; }
.row:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.list { gap: 12px; }
.more-btn { width: 100%; height: 52px; margin-top: 8px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; color: var(--ink); }
.more-btn:hover { background: var(--hover); color: var(--ink); }
@media (min-width: 1100px) {
  .jobs-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; padding-bottom: 72px; }
  .jobs-side { display: block; position: sticky; top: 16px; }
  /* The drawer's own panel, shown in place as a card: no slide, no backdrop, no close button or "Show jobs" button. */
  .jobs-side .drawer {
    position: static; transform: none; visibility: visible; width: auto; max-height: calc(100vh - 32px);
    border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden;
  }
  .drawer-backdrop, .drawer-head .icon-link, .drawer-foot .btn:not(.btn-outline), .drawer-clear, .facet-sort, .jobs-tools .chip-filters { display: none; }
  .sidebar-clear { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--primary); font: 600 14px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .jobs-side .drawer-head { padding: 12px 12px 12px 22px; }
  .jobs-side .drawer-body { padding: 8px 22px 12px; }
  .facet legend { font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .jobs-head { margin-top: 0; }
  .jobs-head .count { font-size: 18px; font-family: var(--display); }
  .row { padding: 20px 22px; }
}

/* Home on a phone (the board's Mobile Home): a shorter band with a one-line tag, the search as a field and a button of
   their own, the shortcuts in one row that scrolls sideways, totals two across, the resume panel's button full width. */
@media (max-width: 639px) {
  .home-hero:not(.jobs-hero) .wrap { padding-top: 4px; }
  .home-hero:not(.jobs-hero) .home-band { padding: 28px 22px; gap: 18px; }
  .home-tag { padding: 6px 14px; font-size: 14px; }
  .home-hero:not(.jobs-hero) .home-band h1 { max-width: none; font-size: 46px; line-height: 0.98; }
  .home-lede { font-size: 16px; }
  .home-hero:not(.jobs-hero) .home-search { flex-direction: column; flex-wrap: nowrap; max-width: none; padding: 0; border-radius: 0; background: none; }
  .home-hero:not(.jobs-hero) .home-search input { flex: none; width: 100%; box-sizing: border-box; height: 52px; border-radius: 14px; background: var(--card); }
  .home-hero:not(.jobs-hero) .home-search button { flex: none; width: 100%; min-height: 52px; border-radius: 14px; }
  .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; padding-top: 40px; }
  .home-stats > div { padding-top: 12px; }
  .home-stat { font-size: 40px; }
  .home-stat-label { font-size: 13px; }
  .home-section { padding-top: 40px; }
  .home-section h2 { font-size: 28px; }
  .home-section-head { margin-bottom: 16px; }
  .home-cards { gap: 16px; }
  .home-card { padding: 18px; border-radius: 20px; gap: 12px; }
  .home-card h3 { font-size: 20px; }
  .home-resume { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 14px; padding: 28px 22px; }
  .home-resume h2 { font-size: 30px; }
  .home-resume p { margin-top: 14px; font-size: 15px; }
  .home-match { width: 100%; min-height: 52px; padding: 0 16px; font-size: 16px; }
  .home-groups { gap: 24px; margin-top: 20px; }
  .home-explore { margin-top: 16px; padding-bottom: 24px; }
}

/* A job's page on a phone (the board's Mobile Job detail): Back and Share on top, the company, a big title, the facts,
   the pay with rupees beside it, our reading of the listing, the text, the details as a card, then the buttons, the
   report link and more jobs. Apply stays pinned at the bottom. */
.job-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.back-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 899px) {
  .back { color: var(--primary); font-weight: 700; }
  .job-page article { display: flex; flex-direction: column; }
  .job-page .job-company { display: contents; }
  .job-marks { order: 1; margin: 20px 0 0; }
  .job-marks .share-chip, .job-marks .viewed-chip { display: none; }
  .job-page article > .only-mob:last-child { order: 1; }
  .job-page h1 { margin-top: 18px; font-size: 44px; line-height: 1; letter-spacing: -0.04em; }
  .job-pay { margin: 16px 0 0; font: 700 20px/1.25 var(--display); letter-spacing: -0.02em; }
  .job-pay span { font: 500 14px var(--body); letter-spacing: 0; color: var(--muted); }
  .job-reading { margin: 16px 0 0; }
  .job-meta { gap: 4px 14px; }
  .job-meta span + span::before { content: none; }
  .job-page h3 { margin-top: 28px; font-size: 22px; }
  .job-page .only-mob > h3 { display: none; }
  .job-page .only-mob .details { margin-top: 28px; padding: 6px 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
  .more { display: block; margin-top: 36px; }
  .more h2 { margin: 0 0 12px; font: 700 26px var(--display); letter-spacing: -0.03em; }
  .more-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .more-card { padding: 16px; gap: 6px; border-radius: 20px; box-shadow: none; border: 1px solid var(--line); }
  .more-top, .more-card .badges { display: none; }
  .more-card strong { font-size: 18px; }
}

/* A job's page on a wide screen and the Explore hub, after the Job detail and Explore boards (static pages share them). */
.job-reading { margin: 20px 0 0; max-width: 640px; padding: 16px 20px; border-radius: 16px; background: var(--sel); color: var(--info-ink); font-size: 15px; line-height: 1.5; }
.job-id .badge-open, .job-id .badge-india { background: var(--india-bg); color: var(--india-ink); }
@media (min-width: 900px) {
  .job-company .mono { width: 52px; height: 52px; border-radius: 14px; font-size: 22px; }
  .job-company strong { font-size: 18px; font-weight: 700; }
  .job-page h1 { margin-top: 20px; font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -0.04em; }
  .aside { padding: 28px; border-radius: 28px; box-shadow: none; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
  .aside .btn { height: 56px; border-radius: 999px; font-weight: 700; }
  .aside > p { margin: 0; text-align: center; }
  .aside .details { margin-top: 4px; }
  .aside .details > div { border-bottom: 0; border-top: 1px solid var(--line); padding: 12px 0; font-size: 15px; }
  .more { margin-top: 80px; padding-top: 0; border-top: 0; }
  .more h2 { margin: 0 0 24px; font: 700 clamp(30px, 4vw, 44px) var(--display); letter-spacing: -0.03em; }
  .more-card { padding: 22px; border-radius: 24px; box-shadow: none; border: 1px solid var(--line); transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .more-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); }
}

.link-chips a { padding: 8px 16px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.link-chips a span { margin-left: 4px; font-weight: 500; font-variant-numeric: tabular-nums; }
.link-chips a:hover { color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

.hub-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 20px; }
.static-page .hub-head h1 { margin: 0; max-width: 14ch; font-size: clamp(40px, 6vw, 80px); line-height: 0.98; letter-spacing: -0.045em; }
.hub-head .lede { margin: 0; max-width: 400px; font-size: 18px; color: var(--ink-2); }
.hub-india { margin-top: 48px; padding: 44px 48px; border-radius: 36px; background: var(--band); color: #fff; }
.static-page .hub-india h2 { margin: 0; font-weight: 700; font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.035em; color: #fff; }
.hub-india > p { margin: 8px 0 0; max-width: 60ch; font-size: 16px; color: #fff; }
.hub-india-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin-top: 28px; }
.hub-ic { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 24px; border-radius: 24px; background: var(--card); color: var(--ink); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hub-ic:hover { color: var(--ink); transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.45); }
.hub-n { font: 700 52px/1 var(--display); letter-spacing: -0.04em; color: var(--primary); font-variant-numeric: tabular-nums; }
.hub-ic strong { font: 600 19px var(--display); letter-spacing: -0.01em; }
.hub-note { font-size: 14px; color: var(--muted); }
.hub-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 48px 56px; margin-top: 56px; }
.static-page .hub-groups h2, .static-page .hub-more h2 { margin: 0 0 16px; font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }
.hub-more { margin-top: 56px; }
@media (max-width: 639px) {
  .hub-head { gap: 10px; margin-top: 4px; }
  .static-page .hub-head h1 { max-width: none; font-size: 40px; }
  .hub-head .lede { font-size: 15px; }
  .hub-india { margin-top: 28px; padding: 22px 18px; border-radius: 28px; }
  .static-page .hub-india h2 { font-size: 28px; }
  .hub-india > p, .hub-note { display: none; }
  .hub-india-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
  .hub-ic { padding: 14px; border-radius: 18px; gap: 4px; }
  .hub-n { font-size: 34px; }
  .hub-ic strong { font: 700 14px/1.25 var(--body); }
  .hub-groups { gap: 28px; margin-top: 28px; }
  .hub-more { margin-top: 28px; }
  .static-page .hub-groups h2, .static-page .hub-more h2 { margin-bottom: 12px; }
}
.back-css::before { content: ''; flex: none; width: 9px; height: 9px; margin: 0 4px 0 8px; border-left: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: rotate(45deg); }
@media (min-width: 900px) { .back-row.only-mob { display: none; } }

/* Sources (/sources/), after the Sources boards: the heading with the text beside it, the boards as small cards with
   their counts, how it works as ruled lines beside a dark "Found a problem?" panel, and a pill button. */
.sources-page .hub-head h1 { max-width: 12ch; }
.sources-page .hub-head .lede { max-width: 480px; font-size: 19px; line-height: 1.55; }
.src-boards { margin-top: 56px; }
.static-page .src-boards h2, .static-page .src-how h2 { margin: 0; font-weight: 700; font-size: 32px; letter-spacing: -0.03em; }
.src-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin-top: 20px; }
.src-grid .source-chip { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 18px; box-shadow: none; border: 1px solid var(--line); font-size: 16px; font-weight: 700; }
.src-grid .source-chip span { flex: none; white-space: nowrap; font: 700 24px var(--display); letter-spacing: -0.02em; color: var(--primary); font-variant-numeric: tabular-nums; }
.src-how { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 64px; }
.src-how > div { flex: 1 1 420px; min-width: 0; }
.src-list { margin: 20px 0 0; padding: 0; list-style: none; }
.src-list li { max-width: 60ch; padding: 18px 0; border-top: 1px solid var(--edge-strong); font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.src-problem { flex: 0 1 400px; min-width: min(300px, 100%); align-self: flex-start; box-sizing: border-box; padding: 32px; border-radius: 28px; background: var(--inv); display: flex; flex-direction: column; gap: 14px; }
.static-page .src-problem h2 { margin: 0; font-weight: 700; font-size: 28px; letter-spacing: -0.025em; color: #F2F8F6; }
.src-problem p { margin: 0; font-size: 16px; line-height: 1.55; color: #BFD2CD; }
.src-report { align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 700; text-decoration: none; }
.src-report:hover { color: var(--ink); filter: brightness(0.95); }
.src-all { margin: 48px 0 0; }
.src-all .btn { height: 52px; padding: 0 30px; border-radius: 999px; font-weight: 700; }
@media (max-width: 639px) {
  .sources-page .hub-head h1 { max-width: none; font-size: 44px; }
  .sources-page .hub-head .lede { font-size: 16px; }
  .src-boards { margin-top: 28px; }
  .static-page .src-boards h2, .static-page .src-how h2 { font-size: 26px; }
  .src-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .src-grid .source-chip { padding: 12px 14px; border-radius: 14px; font-size: 14px; overflow-wrap: anywhere; }
  .src-grid .source-chip span { font-size: 20px; }
  .src-how { gap: 28px; margin-top: 28px; }
  .src-list { margin-top: 8px; }
  .src-list li { padding: 14px 0; font-size: 15.5px; }
  .src-problem { flex-basis: auto; width: 100%; padding: 24px 22px; border-radius: 24px; }
  .static-page .src-problem h2 { font-size: 26px; }
  .src-problem p { font-size: 15px; }
  .src-report { align-self: stretch; justify-content: center; min-height: 52px; }
  .src-all { display: none; }
}


/* My tracker (#/tracker), after the Tracker boards: a heading with Export and Import beside it, the totals, one card of
   rows with a stage chip each (a stacked list of cards on a phone), and a note under it. */
.tracker { display: flex; flex-direction: column; padding-bottom: 48px; }
.tracker .back { align-self: flex-start; }
.tracker-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 24px 0 40px; }
.tracker h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.045em; }
.tracker .lede { margin: 10px 0 0; max-width: 56ch; font-size: 18px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.tracker-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tracker-actions .chip { height: 44px; padding: 0 18px; font-size: 15px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.tracker-actions .chip:disabled { box-shadow: inset 0 0 0 1.5px var(--edge); }
.tracker-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px; margin-bottom: 40px; }
.tracker-stats > div { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; border-top: 2px solid var(--ink); }
.tracker-stats strong { font: 700 56px/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tracker-stats span { font-size: 15px; color: var(--muted); }
.tracker-toolbar { margin: 0 0 16px; }
.tracker-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.tracker-filters .chip { height: 44px; padding: 0 18px; gap: 8px; font-size: 15px; box-shadow: inset 0 0 0 1px var(--edge-strong); }
.tracker-filters .chip span { padding: 0; background: none; font-weight: 700; opacity: 1; line-height: inherit; min-width: 0; }
.tracker-filters .chip.is-on { background: var(--inv); color: #F2F8F6; box-shadow: none; }
.tracker-filters .chip-due { background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 0 0 0 1px var(--warn-ink); }
.tracker-filters .chip-due.is-on { background: var(--warn-ink); color: var(--warn-bg); }
.board-host { margin-top: 4px; }
.tracker-list { background: var(--card); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; }
.tracker-list-head { padding: 24px 28px 18px; }
.tracker-list-head h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -0.025em; }
.tcards { list-style: none; margin: 0; padding: 0; }
.tcard { display: flex; flex-direction: column; gap: 8px; padding: 20px 28px; border-top: 1px solid var(--line); }
.tcard-main { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.tcard-main .mono { flex: none; width: 48px; height: 48px; border-radius: 12px; font-size: 19px; }
.tcard-title { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tcard-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tcard-title a, .tcard-name { font: 700 20px/1.25 var(--display); letter-spacing: -0.015em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.tcard-title a:hover { color: var(--primary); text-decoration: underline; }
.tcard .row-meta { font-size: 15px; }
.tc-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--edge-strong); font-size: 13px; font-weight: 700; color: var(--ink); }
.st-chip-applied { background: var(--inv); color: #F2F8F6; box-shadow: none; }
.st-chip-interview { background: var(--sel); color: var(--info-ink); box-shadow: inset 0 0 0 1px var(--primary); }
.st-chip-offer { background: var(--ok-bg); color: var(--ok-ink); box-shadow: inset 0 0 0 1px var(--ok-ink); }
.st-chip-rejected { background: var(--chip); color: var(--muted); box-shadow: inset 0 0 0 1px var(--edge); }
.tcard-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tc-due { margin: 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.tc-due .badge { padding: 0; background: none; font-size: 14px; font-weight: 700; color: inherit; white-space: normal; }
.tc-due .badge-warn { color: var(--warn-ink); }
.tcard-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; }
.act { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: 600 14px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.act:hover { color: var(--primary); }
.tc-remove:hover { color: var(--danger); }
.tcard > .tc-ask, .tcard > .tc-more, .tcard > .tc-preview { margin-left: 70px; }
.tracker-foot { margin: 20px 0 0; max-width: 70ch; font-size: 14px; color: var(--muted); }
@media (max-width: 639px) {
  .tracker-head { display: contents; }
  .tracker h1 { margin-top: 8px; font-size: 44px; }
  .tracker .lede { margin-bottom: 18px; font-size: 15px; }
  .tracker-stats { display: none; }
  .tracker-actions { order: 90; margin-top: 18px; }
  .tracker-actions .chip { height: 44px; padding: 0 16px; font-size: 14px; box-shadow: inset 0 0 0 1.5px var(--ink); }
  .tracker-foot { order: 91; font-size: 13px; }
  .tracker-filters { margin-bottom: 12px; }
  .tracker-filters .chip { padding: 0 16px; font-size: 14px; }
  .tracker-list { background: none; border: 0; border-radius: 0; overflow: visible; }
  .tracker-list-head { display: none; }
  .tcards { display: flex; flex-direction: column; gap: 12px; }
  .tcard { gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
  .tcard-main { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 12px; align-items: start; }
  .tcard-main .mono { width: 44px; height: 44px; }
  .tcard-line { flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; }
  .tcard-title a, .tcard-name { font-size: 18px; }
  .tc-chip { flex: none; min-height: 26px; padding: 0 10px; font-size: 12px; }
  .tcard-title { gap: 6px; }
  .tcard .row-meta { font-size: 14px; }
  .tcard-side { grid-column: 1 / -1; align-items: stretch; gap: 0; }
  .tcard-acts { justify-content: flex-start; margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
  .tcard > .tc-ask, .tcard > .tc-more, .tcard > .tc-preview { margin-left: 0; }
}
.tracker-toolbar .tracker-search { width: min(440px, 100%); box-sizing: border-box; }

/* Resume match, after the board's "Your resume" card: a white card with a dashed drop box, the pasted text, the skills found
   as soft green tags and a dark Match button. On a wide screen it is the left column, above the filters, with the best
   matches beside it; narrower, it sits above the list. */
.match { margin: 0 0 20px; padding: 20px; border-radius: 24px; box-shadow: none; border: 1px solid var(--line); }
.match-head h2 { font: 700 22px var(--display); letter-spacing: -0.02em; }
.match-drop { min-height: 0; padding: 20px; border: 2px dashed var(--edge-strong); border-radius: 16px; background: transparent; }
.match-drop strong { font-weight: 700; font-size: 15px; }
.match-paste textarea { font-size: 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--edge-strong); }
.match-paste .btn { align-self: stretch; height: 52px; border-radius: 14px; background: var(--inv); color: #F2F8F6; font-weight: 700; }
.match-paste .btn:hover { background: var(--inv); color: #F2F8F6; filter: brightness(1.15); }
.match-skills .chip { height: 34px; border-radius: 8px; background: var(--sel); color: var(--info-ink); box-shadow: none; font-weight: 600; }
.match-skills .chip:hover { box-shadow: inset 0 0 0 1px var(--primary); }
.match-tips-box { margin-top: 16px; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--sel); color: var(--info-ink); }
.match-tips-box h3 { color: inherit; }
.match-tips-box .match-skills .chip { background: var(--card); }
.badge-match { background: var(--sel); color: var(--info-ink); }
@media (min-width: 900px) {
  .match { padding: 28px; border-radius: 28px; }
  .match-head h2 { font-size: 26px; }
}
@media (min-width: 1100px) {
  .jobs-side .match { margin-bottom: 16px; padding: 24px; }
  .jobs-side .match-inputs { grid-template-columns: minmax(0, 1fr); }
  .jobs-layout:has(.match:not([hidden])) { grid-template-columns: 380px minmax(0, 1fr); }
  .jobs-layout:has(.match:not([hidden])) .jobs-side { position: static; }
}

/* The phone and tablet shell (the boards' Mobile pages, up to 899px): the header is the logo, the install and theme icons and a bell, and Jobs, Explore, Match and Tracker are
   tabs along the bottom. The links in the header and the "Get job alerts" pill are for wider screens. A job's page has its own
   Back and Share row and Apply bar, so it has neither. The icons are masks, so the pages carry no inline svg. */
.bell, .tabbar { display: none; }
.bell::before, .tb::before { content: ''; display: block; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.bell { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.9 1.9 0 003.4 0'/%3E%3C/svg%3E"); }
.tb-jobs { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2'/%3E%3C/svg%3E"); }
.tb-explore { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E"); }
.tb-match { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 12h7M9 16h7'/%3E%3C/svg%3E"); }
.tb-tracker { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h14v17l-7-4-7 4z'/%3E%3C/svg%3E"); }
@media (max-width: 639px) { .wrap { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 899px) {
  body { padding-bottom: 68px; }
  .site-header .wrap { flex-wrap: nowrap; justify-content: space-between; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
  .site-nav, .pill-dark { display: none; }
  .brand { gap: 8px; }
  .brand img { width: 34px; height: 34px; }
  .brand span { font-size: 24px; }
  .bell { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; color: var(--ink); }
  .bell::before { width: 22px; height: 22px; }
  .tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; padding: 4px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); }
  .tb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; }
  .tb::before { width: 22px; height: 22px; }
  .tb.is-on, .tb:hover { color: var(--primary); }
  .route-job .site-header, .route-job .tabbar { display: none; }
  .route-job { padding-bottom: 0; }
}

/* Home on a phone, the parts the board draws differently: the shortcuts are a row under the band, "See all" sits beside the
   heading, and a card's place stays on one line. */
.home-pills-out { display: none; }
.home-all-n { display: none; }
@media (min-width: 640px) { .home-all-n { display: inline; } }
@media (max-width: 639px) {
  .home-hero:not(.jobs-hero) .home-pills { display: none; }
  .home-pills-out { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .home-section-head { flex-wrap: nowrap; align-items: baseline; }
  .home-all { min-height: 44px; font-size: 14px; }
  .home-card-co strong { font-size: 14px; }
  .home-card-co span { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}

/* The boards set page titles, section titles and big numbers in the heaviest Bricolage Grotesque (800); card titles stay 700. */
.home-band h1, .jobs-band h1, .home-stat, .home-section h2, .home-resume h2, .static-page h1, .static-page .hub-head h1,
.static-page .hub-india h2, .hub-n, .tracker h1, .tracker-stats strong, .tracker-list-head h2, .job-page h1, .more h2,
.static-page .src-boards h2, .static-page .src-how h2, .static-page .src-problem h2, .static-page .hub-groups h2, .static-page .hub-more h2 { font-weight: 800; }
@media (max-width: 639px) {
  /* "Browse by" is one run of chips on a phone, as on the board, without the small group labels. */
  .home-groups { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .home-groups > div { display: contents; }
  .home-groups h3 { display: none; }
  .home-chips { display: contents; }
  .home-chip { padding: 8px 16px; }
}

/* The list on a phone, after the Mobile Jobs board: the search ends in a square dark icon button, and a card is the logo
   beside the title, the company and place, the tags and the pay line (the eye is for wider screens; the heart stays). */
@media (max-width: 639px) {
  .jobs-search button { position: relative; width: 44px; padding: 0; font-size: 0; }
  .jobs-search button::before { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
  .row { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "mono head" ". tags" ". side"; gap: 8px 12px; padding: 16px; }
  .row.no-tags { grid-template-areas: "mono head" ". side"; }
  .row .mono { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
  .row-item .row-head { padding-right: 36px; }
  .row-acts { top: 6px; right: 6px; }
  .row-acts .viewed-btn { display: none; }
  .row-title { font-size: 18px; line-height: 1.25; }
}

@media (max-width: 639px) {
  /* The phone board keeps the Explore intro to one line and leaves the feed line out. */
  .hub-pick, .hub-page .follow { display: none; }
  .hub-search { display: inline-block; }
  .hub-search::first-letter { text-transform: uppercase; }
}

/* Resume match, after the board: while a resume is open the band swaps the search for a line of text (and is teal on a phone
   too), the pasted-text box has a visible caption, and a matched job shows its score where the logo would be. */
.jobs-lede { margin: 0; max-width: 440px; font-size: 18px; line-height: 1.55; color: #EAF8F5; }
.jobs-lede[hidden] { display: none; }
.jobs-hero.is-matching .jobs-search { display: none; }
.match-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.row .row-score { grid-area: mono; display: flex; flex-direction: column; align-items: center; justify-self: stretch; text-align: center; }
.row-score strong { font: 800 24px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.row-score span { margin-top: 2px; font-size: 11px; color: var(--muted); }
@media (min-width: 640px) { .row-score { width: 56px; } .row-score strong { font-size: 28px; } .row-score span { font-size: 12px; } }
@media (max-width: 639px) {
  .jobs-hero.is-matching .jobs-band { padding: 26px 20px; border-radius: 28px; background: var(--band); color: #fff; gap: 12px; }
  .jobs-hero.is-matching .jobs-eyebrow { display: none; }
  .jobs-lede { font-size: 15px; }
  .match-label + textarea { margin-top: 0; }
}
@media (max-width: 639px) { .tracker > .back { display: none; } .tracker-head { margin-top: 0; } }

/* Category pages (role, skill, country and search pages), after the Category and Category skill boards: a band with the kind of
   group, the title and the intro beside it, the jobs as cards, then the other groups as chips. */
.cat-band { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: 12px; padding: 56px; border-radius: 36px; background: var(--inv); }
.cat-band > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cat-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9FE0D3; }
.static-page .cat-band h1 { margin: 0; max-width: 14ch; font-size: clamp(40px, 6vw, 80px); line-height: 0.98; letter-spacing: -0.045em; color: #F2F8F6; }
.static-page .cat-band .lede { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.55; color: #BFD2CD; }
.cat-band-teal { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 20px; background: var(--band); }
.cat-band-teal > div { gap: 20px; }
.cat-band-teal .cat-eyebrow { align-self: flex-start; padding: 5px 14px; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 999px; font-size: 13px; letter-spacing: 0.1em; color: #fff; }
.static-page .cat-band-teal h1 { color: #fff; }
.static-page .cat-band-teal .lede { max-width: 68ch; font-size: 19px; line-height: 1.5; color: #EAF8F5; }
.cat-page .follow { margin-top: 20px; }
.cat-page .static-list { max-width: 980px; margin-top: 28px; gap: 12px; }
.static-page.cat-page h2 { margin: 56px 0 0; font: 700 26px var(--display); letter-spacing: -0.02em; }
.static-page.cat-page h2 + .link-chips { margin-top: 16px; }
.static-page.cat-page .link-chips + h2 { margin-top: 40px; }
@media (max-width: 639px) {
  .cat-band { margin-top: 4px; padding: 26px 20px; border-radius: 28px; gap: 12px; }
  .cat-band > div { gap: 12px; }
  .cat-eyebrow { font-size: 12px; letter-spacing: 0.1em; }
  .static-page .cat-band h1 { max-width: none; font-size: 42px; }
  .static-page .cat-band .lede { font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  .cat-band-teal { gap: 14px; }
  .cat-band-teal > div { gap: 14px; }
  .cat-band-teal .cat-eyebrow { padding: 4px 12px; font-size: 12px; letter-spacing: 0.08em; }
  .static-page .cat-band-teal h1 { font-size: 40px; }
  .static-page .cat-band-teal .lede { font-size: 15px; }
  .cat-page .follow { margin-top: 4px; font-size: 14px; }
  .cat-page .follow a { display: inline-flex; align-items: center; min-height: 44px; }
  .cat-page .static-list { margin-top: 12px; }
  .static-page.cat-page h2 { margin-top: 28px; font-size: 22px; }
  .static-page.cat-page h2 + .link-chips { margin-top: 12px; }
  .static-page.cat-page .link-chips + h2 { margin-top: 28px; }
}

/* A closed job (/jobs/<id>/ after the job left the list), after the Closed job boards: a narrow column with the warning box and
   pill buttons, then more jobs. It keeps the header and tabs on a phone; the footer waits at the foot. */
.gone-page .job-company { display: flex; }
.gone-page article { max-width: 760px; }
.gone-page .job-company .mono { width: 52px; height: 52px; border-radius: 14px; font-size: 22px; }
.gone-page .job-company strong { font-size: 18px; font-weight: 700; }
.gone-page h1 { margin: 20px 0 0; font: 800 clamp(36px, 5vw, 64px)/1 var(--display); letter-spacing: -0.04em; }
.gone-page .job-meta { margin-top: 20px; font-size: 16px; color: var(--muted); }
.gone-page .gone-note { margin: 20px 0 0; padding: 18px 22px; border-radius: 16px; font-size: 17px; line-height: 1.5; font-weight: 600; }
.gone-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.gone-actions .btn { height: 52px; padding: 0 28px; border-radius: 999px; font-weight: 700; }
.gone-actions .btn-outline { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.gone-actions .btn-outline:hover { background: var(--hover); color: var(--ink); }
.more-pay { font-size: 14px; font-weight: 700; color: var(--ink); }
.more-card .badges { align-items: center; flex-wrap: wrap; }
@media (min-width: 900px) {
  .gone-page { padding-top: 24px; }
  .more-pay { padding: 2px 8px; border-radius: 6px; background: var(--chip); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
}
@media (max-width: 899px) {
  .gone-page .job-company { display: flex; }
  .gone-page h1 { margin-top: 18px; font-size: 44px; }
  .gone-page .job-meta { margin-top: 12px; font-size: 15px; }
  .gone-page .gone-note { margin-top: 18px; font-size: 16px; }
  .gone-actions { flex-direction: column; margin-top: 18px; }
  .gone-actions .btn { width: 100%; box-sizing: border-box; }
  .gone-page .more { margin-top: 28px; }
  .more-card .badges { display: block; }
  .more-card .badge { display: none; }
  .route-gone .site-footer { display: none; }
}

/* On a phone a group's page has "‹ Explore" in the header where the logo would be (as on the Category boards). */
.brand-back { display: none; }
@media (max-width: 639px) {
  .has-back .brand { display: none; }
  .brand-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--primary); font-weight: 700; text-decoration: none; }
  .brand-back::before { content: ''; flex: none; width: 9px; height: 9px; margin: 0 8px 0 4px; border-left: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: rotate(45deg); }
  .gone-page { padding-top: 8px; }
}

/* Company pages (/companies/<name>/) and the weekly page (/weekly/), after the Company and Weekly boards. */
.co-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 32px; margin-top: 12px; }
.co-main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.co-logo { width: 64px; height: 64px; border-radius: 16px; font-size: 28px; }
.static-page .co-main h1 { margin: 0; font-size: clamp(40px, 6vw, 80px); line-height: 0.98; letter-spacing: -0.045em; }
.static-page .co-main .lede { margin: 0; max-width: 62ch; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.co-head .company-facts { flex: 0 1 380px; min-width: min(300px, 100%); max-width: none; margin: 0; padding: 8px 28px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 28px; background: var(--card); }
.co-head .company-facts > div { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 0; font-size: 15px; }
.co-head .company-facts > div:first-child { border-top: 0; }
.co-head .company-facts dd { font-weight: 700; }
.co-page .static-list { margin-top: 40px; }
.cat-band-saffron { background: var(--india-bg); }
.cat-band-saffron .cat-eyebrow { color: var(--india-ink); }
.static-page .cat-band-saffron h1 { color: var(--ink); max-width: 11ch; }
.static-page .cat-band-saffron .lede { max-width: 420px; color: var(--ink-2); }
.weekly-page .digest-intro { margin-top: 20px; font-size: 15px; color: var(--muted); }
.weekly-page .digest-intro a { color: inherit; text-decoration: underline; }
.weekly-page .static-list { margin-top: 28px; }
@media (max-width: 639px) {
  .co-head { flex-direction: column; flex-wrap: nowrap; gap: 18px; margin-top: 4px; }
  .co-main { flex: none; width: 100%; gap: 18px; }
  .co-logo { width: 56px; height: 56px; border-radius: 14px; font-size: 24px; }
  .static-page .co-main h1 { font-size: 42px; }
  .static-page .co-main .lede { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  .co-head .company-facts { flex: none; width: 100%; padding: 4px 18px; border-radius: 20px; }
  .co-head .company-facts > div { padding: 13px 0; font-size: 14.5px; }
  .co-page .static-list { margin-top: 18px; }
  .weekly-page .digest-intro { margin-top: 4px; font-size: 14px; }
  .weekly-page .static-list { margin-top: 12px; }
}

/* The "not found" screen (the site's 404 page, and the app's screen for a removed job with no similar jobs), after the Not found
   boards: a huge 404, the title, a line of text and two pill buttons (stacked on a phone). */
.nf-page { padding-top: 72px; padding-bottom: 72px; }
.nf-code { margin: 0; font: 800 clamp(96px, 16vw, 200px)/0.85 var(--display); letter-spacing: -0.06em; color: var(--primary); }
.static-page.nf-page h1 { margin: 22px 0 0; max-width: 720px; font-size: clamp(36px, 5vw, 60px); line-height: 1; letter-spacing: -0.04em; font-weight: 800; }
.static-page.nf-page .lede { margin: 22px 0 0; max-width: 720px; font-size: 20px; line-height: 1.5; color: var(--ink-2); }
.nf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.nf-actions .btn { height: 56px; padding: 0 30px; border-radius: 999px; background: var(--inv); color: #F2F8F6; font-size: 17px; font-weight: 700; }
.nf-actions .btn:hover { background: var(--inv); color: #F2F8F6; filter: brightness(1.15); }
.nf-actions .btn-outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.nf-actions .btn-outline:hover { background: var(--hover); color: var(--ink); filter: none; }
@media (max-width: 639px) {
  .nf-page { padding-top: 32px; padding-bottom: 32px; }
  .nf-code { font-size: 120px; }
  .static-page.nf-page h1 { margin-top: 18px; font-size: 40px; }
  .static-page.nf-page .lede { margin-top: 18px; font-size: 17px; }
  .nf-actions { flex-direction: column; margin-top: 18px; }
  .nf-actions .btn { width: 100%; height: 54px; box-sizing: border-box; font-size: 16px; }
}

/* Install app and light or dark are icons in the header at every width (like the bell: a download arrow, and a moon, or a sun while it
   is dark), so the footer does not repeat them. */
.header-tool { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; }
.header-tool::before { content: ''; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.header-tool:hover { background: var(--hover); }
.install-tool.header-tool { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E"); }
.theme-toggle.header-tool { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 019.5 4 8 8 0 1020 14.5z'/%3E%3C/svg%3E"); }
.theme-toggle.header-tool[data-mode="dark"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.header-tool[hidden] { display: none; }
.header-acts { gap: 4px; }
.header-tool:not([hidden]) { display: grid; }
/* Beside the nav and the pill, from 900px up to 1100px, the header is tight: Sources is in the footer there. */
@media (max-width: 1099px) { .nl-sources { display: none; } .nl { padding: 0 10px; } }

/* The gutter and the footer, as on the boards: pages have 32px at each side from 640px (the boards' 32px), and the footer is the name
   and the links on one line under a rule inside the page's width, with room above it. */
@media (min-width: 640px) { .wrap { padding-left: 32px; padding-right: 32px; } }
.site-footer { margin-top: 0; border-top: 0; }
.site-footer .wrap { padding-top: 40px; padding-bottom: 40px; }
.footer-row { padding-top: 32px; border-top: 1px solid var(--edge-strong); }
.footer-links { gap: 8px 20px; color: var(--muted); }
@media (min-width: 900px) { .site-footer .wrap { padding-top: 96px; } }

/* The footer on a phone, after the Mobile Home board: a rule, then the links one under another, underlined, with no name. */
@media (max-width: 639px) {
  .site-footer .wrap { padding-top: 24px; padding-bottom: 28px; }
  .footer-brand { display: none; }
  .footer-row { padding-top: 24px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
  .footer-links { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; font-size: 14px; }
  .footer-links a { display: flex; align-items: center; min-height: 32px; text-align: left; }
}

/* The weekly page's closing card (the board's "Get this list every week"): the text on the left, the button, or a small email form, on
   the right; stacked on a phone. */
.digest-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 56px; padding: 32px 36px; border: 1px solid var(--line); border-radius: 28px; background: var(--card); }
.digest-card > div { max-width: 560px; }
.static-page .digest-card h2 { margin: 0; font: 800 28px var(--display); letter-spacing: -0.025em; }
.digest-card p { margin: 6px 0 0; font-size: 16px; color: var(--muted); }
.digest-card .btn, .digest-form .btn { height: 52px; padding: 0 28px; border-radius: 999px; font-weight: 700; }
.digest-form { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 1 460px; }
.digest-form input[type="email"] { flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge-strong); font: 500 16px var(--body); }
.digest-form input[type="email"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 639px) {
  .digest-card { flex-direction: column; align-items: stretch; margin-top: 28px; padding: 22px; border-radius: 24px; gap: 14px; }
  .static-page .digest-card h2 { font-size: 24px; }
  .digest-card p { font-size: 15px; }
  .digest-card .btn, .digest-form .btn { width: 100%; box-sizing: border-box; }
  .digest-form { flex-direction: column; flex-basis: auto; }
  .digest-form input[type="email"] { flex: none; width: 100%; box-sizing: border-box; }
}

/* The Application kit (Tailor my application), after the Tailor boards: cards for the keywords, the checks and the cover note draft. */
.tailor-kit { margin-top: 28px; padding: 0; border-radius: 0; background: none; }
.tailor-kit > .section-title { margin: 0; font: 800 clamp(28px, 4vw, 40px)/1.05 var(--display); letter-spacing: -0.03em; }
.tailor-kit > .note { margin: 10px 0 0; max-width: 64ch; font-size: 16px; color: var(--muted); }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; align-items: start; margin-top: 24px; }
.kit-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 28px; background: var(--card); box-sizing: border-box; }
.kit-card h4 { margin: 0; font: 800 24px var(--display); letter-spacing: -0.02em; }
.kit-card .note { margin: 0; font-size: 14px; color: var(--muted); }
.kit-wide { grid-column: 1 / -1; }

/* The Tailor page (#/tailor/<id>), after the Tailor boards: the heading with the job it is for, the kit, then Apply and Save to my tracker. */
.tailor-page { padding-top: 8px; padding-bottom: 40px; }
.tailor-head { display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: flex-end; justify-content: space-between; margin-top: 12px; }
.tailor-head h1 { margin: 0; max-width: 12ch; font: 800 clamp(40px, 6vw, 76px)/0.98 var(--display); letter-spacing: -0.045em; }
.tailor-job { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: inherit; text-decoration: none; }
.tailor-job .mono { flex: none; width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
.tailor-job > span { display: flex; flex-direction: column; min-width: 0; }
.tailor-job span span { font-size: 14px; color: var(--muted); }
.tailor-page .tailor-kit { margin-top: 20px; }
.tailor-page .kit-grid { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); } /* two cards across, as on the board */
.tailor-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tailor-actions .btn { min-height: 52px; padding: 0 28px; }
@media (max-width: 639px) {
  .tailor-head h1 { font-size: 40px; letter-spacing: -0.045em; }
  .tailor-head { gap: 16px; }
  .tailor-job { padding: 14px; border-radius: 18px; }
  .tailor-actions { flex-direction: column; }
  .tailor-actions .btn { justify-content: center; }
}
.kit-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kit-label { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.kit-keywords { gap: 8px; }
.kit-keywords li { padding: 5px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.kit-keywords .kw-have { background: var(--ok-bg); color: var(--ok-ink); outline: 0; }
.kit-keywords .kw-miss { background: var(--warn-bg); color: var(--warn-ink); outline: 0; }
.kit-line p { font-size: 17px; line-height: 1.4; }
.kit-copy { height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 15px; font-weight: 600; }
.kit-checks { list-style: none; margin: 0; padding: 0; gap: 0; }
.kit-checks li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.kit-checks li:first-child { border-top: 0; padding-top: 4px; }
.kit-state { flex: none; min-width: 64px; padding: 3px 0; border-radius: 8px; background: var(--sel); color: var(--info-ink); font-size: 13px; font-weight: 700; text-align: center; }
.kit-warn .kit-state { background: var(--warn-bg); color: var(--warn-ink); }
.kit-warn { color: inherit; }
.kit-note { display: block; width: 100%; margin: 0; padding: 18px; box-sizing: border-box; border: 0; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--edge-strong); font: 500 16px/1.6 var(--body); resize: vertical; }
.kit-prompt { margin-top: 16px; }
@media (max-width: 639px) {
  .tailor-kit > .section-title { font-size: 30px; }
  .tailor-kit > .note { font-size: 14.5px; }
  .kit-grid { gap: 16px; margin-top: 16px; }
  .kit-card { padding: 20px; border-radius: 24px; gap: 14px; }
  .kit-card h4 { font-size: 22px; }
  .kit-label { font-size: 12px; margin-bottom: 8px; }
  .kit-keywords li { font-size: 13.5px; padding: 5px 11px; }
  .kit-line p { font-size: 16px; }
  .kit-checks li { gap: 12px; padding: 12px 0; font-size: 15px; }
  .kit-state { min-width: 56px; font-size: 12px; }
  .kit-note { padding: 14px; border-radius: 12px; }
}

/* Job alerts page (the Alerts boards): three ways to hear about new jobs, the weekly email card, the feed addresses. */
.alerts-page .hub-head h1 { max-width: 11ch; }
.alerts-page .hub-head .lede { max-width: 520px; font-size: 19px; line-height: 1.55; }
.alerts-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.alerts-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.static-page .alerts-card h2 { margin: 0; font: 800 26px/1.1 var(--display); letter-spacing: -0.025em; }
.alerts-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.alerts-card .alerts-note { margin-top: auto; padding-top: 14px; font-size: 14px; color: var(--muted); }
.alerts-status { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.alerts-status.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
.alerts-status.is-warn { background: var(--warn-bg); color: var(--warn-ink); }
.alerts-weekly { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 40px; border-radius: 32px; background: #0F766E; color: #fff; }
.alerts-weekly > div { max-width: 520px; }
.static-page .alerts-weekly h2 { margin: 0; font: 800 40px/1.02 var(--display); letter-spacing: -0.035em; color: #fff; }
.alerts-weekly p { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: #EAF8F5; }
.alerts-weekly p a { color: inherit; text-decoration: underline; }
.alerts-form { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 1 460px; }
.alerts-form input[type="email"] { flex: 1 1 220px; min-width: 0; height: 52px; box-sizing: border-box; padding: 0 16px; border: 0; border-radius: 14px; background: var(--card); color: var(--ink); font: 500 16px var(--sans, inherit); }
.alerts-weekly .btn { height: 52px; padding: 0 28px; border-radius: 14px; border: 0; background: var(--inv); color: #fff; font-weight: 700; }
.alerts-feeds { margin-top: 56px; }
.static-page .alerts-feeds h2 { margin: 0; font: 800 30px/1.1 var(--display); letter-spacing: -0.03em; }
.alerts-feeds > p { margin: 8px 0 0; color: var(--muted); }
.alerts-feed-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 24px 0 0; padding: 0; list-style: none; }
.alerts-feed-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.alerts-feed-list li > div { min-width: 0; }
.alerts-feed-list p { margin: 0; }
.alerts-feed-name { font-weight: 700; }
.alerts-feed-path { margin-top: 2px !important; font: 13.5px ui-monospace, Menlo, monospace; color: var(--muted); overflow-wrap: anywhere; }
.alerts-feed-list .btn { height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--ink); box-shadow: none; background: var(--card); color: var(--ink); white-space: nowrap; }
.alerts-feed-list .btn:hover { background: var(--hover, var(--outline-hover)); color: var(--ink); }
@media (max-width: 899px) {
  .alerts-channels { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
}
@media (max-width: 639px) {
  .alerts-page .hub-head h1 { font-size: 44px; max-width: none; }
  .alerts-page .hub-head .lede { font-size: 16px; }
  .alerts-card { padding: 22px; border-radius: 24px; }
  .static-page .alerts-card h2 { font-size: 24px; }
  .alerts-weekly { gap: 14px; margin-top: 14px; padding: 24px 20px; border-radius: 28px; }
  .static-page .alerts-weekly h2 { font-size: 30px; }
  .alerts-weekly p { font-size: 15px; }
  .alerts-form { flex-direction: column; flex: 1 1 100%; }
  .alerts-form input[type="email"] { flex: none; }
  .alerts-weekly .btn { width: 100%; }
  .alerts-feeds { margin-top: 32px; }
  .alerts-feeds > p { display: none; }
  .static-page .alerts-feeds h2 { font-size: 22px; }
  .alerts-feed-list { gap: 10px; margin-top: 14px; }
  .alerts-feed-list li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 16px; }
  .alerts-feed-list .btn { min-height: 44px; padding: 0 18px; }
}

/* Feedback and Report pages: the boards' two columns, the words on the left and the form in a card on the right. */
.msg-layout { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.msg-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.msg-page .hub-head h1 { max-width: 10ch; }
.msg-page .hub-head .lede { max-width: 44ch; font-size: 19px; line-height: 1.55; }
.msg-facts { display: flex; flex-direction: column; gap: 12px; max-width: 44ch; margin: 8px 0 0; padding: 0; list-style: none; }
.msg-facts li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.msg-facts li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.msg-aside { margin: 0; max-width: 44ch; font-size: 15px; color: var(--muted); }
.msg-form { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; padding: 32px; border: 1px solid var(--line); border-radius: 28px; background: var(--card); }
.msg-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.msg-label { padding: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.msg-hint { font-size: 13.5px; color: var(--muted); }
.msg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.msg-chip, .msg-star { position: relative; display: inline-flex; }
.msg-chip input, .msg-star input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.msg-chip span, .msg-star span { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1.5px solid var(--edge-strong); background: var(--card); color: var(--ink); font-weight: 600; }
.msg-chip span { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; }
.msg-star span { width: 48px; height: 48px; border-radius: 12px; font-size: 17px; font-weight: 700; }
.msg-chip input:checked + span, .msg-star input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.msg-chip input:focus-visible + span, .msg-star input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.msg-form input[type="text"], .msg-form input[type="email"], .msg-form select, .msg-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--edge-strong); border-radius: 12px; background: var(--card); color: var(--ink); font: 500 16px/1.5 var(--body); }
.msg-form input[type="text"], .msg-form input[type="email"], .msg-form select { height: 52px; padding: 0 14px; }
.msg-form textarea { padding: 14px; resize: vertical; }
.msg-form .btn-block { height: 56px; border-radius: 14px; font-size: 17px; font-weight: 700; }
.msg-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.msg-sent { margin: 24px 0 0; padding: 14px 18px; border-radius: 14px; background: var(--ok-bg); color: var(--ok-ink); font-size: 15px; }
.msg-sent a { color: inherit; text-decoration: underline; }
@media (max-width: 639px) {
  .msg-layout { gap: 24px; }
  .msg-page .hub-head h1 { font-size: 44px; max-width: none; }
  .msg-page .hub-head .lede { font-size: 16px; }
  .msg-form { padding: 20px; border-radius: 24px; gap: 16px; }
}

/* A matched job's score ("49%") is wider than a logo tile, so the first column grows to hold it instead of touching the title. */
.row:has(.row-score) { grid-template-columns: 56px minmax(0, 1fr); }
@media (min-width: 1100px) { .row:has(.row-score) { grid-template-columns: 64px minmax(0, 1fr) auto; } }
@media (max-width: 639px) { .row:has(.row-score) { grid-template-columns: 52px minmax(0, 1fr); } }