/* ================================================================
   INTERNAL RECRUITMENT CONSOLE: the Claude Design, ported exactly
   ----------------------------------------------------------------
   Source: design-source/Internal Recruitment Console.dc.html, fetched from the
   design project 2026-07-28. Every value here was read out of that file. The
   full transcription is kept alongside it in design-source/CONSOLE-SPEC.txt.

   LOADS AFTER css/dc-base.css, which carries what this page shares with the
   rest of the ported project: the tokens, the page ground, the fonts, the ten
   keyframes, .lift, the .ijb button family, the overlay scrim and card, and the
   mobile bottom sheet. Only this page's own decisions are here.

   THIS PAGE IS NOT THE SHAPE OF INTERNAL OPPORTUNITIES. That page is a 1180px
   centred reading column with three KPI tiles. This one is a three column
   working suite:

       .suite   248px  |  minmax(0,1fr)  |  320px
                nav       the work          context

   FOUR THINGS THAT WOULD OTHERWISE HAVE BEEN GOT WRONG, all caught by reading
   the design rather than assuming:

   1. THE PAGE WIDTH IS NOT ON <main>. <main> carries `min-width:0` and nothing
      else, because it is only the middle column of the grid. The shell
      measurements, max-width:1560px and padding:18px 20px 70px, sit on the
      div that wraps the whole suite. Hanging them on <main> would centre the
      middle column inside its own track and leave the two rails adrift.

   2. THE PIPELINE IS NOT A KANBAN. There are no per-stage columns and no cards
      nested inside stages. It is two things stacked: a horizontally scrolling
      rail of stage buttons (#ir-filmstrip), and below it one flat table of
      candidates whose rows are grid rows, not cards.

   3. THE MODALS HAVE NO CLOSE BUTTON. Not one of the seven carries an X. They
      are dismissed by their own actions, and by Escape. Only the review drawer
      has a close control. Adding an X to the modals would be inventing chrome
      the design deliberately does not have.

   4. THE KPI DECK IS CONDITIONAL. Five tiles, and they render only in
      Secretary General full mode. In Head of Operations admissions mode the
      deck is absent, because four of the five numbers are not that officer's
      business.
   ================================================================ */

/* ── The page shell ────────────────────────────────────────────────────
   On the wrapper, NOT on <main>. See note 1 above. */
.ir-shell { padding:18px 20px 70px; max-width:1560px; margin:0 auto; }

/* ── The three column suite ────────────────────────────────────────── */
.suite { display:grid; grid-template-columns:248px minmax(0,1fr) 320px; gap:16px; align-items:start; }
/* <main> is a grid track and nothing more. min-width:0 stops a wide table
   inside it from inflating the track: a grid item defaults to min-width:auto,
   so min-content would win over the 1fr and push the rails off screen. */
.suite > main { min-width:0; }
.railwrap { animation:sbIn .45s var(--ij-ease) both; }
.ctxrail  { animation:wgIn .5s var(--ij-ease) .1s both; }

/* The recurring glass surface. This exact declaration set appears four times in
   the design, so it is named once here. */
.ir-panel {
  border:1px solid var(--ij-line); border-radius:16px; padding:14px;
  background:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 42%, rgba(255,255,255,.09));
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
}

/* ── The left module rail ──────────────────────────────────────────── */
.ir-nav { display:flex; flex-direction:column; gap:4px; }
.ir-nav-item {
  display:flex; align-items:center; gap:11px; min-height:44px; padding:0 12px;
  white-space:nowrap; border:1px solid transparent; border-radius:11px; background:transparent;
  color:var(--ij-body); font-family:'DM Sans', sans-serif; font-size:13px; cursor:pointer;
  text-align:left;
}
.ir-nav-item:hover { background:rgba(255,255,255,.06) !important; color:var(--ij-ink) !important; }
.ir-nav-item[data-active="true"] {
  background:rgba(212,175,55,.16) !important;
  border-color:var(--ij-gold-b) !important;
  color:var(--ij-ink) !important;
}
.ir-nav-item[data-active="true"] i { color:var(--ij-gold) !important; }
.ir-nav-item > i { width:15px; flex:0 0 auto; font-size:12.5px; text-align:center; }
.ir-nav-k { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px;
  letter-spacing:2.2px; text-transform:uppercase; color:var(--ij-body);
  padding:0 2px 8px; }
