/* ===========================================================================
   meetowt.com/jobs — the board, and one listing on it. 26 September 2026.

   Loaded after styles.css and site.css, and only by jobs.html. Everything
   here is built from the site's own tokens (--paper, --ink, --rule, --accent
   and the rest), which is what lets the dark block at the foot of this file
   restyle the whole page — header and all — by redefining a dozen of them.

   EVERY CONTROL IS AT LEAST 44 PIXELS TALL: the chips, the fields, the pager,
   the way back, the company's name on a listing. The same rule the app keeps
   (its lib/touchtarget.ts); a board read on a phone is mostly thumbs.

   COLOURS WERE MEASURED BEFORE THEY WERE WRITTEN, the way styles.css records
   its own. Light, on paper #f4f0e6 or a white card: salary green #047857 is
   4.82:1 and 5.48:1, the initials' oxide on their tint 7.7:1. Dark, on
   #17150f or a #201d16 card: ink 15.3:1, soft ink 10.8:1, faint ink 6.96:1,
   the accent 6.68:1, salary green #6ee7b7 10.8:1, the initials 6.9:1.
   =========================================================================== */

:root {
  --jobs-pay: #047857;
}

/* A company's words read in their own direction; this puts each line at the
   side it starts from rather than wherever the box around it was aligned. */
.jobs-board [dir="auto"],
.job [dir="auto"] {
  text-align: start;
}

/* ── The board's head ─────────────────────────────────────────────────── */

.jobs-hero {
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.jobs-board {
  padding: 0 0 clamp(3.5rem, 8vw, 6rem);
}

/* ── Search ───────────────────────────────────────────────────────────── */

.jobs-find {
  display: grid;
  gap: 0.9rem;
  margin: 0 0 1.6rem;
}
.jobs-find__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) auto;
  gap: 0.75rem;
  align-items: end;
}
.jobs-find__field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.jobs-find__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
/* THE EDGE IS --ink-faint, NOT --rule. A field's boundary is a control edge
   and WCAG 1.4.11 asks 3:1 of it; --rule on white is 1.7:1 and would draw a
   box nobody can find — signup.css measured the same thing. */
.jobs-find input,
.jobs-find select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--ink-faint);
  border-radius: 0.9rem;
  background: var(--raised);
  color: var(--ink);
  font: inherit;
  /* SIXTEEN PIXELS AND NOT A PIXEL LESS. Safari on an iPhone zooms the whole
     page into any field set smaller, and leaves it zoomed. */
  font-size: 1rem;
}
.jobs-find__go {
  min-height: 2.75rem;
}

@media (max-width: 40rem) {
  .jobs-find__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .jobs-find__go {
    width: 100%;
  }
}

/* ── Chips: how the work is done, the kind of role, one company ────────── */

.jobs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.jobs-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--ink-faint);
  border-radius: 999px;
  background: var(--raised);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.jobs-chip:hover {
  border-color: var(--ink);
}
/* CHOSEN IS SAID TWICE: by the fill, and by aria-pressed for a screen reader.
   Colour alone would leave one reader in twelve guessing. */
.jobs-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.jobs-chip__n {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.jobs-chip[aria-pressed="true"] .jobs-chip__n {
  color: inherit;
  opacity: 0.8;
}
.jobs-chip__x {
  font-size: 1.1rem;
  line-height: 1;
}

/* ── What the board says, and the way to try again ─────────────────────── */

.jobs-state,
.job__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0 0 1.2rem;
}
.jobs-status {
  margin: 0;
  color: var(--ink-soft);
}
.jobs-status:empty {
  display: none;
}
.jobs-again {
  min-height: 2.75rem;
  padding: 0.5rem 1.2rem;
}

/* ── The cards ────────────────────────────────────────────────────────── */

.jobs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1rem;
}
.jobs-item {
  display: flex;
  min-width: 0;
}
/* THE WHOLE CARD IS THE LINK, so the target is the card rather than a title a
   thumb has to find inside it. Nothing inside it is a control of its own. */
