/* CanWork — styled after radius.earendil.com's design system.

   The ethos: a narrow centred document column, serif body text at 16px/1.5,
   hairline rulework instead of boxes or fills, classic underlined blue links,
   and tables that escape the text measure to use the full viewport. Values
   below are taken from the reference's computed styles rather than guessed.

   Two deliberate departures, because this is a job board rather than a
   documentation site and emulating the ethos must not cost usability:
   - The results table breaks out to the viewport but keeps fixed column
     proportions and tabular figures, so six columns stay scannable.
   - Status tags stay distinct (level/source/remote/unavailable) but carry
     their difference in text colour rather than pill backgrounds, which the
     reference has no idiom for. */

:root {
  /* Reference palette (radius.earendil.com styles.css :root). */
  --page: #ffffff;
  --copy: #202124;
  --muted: #5f6368;
  --border: #c7c7c7;
  --rule: #e0e0e0;
  --link: #0645ad;
  --error: #9c1c1c;
  --success: #176b32;
  --notice: #f4f4f4;
  --rule-strong: #8f8f8f;
  --accent: #e80000;

  /* Font stacks are resolution lists, not downloads: we ship no webfonts, so
     the browser uses the first family the visitor actually has installed.
     The reference self-hosts Plantin MT Pro (commercial) and Commit Mono
     (OFL); Georgia is its own declared serif fallback and carries the layout
     here, and mono stays a system stack. */
  --font-serif: "Plantin MT Pro", "Plantin MT Std", Plantin, Georgia, serif;
  --font-mono: "Commit Mono", "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;

  /* The reference's text measure: min(100% - 2rem, 52rem). */
  --measure: 52rem;
  /* Width the results table breaks out to. Fixed so the six columns keep
     their proportions instead of stretching with the viewport. */
  --table-width: 72rem;
}

* { box-sizing: border-box; }

html {
  font-size: 100%;
  line-height: 1.5;
  color: var(--copy);
  background: var(--page);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--copy);
  font-family: var(--font-serif);
  -webkit-text-size-adjust: 100%;
}

/* The one column everything shares. */
.wrap {
  width: min(100% - 2rem, var(--measure));
  margin-inline: auto;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
a:hover { text-decoration-thickness: 0.13em; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

::selection { background: #cfe0f7; }

h1, h2, h3, h4 { line-height: 1.2; margin-block: 1.5rem 0.65rem; }
h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.75rem); }

p, ul, ol, dl, pre, table { margin-block: 0.75rem 1rem; }

hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2rem; }

code, pre { font-family: var(--font-mono); background: var(--notice); }
code { padding: 0.1rem 0.2rem; font-size: 0.875em; }

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

/* ---------- header: breadcrumb bar ---------- */

.site-header {
  width: min(100% - 2rem, var(--measure));
  margin-inline: auto;
  padding-top: 1.5rem;
}

.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-bottom: 2rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; min-width: 0; }

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--copy);
  text-decoration: none;
}
.wordmark:hover .wordmark-text { text-decoration: underline; text-underline-offset: 0.12em; }
.wordmark .accent { color: var(--accent); }

/* The reference sets its breadcrumb mark to 1em, inline with the type. */
.leaf { fill: var(--accent); width: 1em; height: 1em; flex: none; }
.wordmark .leaf { align-self: center; }

/* The crumb path: logo / section, with the reference's "/" separators. */
.tagline {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.tagline::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--muted);
}
.tagline br { display: none; }

.site-nav { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.875rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--copy); text-decoration: underline; }

/* ---------- hero ---------- */

main { padding-bottom: 3rem; }

.hero h1 {
  margin: 0 0 0.65rem;
  color: var(--copy);
  font-weight: 700;
}

.hero-lede {
  margin: 0;
  max-width: 38rem;
  color: var(--copy);
  font-size: 1rem;
}

/* ---------- search + filters ---------- */

.search-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }

#f-search {
  flex: 1 1 22rem;
  min-width: 0;
}

#f-search,
.select-row select {
  min-height: 1.65rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: none;
  color: var(--copy);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.2;
}


.btn-find {
  flex: 0 0 auto;
  appearance: none;
  min-height: 1.65rem;
  padding: 0.15rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--notice);
  color: var(--copy);
  font: inherit;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.btn-find:hover { background: #ececec; }

.select-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.select-row select { width: 100%; min-width: 0; cursor: pointer; }

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  color: var(--copy);
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}
.filter-toggle input { width: 1rem; height: 1rem; margin: 0; cursor: pointer; }