/* A count on a module, so an officer sees where the work is without opening it. */
.ir-nav-n { margin-left:auto; font-family:'IBM Plex Mono', ui-monospace, monospace;
  padding:2px 7px; border:1px solid var(--ij-line2); border-radius:999px; font-size:10px; }

/* ── THE MODE STRIP: rules removed 2026-07-29 ────────────────────────
   .ir-modes / .ir-mtabs / .mtab styled the design's "Viewing as" toggle. The
   toggle is a design REVIEW affordance ("mode switch, design review affordance"
   in the design's own source) and no longer ships: an officer sees the one view
   their authority gives them, and the two views live in the two places that
   belong to the two officers. See internal-recruitment.html for the full reason.
   The rules are deleted rather than left dead so nobody re-adds the markup
   because the styling is still lying around. */

/* ── The KPI deck. FIVE tiles, and only in full mode. ──────────────── */
.kdeck { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; }
.ir-kpi {
  position:relative; overflow:hidden; text-align:left;
  border:1px solid var(--ij-line2); border-radius:14px; padding:14px;
  background:var(--ij-fill); color:var(--ij-ink); cursor:pointer;
  animation:scIn .45s var(--ij-ease) both;
}
.ir-kpi:nth-child(1) { animation-delay:.04s } .ir-kpi:nth-child(2) { animation-delay:.08s }
.ir-kpi:nth-child(3) { animation-delay:.12s } .ir-kpi:nth-child(4) { animation-delay:.16s }
.ir-kpi:nth-child(5) { animation-delay:.20s }
.ir-kpi-k { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px;
  letter-spacing:1.8px; text-transform:uppercase; color:var(--ij-body); line-height:1.4; }
.ir-kpi-v { font-family:'Cinzel', serif; margin-top:8px; font-size:27px; font-weight:700; }
.ir-kpi-s { margin-top:2px; font-size:12.5px; color:var(--ij-body); }
/* One tone per question, exactly as the design assigns them. Red is what is
   waiting on admission, gold is what is waiting on the reader. */
.ir-kpi[data-tone="red"]   { border-color:rgba(255,72,72,.45);  background:rgba(255,72,72,.10); }
.ir-kpi[data-tone="red"]   .ir-kpi-v { color:var(--ij-red); }
.ir-kpi[data-tone="gold"]  { border-color:rgba(240,200,50,.4);  background:rgba(212,175,55,.12); }
.ir-kpi[data-tone="gold"]  .ir-kpi-v { color:var(--ij-gold); }
.ir-kpi[data-tone="blue"]  { border-color:rgba(85,136,255,.4);  background:rgba(85,136,255,.10); }
.ir-kpi[data-tone="blue"]  .ir-kpi-v { color:var(--ij-blue); }
.ir-kpi[data-tone="green"] { border-color:rgba(76,214,87,.4);   background:rgba(76,214,87,.10); }
.ir-kpi[data-tone="green"] .ir-kpi-v { color:var(--ij-green); }

/* ── The stage filmstrip ───────────────────────────────────────────────
   A horizontally scrolling rail of stages, each with its own count. Not a
   kanban: nothing is nested inside a stage. See note 2. */
.ir-sec { margin-top:16px; animation:cvIn .38s var(--ij-ease) both; }
#ir-filmstrip { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
#ir-filmstrip::-webkit-scrollbar { display:none; }
.ir-fstep {
  flex:0 0 auto; min-width:126px; text-align:left; padding:12px;
  border:1px solid var(--ij-line2); border-radius:12px; background:var(--ij-fill);
  color:var(--ij-ink); cursor:pointer;
}
.ir-fstep-k { font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:9px; letter-spacing:1.6px; color:var(--ij-muted); }
.ir-fstep-v { font-family:'Cinzel', serif; margin-top:6px; font-size:20px; font-weight:700; }
.ir-fstep-n { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:5px;
  font-size:10px; line-height:1.4; letter-spacing:.8px; color:var(--ij-body); }
