/* where-is-everybody.css: /where-is-everybody/ only.

   Loaded last, after platform.css, theme-oxford.css, module-page.css,
   content.css, blocks.css and module-common.css. Every rule is scoped to
   .page-wie (set as $body_class alongside .page-mod) so nothing here leaks to
   the other module pages.

   The page already gets its pain grid, point bar, module cards and closing
   band from module-common.css, which is what .page-mod buys. Only what is
   genuinely specific to this page is below, and that is almost entirely one
   component.

   The subject is a count. Not a dashboard, not a chart, not a map with pins
   drawn on it in CSS pretending to be a map: a headcount, of the kind that
   gets written on a gate sheet and read out at a muster point. So the one
   bespoke device on the page is a tally, and the design work is spent on the
   numerals rather than on a container. Tabular figures, right aligned, hairline
   rules between rows, and the labels deliberately quiet so the eye lands on
   the digits in the order the argument needs: planned, scanned, missing.

   The four site colours are the only saturated colour on the page and they
   are the one place colour is doing real work, because the product itself
   colours each project. They are pitched as drawing-office colours (Oxford
   blue, oxide red, slate green, ochre) rather than as a chart palette, and
   they never carry meaning on their own: every row is named, and every count
   is set in --ink, so nothing here depends on telling two hues apart.
   ────────────────────────────────────────────────────────────────────────── */


/* ══ 1. HERO ══════════════════════════════════════════════════════════════ */

/* The hero runs on platform.css untouched: the standard split and photo slot.
   The sub is two clauses and wants to break after the first. */
.page-wie .pf-hero .sub { max-width: 46ch; }

/* The photograph is scaffold across five lifts, shot straight on, and the
   people are in the middle band. The hero slot crops to roughly a square, so
   the crop is centred rather than pulled down off the sky. */
.page-wie .pf-hero-media img { object-position: 50% 46%; }


/* ══ 2. THE PAIN GRID ═════════════════════════════════════════════════════ */

/* Two columns inside the split, same as /tv-board/ and /advanced-estimating/:
   at three columns a fifteen-word cell is five short lines and reads as a
   list of fragments rather than as six observations. */
@media (min-width: 901px) {
  .page-wie .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ══ 3. THE TALLY ═════════════════════════════════════════════════════════ */

/* The one bespoke component. It sits in the .sec-media column of a .pin-split,
   which content.css already makes sticky on a wide viewport, so it holds
   beside all three paragraphs of the argument rather than scrolling away after
   the first.

   No shadow and no radius beyond the single hairline frame. The device is a
   sheet of paper with numbers on it, and a floating rounded card with a soft
   shadow would be the one thing on this page that came from somewhere other
   than the subject. */
.page-wie .wie-tally {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 0;
  font-variant-numeric: tabular-nums;
}

/* The header is the only tinted band, and it carries the two things that make
   the illustration legible as a moment rather than a total: a time, and how
   many sites were live when it was taken. */
.page-wie .wie-tally-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in oklab, var(--hazard) 5%, var(--paper));
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.page-wie .wie-tally-hd span {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-mute);
}

/* The three headline rows. The label is set small and quiet on the left; the
   digit is the largest thing in the component. Hierarchy is carried by size
   and weight together, so the rows still rank correctly with colour removed. */
.page-wie .wie-tally-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule-soft);
}
.page-wie .wie-tally-row em {
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--ink-2);
}
.page-wie .wie-tally-row b {
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--ink-mute);
}

/* Scanned is the number the page is about, so it is the one set in the accent
   and at full size. Missing is the number the reader should act on, so it is
   set in ink at the same size: darker than the accent rather than louder than
   it, which is the right relationship between the two. Red was tried and
   rejected: --bad means an error elsewhere on this site, and seven people who
   have not scanned yet at ten past eight is not an error. */
.page-wie .wie-tally-row.is-live b { color: var(--hazard); }
.page-wie .wie-tally-row.is-gap {
  border-bottom-color: var(--rule);
  background: color-mix(in oklab, var(--hazard) 3%, var(--paper));
}
.page-wie .wie-tally-row.is-gap em { color: var(--ink); font-weight: 500; }
.page-wie .wie-tally-row.is-gap b { color: var(--ink); }

/* The site breakdown. Deliberately a step down in every respect: smaller
   figures, tighter rows, no rules between them. It is the working underneath
   the three numbers above, and it should read as such at a glance. The four
   counts add to the scanned figure on purpose. */