/* ---------- stat sections: labels over hairline rules, no boxes ---------- */

/* Two columns, so the fourth section ("Top location") starts a new row in the
   first column rather than leaving an indent in a multi-column flow. */
.side-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-content: start;
  margin-top: 2.5rem;
}

.panel h2 {
  margin: 0 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--copy);
}

.fact-list { margin: 0; }

.fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--rule);
}
.fact dt { color: var(--muted); font-size: 0.875rem; white-space: nowrap; }
.fact dd {
  margin: 0;
  color: var(--copy);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Only the accent colour survives from the old design; the reference reserves
   saturated colour for links and errors. */
.fact dd.fact-hot { color: var(--error); }

.level-list { margin: 0; padding: 0; list-style: none; }
.level-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
}
.level-list .level-count {
  color: var(--copy);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.panel-place { margin: 0 0 0.25rem; color: var(--copy); font-weight: 700; font-size: 0.9375rem; }
.panel-note { margin: 0; color: var(--muted); font-size: 0.875rem; }
.panel-link { margin: 0.6rem 0 0; font-size: 0.875rem; }

/* A reset is navigation, not a control, so it reads as a link beside the
   button rather than as a second button competing for the click. */
.btn-reset {
  align-self: center;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ---------- summary pages: label over figure over hairline rule ---------- */

.stat-grid {
  display: grid;
  /* Four tracks at the 52rem measure (4 x 11rem + 3 x 1.5rem = 48.5rem), so
     the summary reads as one row instead of orphaning its fourth figure. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.5rem;
  margin-block: 1.5rem 2rem;
}

.stat { border-top: 1px solid var(--border); padding-top: 0.5rem; }

.stat dt {
  color: var(--muted);
  font-size: 0.875rem;
}

.stat dd {
  margin: 0.15rem 0 0;
  color: var(--copy);
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat-note { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.875rem; }

/* The reference breaks its data tables out of the text measure; these stay
   inside it, because three columns have no need of the extra room. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.data-table th { border-bottom-color: var(--rule-strong); white-space: nowrap; }
.data-table th:first-child,
.data-table td:first-child { padding-inline-start: 0; }
.data-table th:last-child,
.data-table td:last-child { padding-inline-end: 0; }
.data-table td { color: var(--muted); }
.data-table td:first-child { color: var(--copy); }
.data-table .num { text-align: right; }

/* The home table is read-only, so its pager is a link plus a position label
   rather than a run of page buttons. */
.pager-position { color: var(--muted); }

/* ---------- results ---------- */

.results { margin-top: 3rem; }

.results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.results-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--copy);
}

.results-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.5rem 1rem;
}
.showing { color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* Pagination uses the reference's button idiom, not bare links: page numbers
   are the one place a bordered control genuinely aids scanning. */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.875rem; }
.pager button {
  appearance: none;
  min-height: 1.65rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--notice);
  color: var(--link);
  font: inherit;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: pointer;
}
.pager button:hover:not(:disabled) { background: #ececec; }
.pager button:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.pager .pager-current { color: var(--copy); font-weight: 700; }
.pager .pager-ellipsis { color: var(--muted); }

/* Table escapes the text measure, as the reference's .data-table-breakout
   does, so six columns get room while the prose above stays at 52rem. */
.table-scroll {
  position: relative;
  inset-inline-start: 50%;
  width: max-content;
  min-width: 100%;
  max-width: calc(100vw - 2rem);
  transform: translateX(-50%);
  overflow-x: auto;
  /* Scroll shadows marking the overflow edges. */
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) right center,
    linear-gradient(to right, rgba(32, 33, 36, 0.1), transparent) left center,
    linear-gradient(to left, rgba(32, 33, 36, 0.1), transparent) right center;
  background-attachment: local, local, scroll, scroll;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.875rem 100%, 0.875rem 100%;
}

