/* ==========================================================================
   mcprush — jobs.css
   Page styles for careers.html and job.html and nothing else. Everything
   structural comes from core.css and views.css; what is here is the handful
   of shapes a careers section needs — the facet bar, the openings table, the
   "we do not do this" list and the two-column role page. Every colour is a
   token, so the dark theme costs nothing.
   ========================================================================== */

/* ---------- 1. the opening block -----------------------------------------
   Four blocks in one grid: the lede, the rest of the essay, the fact card and
   the openings. On a desktop it reads as prose left / facts right / list
   beneath. The grid exists so the phone can reorder the same four blocks
   without a second copy of any of them — see the 1000px rule below. */
.jb-fold {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: 48px;
  align-items: start;
  padding-top: 4px;
}
.jb-fold > * { min-width: 0; }
.jb-lede    { grid-column: 1; grid-row: 1; }
.jb-story   { grid-column: 1; grid-row: 2; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.jb-facts   { grid-column: 2; grid-row: 1 / span 2; }
.jb-openings{ grid-column: 1 / -1; grid-row: 3; padding-top: 48px; }

.jb-p { font-size: 15.5px; line-height: 1.66; color: var(--ink-2); margin-top: 15px; max-width: 76ch; }
.jb-p.lead-in { font-size: 17.5px; line-height: 1.58; color: var(--ink); letter-spacing: -.012em; }
.jb-p b { color: var(--ink); font-weight: 600; }

/* ---------- 2. the facet bar ---------------------------------------------
   Three rows, one per facet, each a label and a wrapped row of toggles that
   carry their own count. Counts are computed against the OTHER facets, so a
   number on a button is the number of openings you would actually get by
   pressing it — a count that ignores the rest of the form is a lie the reader
   finds out about one click later. */
.jb-filters { margin-bottom: 8px; }
/* the summary doubles as the card's head, so an open panel and a closed one
   are the same object rather than two different-looking things */
.jb-fsum {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  list-style: none; cursor: pointer;
  border-radius: var(--r3) var(--r3) 0 0;
}
.jb-fsum::-webkit-details-marker { display: none; }
.jb-fsum:hover { background: var(--surface-2); }
.jb-fchev { color: var(--ink-3); transition: transform .16s; }
.jb-filters[open] .jb-fsum { border-bottom: 1px solid var(--line); border-radius: var(--r3) var(--r3) 0 0; }
.jb-filters[open] .jb-fchev { transform: rotate(180deg); }
.jb-facet {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 13px 0;
  border-top: 1px dashed var(--line);
}
.jb-facet:first-child { border-top: 0; padding-top: 4px; }
.jb-facet > .spec { padding-top: 10px; }
.jb-opts { display: flex; flex-wrap: wrap; gap: 8px; }
/* the count rides inside the button rather than beside it, so a wrapped row
   never orphans a number onto the next line */
.jb-opt .n {
  font: 500 11px/1 var(--mono);
  color: var(--ink-3);
  margin-left: 3px;
}
.jb-opt.on .n { color: var(--accent); opacity: .75; }
/* an option that would return nothing is dimmed rather than disabled — the
   empty state is a real state and reaching it must stay possible */
.jb-opt[data-zero]:not(.on) { color: var(--ink-3); }

/* the count line under the bar */
.jb-count {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 0 6px;
}

/* ---------- 3. the openings table ----------------------------------------
   A grid rather than a <table>: the first cell carries two lines of prose and
   the rest carry values, which is a shape a table row fights. Below 1080px
   the columns stack and each value picks up the label the header row was
   carrying, so nothing side-scrolls and nothing loses its name. */
.jb-list { border-top: 1px solid var(--line-2); }
.jb-head,
.jb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 92px 236px;
  gap: 22px;
}
.jb-head {
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  font: 500 11px/1 var(--mono);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3);
}
.jb-row {
  align-items: start;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.jb-row > * { min-width: 0; }
a.jb-row:hover { background: var(--surface-2); }
a.jb-row:hover .jb-title { color: var(--accent); }
.jb-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.018em;
  transition: color .12s;
}
.jb-title .go { color: var(--ink-3); transition: transform .15s; }
a.jb-row:hover .jb-title .go { transform: translateX(3px); color: var(--accent); }
.jb-one { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin-top: 6px; max-width: 66ch; }
.jb-cl {
  display: none;
  font: 500 12px/1.5 var(--mono);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3);
}
.jb-cv { display: block; font-size: 13.5px; }
.jb-cv.num { font-size: 12.5px; }
.jb-sub { display: block; font-size: 12px; line-height: 1.45; color: var(--ink-3); margin-top: 4px; }