.ir-fstep[data-tone="gold"]  { border-color:var(--ij-gold-b); background:rgba(212,175,55,.12); }
.ir-fstep[data-tone="gold"]  .ir-fstep-v { color:var(--ij-gold); }
.ir-fstep[data-tone="amber"] { border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.12); }
.ir-fstep[data-tone="amber"] .ir-fstep-v { color:var(--ij-amber); }
.ir-fstep[data-tone="green"] { border-color:rgba(76,214,87,.4); background:rgba(76,214,87,.10); }
.ir-fstep[data-tone="green"] .ir-fstep-v { color:var(--ij-green); }
.ir-fstep[data-tone="red"]   { border-color:rgba(255,72,72,.45); background:rgba(255,72,72,.10); }
.ir-fstep[data-tone="red"]   .ir-fstep-v { color:var(--ij-red); }
.ir-fstep[data-active="true"] { border-color:var(--ij-gold); }
/* The hairline that separates the ten live stages from the three outcomes. An
   outcome is not a stage a candidate is travelling towards. */
.ir-fdiv { flex:0 0 auto; width:1px; margin:0 6px; background:var(--ij-line2); }

/* ── The candidate table ───────────────────────────────────────────────
   Six columns, and .tblhead and .tblrow MUST carry the same template or the
   headings stop describing the cells under them. */
.ir-table {
  margin-top:16px; border:1px solid var(--ij-line); border-radius:16px; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(255,255,255,.08));
}
.tblhead, .tblrow { display:grid; grid-template-columns:1.4fr 1.2fr 1fr .8fr 1.4fr auto; gap:12px; }
.tblhead {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  padding:13px 16px; border-bottom:1px solid var(--ij-soft);
  font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--ij-body);
}
.tblrow { align-items:center; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.tblrow:last-child { border-bottom:0; }
.tblrow > div { min-width:0; }
.ir-cand   { font-size:13.5px; font-weight:600; word-break:break-word; line-height:1.3; }
.ir-cand-s { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:3px;
  font-size:10.5px; color:var(--ij-body); }
.ir-target { font-size:13px; color:var(--ij-body); word-break:break-word; }
.ir-next   { font-size:13px; color:var(--ij-body); line-height:1.4; }
/* The stage chip. Gold when it is waiting on the reader, amber when it is
   waiting on somebody else: the officer can see their own queue at a glance. */
.ir-chip {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  padding:5px 9px; border:1px solid rgba(245,158,11,.45); background:rgba(245,158,11,.12);
  border-radius:999px; font-size:10px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ij-amber); white-space:nowrap;
}
.ir-chip[data-mine="1"] { border-color:var(--ij-gold-b); background:rgba(212,175,55,.12);
  color:var(--ij-gold); }
/* Ageing, against the service standard for the stage. */
.ir-days { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12.5px; color:var(--ij-body); }
.ir-days[data-age="due"]  { color:var(--ij-amber); }
.ir-days[data-age="over"] { color:var(--ij-red); }
.ir-open {
  width:44px; height:44px; flex:0 0 auto; border:1px solid var(--ij-gold-b); border-radius:11px;
  background:rgba(212,175,55,.12); color:var(--ij-gold); cursor:pointer; font-size:12px;
}

/* ── The two-up and three-up blocks the design uses inside panels ──── */
.g2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.g3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }

/* ── The review drawer ─────────────────────────────────────────────────
   A drawer and not a modal, because the reader works through a list and needs
   the pipeline still visible behind it. It is the ONLY surface on this page
   with a close control. */
.drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(620px, 94vw); z-index:680;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  border-left:1px solid var(--ij-line); background:var(--ij-card);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.7);
  animation:drIn .38s var(--ij-ease) both;
  padding:22px;
}
/* Its own scrim, so the page behind stays legible rather than blacked out. */
.drawer-scrim {
  position:fixed; inset:0; z-index:670; background:rgba(0,0,0,.66);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:fadeIn .25s var(--ij-ease) both;
}
#ir-drawer-close {
  width:40px; height:40px; border:1px solid var(--ij-line2); border-radius:10px;
  background:var(--ij-fill); color:var(--ij-ink); cursor:pointer;
}