.page-wie .wie-tally-sites {
  padding: 16px 20px 18px;
  border-bottom: 1px solid var(--rule);
}
.page-wie .wie-site {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.page-wie .wie-site::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wie-c, var(--hazard));
}
.page-wie .wie-site em {
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-wie .wie-site b {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
}

/* Drawing-office colours rather than a chart palette: Oxford blue as it is
   used everywhere else on the site, then oxide red, slate green and ochre.
   Each is only ever a 10px dot beside a named site, so none of them has to
   carry text contrast. */
.page-wie .wie-site[data-c="a"] { --wie-c: var(--hazard); }
.page-wie .wie-site[data-c="b"] { --wie-c: oklch(0.50 0.13 35); }
.page-wie .wie-site[data-c="c"] { --wie-c: oklch(0.48 0.07 165); }
.page-wie .wie-site[data-c="d"] { --wie-c: oklch(0.60 0.11 80); }

/* The one sentence the device exists to deliver. Same treatment as the
   .ae-snap-out line on /advanced-estimating/, so the two bespoke devices on
   the site resolve the same way. */
.page-wie .wie-tally-out {
  margin: 0;
  padding: 18px 20px;
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}
.page-wie .wie-tally-out b { color: var(--ink); font-weight: 700; }

/* Caption. The site's convention for a hand-drawn device is to say plainly
   that it is one, so this is styled to be read rather than to be skipped. */
.page-wie .wie-cap {
  margin-top: 14px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-mute);
}

@media (max-width: 900px) {
  .page-wie .wie-tally-row { padding: 16px; }
  .page-wie .wie-tally-hd,
  .page-wie .wie-tally-sites,
  .page-wie .wie-tally-out { padding-left: 16px; padding-right: 16px; }
  /* The site name is the thing that truncates first on a narrow screen, and a
     truncated site name is a useless row. Let it wrap instead. */
  .page-wie .wie-site em { white-space: normal; }
}


/* ══ 4. THE TELEVISION SECTION ════════════════════════════════════════════ */

/* The room, not the screen. Full width under the mechanics rows, with the
   caption doing the work a mocked-up television would have done dishonestly. */
.page-wie .wie-room {
  margin: clamp(40px, 4.5vw, 64px) 0 0;
}
.page-wie .wie-room img {
  width: 100%;
  height: clamp(220px, 26vw, 380px);
  object-fit: cover;
  object-position: 50% 55%;
  display: block;
}
.page-wie .wie-room figcaption {
  margin-top: 14px;
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-mute);
  text-wrap: pretty;
}


/* ══ 5. THE ICO NOTE ══════════════════════════════════════════════════════ */

/* Sits under the four numbered steps and qualifies all of them, so it is
   indented to the step body's column rather than to the section, and ruled off
   above so it reads as a footnote to the list instead of a fifth step. */
.page-wie .wie-note {
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  max-width: 76ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-mute);
  text-wrap: pretty;
}


/* ══ 6. FAQ AND CLOSING BAND ══════════════════════════════════════════════ */

/* Eight questions against a short sticky heading column, so the section would
   otherwise end on a band of empty paper below the last answer. */
.page-wie #faq .faq-list { padding-bottom: 0; }
.page-wie #faq { padding-bottom: clamp(72px, 8vw, 112px); }


/* ══ 7. INLINE LINKS IN THE MECHANICS AND STEPS ═══════════════════════════

   Neither .ub-mech-row nor .ub-steps-body had ever carried an inline link
   before this page: /tv-board/, /holiday-planner/ and /advanced-estimating/
   put their cross links in the FAQ answers and the action bands instead. So
   blocks.css styles neither, and a link dropped into one inherits the
   paragraph's own colour with no underline, which makes it invisible rather
   than merely quiet. Measured on the live page before this rule existed: the
   link and its parent both computed to oklch(0.34 0 0), text-decoration none.

   The treatment is the site's existing one for prose links, lifted from
   .art-body p a in insights.css rather than invented here, so a cross link on
   a module page and a cross link in an article behave identically: ink text,
   600 weight, an Oxford blue rule under it, inverting on hover. Scoped to
   .page-wie because fixing it for the other pages is a change to blocks.css
   and wants its own pass rather than one smuggled in from a page build.

   The note under the numbered steps is grey by design, so its link takes the
   same underline but keeps the surrounding colour: it is a citation, not a
   route on to the next thing worth reading. */
.page-wie .ub-mech-row p a,
.page-wie .ub-steps-body p a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1.5px solid var(--hazard);
}
.page-wie .ub-mech-row p a:hover,
.page-wie .ub-steps-body p a:hover {
  background: var(--hazard);
  color: var(--hazard-ink);
  border-bottom-color: var(--hazard);
}
.page-wie .wie-note a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--hazard);
}
.page-wie .wie-note a:hover { color: var(--ink); }