.jobs-table {
  width: var(--table-width);
  min-width: var(--table-width);
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.jobs-table th:nth-child(1) { width: 22%; }
.jobs-table th:nth-child(2) { width: 16%; }
.jobs-table th:nth-child(3) { width: 13%; }
.jobs-table th:nth-child(4) { width: 19%; }
.jobs-table th:nth-child(5) { width: 23%; }
.jobs-table th:nth-child(6) { width: 7%; }

.jobs-table th,
.jobs-table td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.jobs-table th:first-child,
.jobs-table td:first-child { padding-inline-start: 0; }
.jobs-table th:last-child,
.jobs-table td:last-child { padding-inline-end: 0; }

.jobs-table th {
  background: none;
  color: var(--copy);
  font-weight: 700;
  white-space: nowrap;
  vertical-align: bottom;
  border-bottom-color: var(--rule-strong);
}

.jobs-table td {
  color: var(--muted);
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* Salary and posted-age are short fixed-shape values: wrapping them across
   lines (as the en-dash separator invites) reads worse than widening the
   columns, so they stay on one line. `overflow-wrap: anywhere` from the rule
   above would otherwise let a long figure break mid-number. */
.cell-salary {
  color: var(--copy);
  white-space: nowrap;
  overflow-wrap: normal;
}
.cell-posted { white-space: nowrap; }

/* The reference renders identifier columns in mono; the job title is ours. */
.job-title {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.job-title:hover { text-decoration-thickness: 0.13em; }

/* Tags read as inline metadata. Separation is spacing alone: a rendered
   separator glyph would be orphaned at the start of a line when a tag wraps. */
.tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; }
.tag {
  display: inline;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.875rem;
}
.tag-level { color: var(--copy); }
.tag-source { font-family: var(--font-mono); font-size: 0.8125rem; }
.tag-remote { color: var(--success); }
.tag-unavailable { color: var(--error); }

.jobs-table tr.unavailable .job-title { color: var(--muted); }
.jobs-table tr.unavailable .cell-salary { color: var(--muted); }

.table-message { padding: 0.75rem 0; color: var(--muted); font-size: 1rem; }

/* ---------- footer ---------- */

.site-footer {
  width: min(100% - 2rem, var(--measure));
  margin-inline: auto;
  margin-top: auto;
  padding-block: 3rem 1.5rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* The under-construction banner ships as a GIF (public/construction.gif),
   matching the reference pixel-for-pixel. */
.construction-sign { display: flex; justify-content: center; margin-bottom: 1.5rem; }

/* The banner is a fixed-ratio bitmap: cap it at its intrinsic width and let it
   shrink on narrow viewports without upscaling or distorting. */
.construction-sign img { display: block; width: 100%; max-width: 459px; height: auto; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--copy); text-decoration: underline; }

.copyright { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.875rem; }

/* ---------- detail page ---------- */

.detail {
  padding: 0;
  background: none;
  border: 0;
}
.detail h2 { margin: 0 0 0.25rem; font-size: clamp(1.5rem, 3vw, 1.75rem); color: var(--copy); }
.detail .sub { color: var(--muted); font-size: 1rem; margin-bottom: 0.75rem; }
.detail .desc {
  white-space: pre-wrap;
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--copy);
}
.detail .salary { color: var(--copy); font-weight: 700; font-variant-numeric: tabular-nums; }
.detail .chips { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; }
.detail .detail-actions {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.detail .back { display: inline-block; margin-top: 1.5rem; font-size: 0.875rem; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  /* Six columns can no longer sit side by side. Each job becomes a stacked
     block, so the breakout frame is unwound first — otherwise its
     `width: max-content` would fight the block layout below. */
  .table-scroll {
    position: static;
    inset-inline-start: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    transform: none;
    overflow-x: visible;
    background: none;
  }

  .jobs-table { width: auto; min-width: 0; }

  .jobs-table,
  .jobs-table tbody,
  .jobs-table tr,
  .jobs-table td { display: block; }

  .jobs-table thead { display: none; }

  .jobs-table tr {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
  }

  .jobs-table td {
    padding: 0;
    border: 0;
    overflow-wrap: normal;
  }

  .jobs-table td.cell-title { margin-bottom: 0.2rem; }

  /* Qualified so these beat the `.jobs-table td` block rule above: the
     metadata cells then flow onto one wrapped line. */
  .jobs-table td.cell-company,
  .jobs-table td.cell-location,
  .jobs-table td.cell-salary,
  .jobs-table td.cell-posted { display: inline; }

  .jobs-table td.cell-company::after,
  .jobs-table td.cell-location::after { content: " · "; color: var(--border); }

  .tags { margin-top: 0.35rem; }
}

@media (max-width: 560px) {
  /* Two stat columns stop fitting once a label and its value plus the figure
     collide ("Total postings 15Not specified 12"), so they stack. */
  .side-panels { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .results-meta { justify-content: flex-start; }

  /* The reference's 26px controls are pointer-sized; on touch they fall below
     the 44px target minimum, so grow the interactive ones here. */
  #f-search,
  .select-row select,
  .btn-find,
  .pager button { min-height: 2.75rem; }
  .filter-toggle { min-height: 2.75rem; }
  .filter-toggle input { width: 1.25rem; height: 1.25rem; }
}