/* ---------- 4. what we do not do -----------------------------------------
   The one list on the page that is an argument rather than a description, so
   it gets a mark of its own: a struck square in the risk tint, which is the
   only place on either page that colour appears. */
.jb-nots { display: block; }
.jb-not { display: flex; gap: 13px; padding: 15px 0; border-top: 1px solid var(--line); }
.jb-not:first-child { border-top: 0; padding-top: 2px; }
.jb-not .x {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--risk-soft); border: 1px solid var(--risk-line); color: var(--risk);
}
.jb-not .x svg { width: 13px; height: 13px; }
.jb-not b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.012em; margin-bottom: 4px; }
.jb-not p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); max-width: 80ch; }

/* ---------- 5. prose lists ------------------------------------------------
   The same square tick .spec uses. The "not asking for" variant drops to a
   grey mark: the list is not a warning, it is permission to apply anyway. */
.jb-ul { display: flex; flex-direction: column; gap: 11px; }
.jb-ul li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px; line-height: 1.62;
  color: var(--ink-2);
  max-width: 82ch;
}
.jb-ul li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 1px;
  background: var(--accent-line);
}
.jb-ul.no li::before { background: var(--line-2); }
.jb-ul b { color: var(--ink); font-weight: 600; }

/* ---------- 6. practices --------------------------------------------------
   Three columns of hairline-separated notes. Each is one practice and one
   consequence; the number in each is the point of it. */