.job-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  padding: 1.25rem 1.3rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: var(--lift-1);
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    border-color 0.2s ease;
}
.job-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
  border-color: var(--ink-faint);
}
.job-card:active {
  transform: none;
}
.job-card:focus-visible {
  outline-offset: 4px;
}
.job-card__org {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.job-card__company {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.job-card__title {
  font-size: 1.3rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.job-card__facts,
.job__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.job-card__fact,
.job__fact {
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.job-card__pay,
.job__pay {
  font-weight: 700;
  color: var(--jobs-pay);
}
.job-card__summary {
  color: var(--ink-soft);
  font-size: 0.96rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.job-card__when {
  margin-top: auto;
  padding-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* A company's logo, only where it agreed to show one, on a plate of its own —
   a logo is drawn for a light page, whatever this page's own ground is. */
.jobs-logo {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--rule);
  border-radius: 0.75rem;
  background: #fff;
  overflow: hidden;
}
.jobs-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.2rem;
}
.jobs-logo--letters {
  background: var(--weak-accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
}

/* ── More pages ───────────────────────────────────────────────────────── */

.jobs-pages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.6rem;
}
.jobs-pages__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid var(--ink-faint);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.jobs-pages__link:hover {
  border-color: var(--ink);
}
.jobs-pages__where {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ── One listing ──────────────────────────────────────────────────────── */

.job {
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(3.5rem, 8vw, 6rem);
}
/* A line length somebody can follow, the same measure .hero--page gives the
   other pages that have no plate beside their headline. */
.job .shell > * {
  max-width: 46rem;
}
.job__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  color: var(--ink-soft);
  font-weight: 600;
  text-decoration: none;
}
.job__back:hover {
  color: var(--ink);
}
.job__head {
  margin: 1rem 0 2.2rem;
}
.job__org {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.job__org .jobs-logo {
  width: 3rem;
  height: 3rem;
}
.job__company {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.job__title {
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  line-height: 1.06;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* Focus is moved here when a listing opens, so a screen reader starts at its
   title; the page region needs no ring for that, the same as main's. */
.job__title:focus {
  outline: none;
}
.job__facts {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}
.job__pay {
  margin: 1rem 0 0;
  font-size: 1.1rem;
}
.job__when {
  margin: 0.8rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.job__when:empty {
  display: none;
}
.job__cta {
  margin-top: 1.6rem;
}
.job__note {
  margin: 1rem 0 0;
  color: var(--ink-soft);
}
.job__text {
  font-size: 1.05rem;
}
.job__text p {
  margin: 0 0 1rem;
}
.job__text ul,
.job__list ul {
  margin: 0 0 1.2rem;
  padding-inline-start: 1.2rem;
}
.job__text li,
.job__list li {
  margin: 0 0 0.45rem;
}
.job__list {
  margin: 2rem 0 0;
}
.job__list h2 {
  margin: 0 0 0.8rem;
  font-size: 1.35rem;
}
.job__list--perks li::marker {
  color: var(--jobs-pay);
}
.job__again {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: var(--lift-1);
}
.job__again p {
  margin: 0;
}

/* ── Dark ─────────────────────────────────────────────────────────────── */

/* THE SITE'S TOKENS, REDEFINED — so the header, the cards and the fields all
   follow without a second copy of any rule. The few colours site.css writes
   as literals (the floating bar's paper, its hover) are answered here by
   name. The footer is already night; it gains a hairline so it does not melt
   into a page of nearly the same colour. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #17150f;
    --paper-deep: #221f17;
    --ink: #f1ece0;
    --ink-soft: #cfc6b3;
    --ink-faint: #a89f8c;
    --rule: #3a352a;
    --rule-soft: #2c281f;
    --accent: #e8814f;
    --accent-ink: #f0a07a;
    --raised: #201d16;
    --surface: #1c1a14;
    --lift-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
    --lift-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 26px rgba(0, 0, 0, 0.45);
    --jobs-pay: #6ee7b7;
  }
  .topbar__inner {
    background: #1f1c15;
    border-color: rgba(255, 255, 255, 0.08);
  }
  .topbar nav a:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  .jobs-logo--letters {
    background: #3b2418;
    color: #f0a07a;
  }
  .site-foot {
    border-top: 1px solid var(--rule);
  }
  ::selection {
    background: #7c2d12;
    color: #fff;
  }
}