/* The drawer's vertical stage rail. Bigger dots than the member-facing rail,
   because this one carries a tick on every completed stage. */
#ird-stage-rail { display:flex; flex-direction:column; gap:0; margin-top:11px; }
.ird-step { display:flex; gap:12px; }
.ird-dots { display:flex; flex-direction:column; align-items:center; flex:0 0 auto; }
.ird-dot {
  width:22px; height:22px; border-radius:50%; border:2px solid var(--ij-line2);
  background:transparent; display:flex; align-items:center; justify-content:center;
}
.ird-dot > i { font-size:9px; color:#0c1109; }
.ird-line { flex:1 1 auto; width:2px; min-height:16px; background:var(--ij-soft); }
.ird-lbl { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11px;
  line-height:1.4; color:var(--ij-muted); padding-bottom:14px; }
.ird-step[data-state="done"] .ird-dot  { border-color:var(--ij-green); background:var(--ij-green); }
.ird-step[data-state="done"] .ird-line { background:rgba(76,214,87,.5); }
.ird-step[data-state="done"] .ird-lbl  { color:var(--ij-body); }
.ird-step[data-state="here"] .ird-dot  { border-color:var(--ij-gold); background:var(--ij-gold); }
.ird-step[data-state="here"] .ird-lbl  { color:var(--ij-ink); }

.ir-k { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px;
  letter-spacing:2px; text-transform:uppercase; color:var(--ij-body); }
.ir-eyebrow { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10px;
  letter-spacing:2px; text-transform:uppercase; color:var(--ij-gold); }
.ir-h { font-family:'Cinzel', serif; margin:9px 0 0; font-size:22px; line-height:1.26; font-weight:700; }
.ir-sub { margin-top:6px; font-size:13.5px; color:var(--ij-body); }
.ir-body { margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--ij-body); }

/* ── Overlays: seven of them, each at its own width ────────────────────
   The scrim and the card come from dc-base.css. What differs per overlay is its
   width, and for two of them its emphasis.

   NO CLOSE BUTTON ON ANY OF THEM. See note 3. */
#ir-admit-modal       .modal-card { max-width:min(560px, calc(100vw - 24px)); }
#ir-notprogress-modal .modal-card { max-width:min(640px, calc(100vw - 24px));
  border-left:3px solid var(--ij-red); }
#ir-interview-modal   .modal-card { max-width:min(660px, calc(100vw - 24px)); }
#ir-outcome-modal     .modal-card { max-width:min(620px, calc(100vw - 24px)); }
/* Terms and Appointment are bordered in GOLD because they commit the
   organisation: one sets what the member is being offered, the other changes
   the org structure. */
#ir-terms-modal   .modal-card { max-width:min(680px, calc(100vw - 24px));
  border-color:rgba(240,200,50,.4); }
#ir-appoint-modal .modal-card { max-width:min(700px, calc(100vw - 24px));
  border-color:rgba(240,200,50,.4); }
/* And the appointment dialog darkens its own scrim further. It is the one
   action on this page that rewrites the organisation's structure, so the design
   asks for the page behind it to recede more than usual. */
#ir-appoint-modal { background:rgba(0,0,0,.76);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
/* The confirm sits ABOVE the dialog that raised it, which is the one place this
   page stacks. z-index 740 against 720. */
#ir-confirm-modal { z-index:740; }
#ir-confirm-modal .modal-card { max-width:min(500px, calc(100vw - 24px)); }
#ir-admit-modal, #ir-notprogress-modal, #ir-interview-modal,
#ir-outcome-modal, #ir-terms-modal, #ir-appoint-modal { z-index:720; }

/* The appointment diff: what this appointment vacates and what it fills. The
   organisation's structure changes here, so it is shown before it is agreed and
   never merely described. */