.jb-prac { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.jb-prac > div {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.jb-prac > div:nth-child(-n+3) { border-top: 0; padding-top: 2px; }
.jb-prac h4 { font-size: 14.5px; margin-bottom: 6px; }
.jb-prac p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- 7. the role page ---------------------------------------------- */
.jb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 328px;
  gap: 36px;
  align-items: start;
  padding-bottom: 56px;
}
.jb-layout > * { min-width: 0; }
.jb-side { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: 14px; }
.jb-sec { padding-top: 34px; }
.jb-sec:first-child { padding-top: 0; }
.jb-sec > .spec { display: flex; }
.jb-sec h2 { margin-top: 11px; }
.jb-sec > p { font-size: 14px; line-height: 1.66; color: var(--ink-2); margin-top: 11px; max-width: 84ch; }
.jb-rule { height: 1px; background: var(--line); border: 0; margin-top: 34px; }

/* the badge strip under the role title */
.jb-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- 8. prev / next ------------------------------------------------ */
.jb-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.jb-nav > * { min-width: 0; }
.jb-nav a {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r3);
  background: var(--surface);
  transition: border-color .14s, box-shadow .14s;
}
.jb-nav a:hover { border-color: var(--line-2); box-shadow: var(--sh1); }
.jb-nav .d { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.jb-nav .t { font-size: 15px; font-weight: 600; letter-spacing: -.018em; margin-top: 9px; }
.jb-nav .m { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.jb-nav a.nx { text-align: right; }

/* ---------- 9. responsive ------------------------------------------------- */
@media (max-width: 1180px) {
  .jb-fold { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 34px; }
  .jb-layout { grid-template-columns: minmax(0, 1fr) 296px; gap: 28px; }
}

@media (max-width: 1080px) {
  /* the header row was the only thing naming these values, so each value takes
     its own label the moment the columns stop existing */
  .jb-head { display: none; }
  .jb-row { grid-template-columns: 1fr; gap: 0; padding: 17px 2px 19px; }
  .jb-c { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; align-items: baseline; margin-top: 7px; }
  .jb-c:nth-of-type(2) { margin-top: 13px; }
  .jb-cl { display: block; }
  .jb-one { max-width: none; }
}

@media (max-width: 1000px) {
  /* The reorder. A single column reading: the lede, then the ten openings,
     then the rest of the essay and the fact card. Nothing is duplicated and
     nothing is hidden — the list simply stops being three screens down. */
  .jb-fold { display: flex; flex-direction: column; }
  .jb-lede     { order: 1; }
  .jb-openings { order: 2; padding-top: 34px; }
  .jb-story    { order: 3; margin-top: 34px; }
  .jb-facts    { order: 4; margin-top: 20px; }

  .jb-prac { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
  .jb-prac > div:nth-child(3) { border-top: 1px solid var(--line); padding-top: 16px; }

  /* On a phone the summary — where it is, what it pays, and the button — is
     what the reader came for, and behind six sections of prose it is three
     screens down. It moves above them; the sticky rail stops being sticky
     because it is no longer a rail. */
  .jb-layout { grid-template-columns: 1fr; gap: 26px; }
  .jb-side { position: static; order: -1; }
}

/* 760 rather than the ladder's 720 because jobs.js closes the filter panel at
   exactly this width — matchMedia('(max-width: 760px)') — and a panel that
   collapses at one width while its facets are still laid out for another is
   two designs. What is here is layout only; the control sizes belong to the
   phone block below, where the shared scale is. */
@media (max-width: 760px) {
  .jb-facet { grid-template-columns: 1fr; gap: 9px; padding: 14px 0; }
  .jb-facet > .spec { padding-top: 0; }
  .jb-prac { grid-template-columns: 1fr; }
  .jb-prac > div:nth-child(2) { border-top: 1px solid var(--line); padding-top: 16px; }
}

@media (max-width: 620px) {
  .jb-p.lead-in { font-size: 16.5px; }

  /* The chips are the page's main control and there are thirteen of them, so
     they take the toolbar step the whole site uses for a filter chip — the 34px
     core.css gives .seg button and a.tag, and the same height as the blog's tag
     row. At 44 they were the tallest control on a page whose Apply button is
     40, and four wrapped rows of them cost a third of a screen. */
  .jb-opt { height: 34px; padding: 0 12px; }
  /* the disclosure that holds them is a control too, and 46px is the top of the
     ladder — the height core.css gives .btn-lg. Its hint is a gloss on a closed
     panel and reads "Team, seniority, time zone" until a facet is set, at which
     point it is "2 filters set"; at 320 the gloss wrapped and took the row to
     64px, so it is held to the one line the row is. */
  .jb-fsum { min-height: 46px; padding-block: 11px; }
  .jb-fsum > .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jb-nav { grid-template-columns: 1fr; }
  .jb-nav a.nx { text-align: left; }

  /* Two columns of values rather than four stacked rows: team and level are
     three words between them and each was taking a whole line. The label goes
     above the value — 86px of label column is a quarter of a 360px screen. */
  .jb-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .jb-role { grid-column: 1 / -1; }
  .jb-c { grid-template-columns: 1fr; gap: 3px; margin-top: 12px; }
  .jb-c:nth-of-type(2), .jb-c:nth-of-type(3) { margin-top: 14px; }
  .jb-c:nth-of-type(4), .jb-c:nth-of-type(5) { grid-column: 1 / -1; }

  .jb-title { font-size: 16px; }
  .jb-sec { padding-top: 28px; }
}

/* The rail card's action moved to the top of the card: at 1512×800 the fixed
   role switcher sits over the bottom-right corner, which is exactly where a
   sticky sidebar puts its primary button. Nothing may cover Apply. */
.jb-side > .card { display: flex; flex-direction: column; }
.jb-side > .card > .card-head { order: -2; }
.jb-side > .card > .card-foot {
  order: -1;
  border-top: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
}