#ira-diff-table { display:flex; flex-direction:column; gap:8px; margin-top:9px; }
.ira-diff {
  display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start;
  padding:12px 13px; border:1px solid var(--ij-soft); border-radius:12px;
  background:var(--ij-fill3);
}
.ira-diff[data-kind="vacates"] { border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.10); }
.ira-diff[data-kind="fills"]   { border-color:rgba(76,214,87,.45);  background:rgba(76,214,87,.10); }
.ira-diff > i { margin-top:2px; font-size:12px; }
.ira-diff[data-kind="vacates"] > i { color:var(--ij-amber); }
.ira-diff[data-kind="fills"]   > i { color:var(--ij-green); }
.ira-diff-t { font-size:13.5px; }
.ira-diff-s { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:3px;
  font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ij-body); }

/* A row of people who will be told, shown before the notice goes out rather
   than after, so the officer can see who is about to hear about this. */
#ira-notify-list { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.ira-who {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  padding:5px 10px; border:1px solid var(--ij-line2); border-radius:999px;
  font-size:10.5px; letter-spacing:1.2px; color:var(--ij-body);
}

/* ── Empty states and loading ──────────────────────────────────────── */
.md-empty {
  display:flex; flex-direction:column; align-items:center; gap:11px;
  padding:44px 20px; border:1px dashed var(--ij-line2); border-radius:16px; text-align:center;
}
.md-empty > i { font-size:22px; color:var(--ij-muted); }
.md-empty-t { font-size:14px; color:var(--ij-body); max-width:44ch; }
.md-empty-s { font-size:13px; color:var(--ij-muted); max-width:44ch; }
.ir-skel { height:64px; border:1px solid var(--ij-soft); border-radius:12px;
  background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04));
  background-size:380px 100%; animation:shim 1.25s linear infinite; }

/* ── Fields, for the seven dialogs ─────────────────────────────────── */
.ir-field { margin-top:16px; }
.ir-label { display:block; font-size:12.5px; line-height:1.5; color:var(--ij-ink); }
.ir-help  { margin:4px 0 0; font-size:13px; color:var(--ij-body); }
.gi {
  width:100%; min-height:46px; padding:0 13px; margin-top:9px;
  border:1px solid var(--ij-line2); border-radius:12px; background:var(--ij-fill);
  color:var(--ij-ink); font-family:'DM Sans', sans-serif; font-size:14px; outline:none;
}
.gi-ta { min-height:0; padding:12px 13px; line-height:1.6; resize:vertical; }
.gi:focus { border-color:var(--ij-gold-b); }
select.gi { padding-right:34px; cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, rgba(242,247,238,.62) 50%),
                   linear-gradient(135deg, rgba(242,247,238,.62) 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
select.gi option { background:#111a0e; color:var(--ij-ink); }
.ir-acts { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE: the design's own five breakpoints, in its own order
   1280 / 1100 / 820 / 760 / 640
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:1280px) {
  .kdeck { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:1100px) {
  /* The suite collapses to one column. The module rail moves ABOVE the work,
     and the context rail is dropped entirely rather than stacked at the bottom
     where nobody would scroll to it. */
  .suite { grid-template-columns:minmax(0,1fr); }
  .railwrap { order:-1; }
  /* THE MODULE STRIP ON A NARROW SCREEN  (reworked 2026-07-29)
     The VP: "internal-recruitment page is not well designed on mobile, I don't
     like that you'll have to click the numbers before something displays, I said
     make sure it is like the internal opportunity page as it appears on mobile."

     So it is now the Internal Opportunities treatment, verbatim: a padded track
     holding the modules, scrolling horizontally, snapping, with the scrollbar
     hidden. Compare #ij-tabs in css/dc-internal-jobs.css, which is the same
     five-pixel padding, six-pixel gap and fourteen-pixel radius.

     Before this the strip was an unpadded flex row of unstyled buttons (the
     class name did not match, see renderNav) so ONE module filled the width and
     the other eight were unreachable except by tapping a KPI figure. */
  .ir-nav {
    display:flex !important; flex-direction:row;
    gap:6px; padding:5px;
    border:1px solid var(--ij-line2); border-radius:14px;
    background:var(--ij-fill);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .ir-nav::-webkit-scrollbar { display:none; }
  /* Each module keeps its own width and never stretches, which is what was
     broken. scroll-margin so a snapped item is not flush against the padding. */
  .ir-nav-item { flex:0 0 auto; scroll-snap-align:start; scroll-margin-left:5px; }
  .ir-nav-k { display:none; }
  .ctxrail { display:none !important; }
}
@media (max-width:820px) {
  .g2, .g3 { grid-template-columns:1fr; }
  .kdeck { grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* The table stops being a table. The headings go, and each row becomes a
     stacked block, because six columns cannot be read at this width. */
  .tblhead { display:none !important; }
  .tblrow { grid-template-columns:1fr !important; gap:8px !important; }
  .tblrow > div { min-width:0; }
  .ir-open { width:100%; }
}
@media (max-width:760px) {
  .drawer { width:100vw; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); }
}
@media (max-width:640px) {
  /* TWO ACROSS, NOT ONE  (2026-07-29). Five full width tiles is roughly 570px of
     figures before any actual work appears, so the queue was below the fold on
     every phone and the page read as though it had nothing on it. Two across puts
     the modules and the first application on the first screen. Internal
     Opportunities has three tiles and can afford one column; this console has
     five and cannot. */
  .kdeck { grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* The odd fifth tile spans the row rather than sitting half empty. */
  .kdeck > :last-child:nth-child(odd) { grid-column:1 / -1; }
  /* THE WORK BEFORE THE EXPLANATION  (2026-07-29)
     .ir-standing explains what the console is for. Useful the first time and
     never again, and on a phone it sat between the figures and the queue, so an
     officer opening the page to clear admissions read a paragraph first. The
     overview becomes a flex column here purely so the explainer can be ordered
     last; at any wider width it stays exactly where the design puts it. */
  #ir-view-overview { display:flex; flex-direction:column; }
  #ir-view-overview > .ir-standing { order:9; }
  .ir-shell { padding:14px 14px 60px; }
  .ir-h { font-size:19px; }
}
/* Below the design's own range. Nothing may overflow the narrowest phone still
   in service at 320px. */
@media (max-width:380px) {
  .ir-fstep { min-width:112px; }
  .ir-kpi-v { font-size:23px; }
}

/* ── LATEST ON THIS PAGE  (2026-07-29) ───────────────────────────────
   Source: #ir-sec-audit in "Internal Recruitment Console.dc.html".

   The design heads this panel with a green dot breathing on a 2.4s cycle and the
   words "Latest on this page". The first port used a clipboard icon and "Recent
   activity", which threw away what the design was communicating: the feed is
   live. It is: watchActivity() in js/internal-recruitment.js holds an onSnapshot
   on the activity subcollection of every open application, so this updates as
   things happen. The dot is a statement of fact, not decoration.

   `blink` is already in css/dc-base.css at the design's own
   0%,100%{opacity:1} 50%{opacity:.3}. */
.ir-feed-h { display:flex; align-items:center; gap:9px; }
.ir-live-dot {
  width:7px; height:7px; flex:0 0 auto; border-radius:50%;
  background:#4cd657;
  animation:blink 2.4s infinite;
}
/* Somebody who has asked for less motion should not be shown a pulsing dot for
   two and a half minutes an hour. It stays green, which still reads as live. */
@media (prefers-reduced-motion:reduce) {
  .ir-live-dot { animation:none; }
}
.ir-feed-k {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:9.5px; letter-spacing:2.2px; text-transform:uppercase;
  color:var(--ij-body);
}

/* The rows: a gold bullet, the line, then when. */
#ir-sec-audit { display:flex; flex-direction:column; gap:11px; margin-top:13px; }
.ir-feed-row { display:flex; gap:10px; }
.ir-feed-dot {
  width:6px; height:6px; margin-top:6px; flex:0 0 auto;
  border-radius:50%; background:var(--ij-gold);
}
.ir-feed-main { min-width:0; }
.ir-feed-row .ir-feed-i {
  font-size:13px; line-height:1.45; color:var(--ij-body);
  text-wrap:pretty; overflow-wrap:anywhere;
}
.ir-feed-row .ir-feed-w {
  margin-top:3px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ij-muted);
}
.ir-feed-empty {
  font-size:13px; line-height:1.5; color:var(--ij-muted); text-wrap:pretty;
}