/* ── Internal Recruitment console ──────────────────────────────────────
   Two officers use this page. The Head of Operations does exactly one thing:
   admit an application, or not. The Secretary General does everything else.

   THE GOVERNING RULE, and it outranks density:
   ONE DECISION ON SCREEN AT A TIME. The console names the single next action
   as a sentence and offers it as one primary button. Everything else sits
   behind "Other actions". Nothing is rendered for a stage that is not yet
   possible, because a wall of greyed-out buttons is exactly what this page
   exists to avoid. The HR Operations Monitor is a 27,000 line power tool;
   this is deliberately its opposite while doing the same job.

   Ported from the Claude Design prototype
   `logo-and-pagination-fixes 3/project/Internal Recruitment Console.dc.html`,
   with one deliberate removal: the prototype's clickable MODE TOGGLE. Mode is
   an authority boundary, not a view preference, so it is derived from the
   signed-in profile. See the port reconciliation, deviation D-3.
   ──────────────────────────────────────────────────────────────────────── */
:root{
  --gold:#f0c832;--gold2:#f7d94e;--gdim:rgba(212,175,55,.12);--gglow:rgba(212,175,55,.3);
  --green:#4cd657;--red:#ff4848;--blue:#5588ff;--amber:#f59e0b;--violet:#8b5cf6;
  --text:#f2f7ee;--t2:rgba(242,247,238,.88);--t3:rgba(242,247,238,.62);
  --panel:rgba(255,255,255,.10);--panel2:rgba(255,255,255,.23);--border:rgba(255,255,255,.21);
  --void:#0c1109;--deep:#111a0e;--base:#172213;--lift:#1e2e1b;--hdh:70px;
  --disp:'Cinzel',serif;--mono:'IBM Plex Mono',monospace;--body:'DM Sans',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--void);color:var(--text);font-family:var(--body);font-size:14px;}
body{background:
  radial-gradient(140% 90% at 85% -10%, rgba(4,80,30,.30), transparent 55%),
  radial-gradient(120% 80% at 0% 100%, rgba(240,200,50,.07), transparent 55%),
  var(--void);}
#auth-redirect{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--void);
  color:var(--t3);font-family:var(--mono);letter-spacing:2px;font-size:13px;}
#shell{display:none;}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--text);}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px;}
.mono{font-family:var(--mono);}
.u-gold{color:var(--gold);}.u-red{color:var(--red);}.u-green{color:var(--green);}
.u-amber{color:var(--amber);}.u-blue{color:var(--blue);}
.u-hide{display:none !important;}
.u-visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Header. Sticky portal-wide via css/header-command.css. */
#hdr{position:sticky;top:0;height:var(--hdh);background:rgba(15,23,12,.92);z-index:200;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;
  animation:hdrDrop .6s var(--ease) both;}
.hdr-left,.hdr-right{display:flex;align-items:center;gap:12px;min-width:0;}
.hdr-back-btn{display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--t3);font-size:13px;font-weight:600;
  min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--panel);transition:.25s var(--ease);}
.hdr-back-btn:hover{color:var(--text);background:var(--panel2);}
.hdr-back-btn i{color:var(--gold);font-size:12px;}
.brand-logo-wrap{width:42px;height:42px;border-radius:50%;background:#fff;border:1.5px solid var(--gold);
  overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.brand-logo-img{width:100%;height:100%;object-fit:contain;cursor:pointer;}
.brand-logo{font-family:var(--disp);font-weight:900;color:var(--gold);letter-spacing:2px;}
.page-pill{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--t2);background:var(--gdim);border:1px solid var(--gglow);
  padding:8px 13px;border-radius:999px;white-space:nowrap;}
.page-pill i{color:var(--gold);}
/* The mode is stated, never offered. */
.ir-mode{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--t3);
  border:1px solid var(--border);border-radius:999px;padding:7px 12px;white-space:nowrap;}
.hdr-clock{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:13px;color:var(--t2);}
.hdr-clock i{color:var(--green);}
.hdr-clock-tz{color:var(--t3);font-size:13px;letter-spacing:1px;}
.hdr-user-chip{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--border);
  border-radius:999px;padding:5px 14px 5px 6px;min-width:0;}
.hdr-user-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:600;
  color:var(--void);overflow:hidden;flex-shrink:0;}
.hdr-user-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
#hdr-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;}
.hdr-icon-btn{background:var(--panel);border:1px solid var(--border);border-radius:10px;color:var(--t2);
  width:44px;height:44px;cursor:pointer;font-size:13px;transition:.25s var(--ease);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;text-decoration:none;}
.hdr-icon-btn:hover{color:var(--gold);border-color:var(--gglow);}

/* ── Three pane suite, matching My Desk so the two feel like one office ── */
.ir-suite{display:grid;grid-template-columns:248px minmax(0,1fr) 320px;min-height:calc(100vh - var(--hdh));align-items:start;}
.ir-rail{border-right:1px solid var(--border);padding:18px 14px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:var(--hdh);align-self:start;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  animation:sbIn .55s var(--ease) both;}
.ir-rail-crest{display:flex;align-items:center;gap:11px;padding:4px 8px 16px;border-bottom:1px solid var(--border);margin-bottom:8px;}
.ir-rail-seal{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:16px;color:var(--gold);
  background:radial-gradient(circle at 50% 38%,rgba(240,200,50,.22),rgba(240,200,50,.04));
  border:1.5px solid var(--gglow);box-shadow:0 0 0 5px rgba(240,200,50,.05),0 0 26px -6px var(--gglow);flex-shrink:0;}
.ir-rail-of{font-family:var(--mono);font-size:8.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);}
.ir-rail-who{font-family:var(--disp);font-size:15px;font-weight:700;line-height:1.15;}
.ir-nav{display:flex;flex-direction:column;gap:5px;margin-top:12px;}
.ir-nav-i{display:flex;align-items:center;gap:11px;padding:11px;border-radius:10px;border:0;
  border-left:3px solid transparent;background:transparent;color:var(--t2);font-family:var(--body);
  font-size:13px;cursor:pointer;text-align:left;width:100%;min-height:44px;
  transition:background .16s var(--ease),border-color .16s var(--ease);}
.ir-nav-i i{width:16px;text-align:center;color:var(--t3);flex:0 0 auto;}
.ir-nav-i span{flex:1 1 auto;min-width:0;}
.ir-nav-i:hover{background:rgba(240,200,50,.05);}
.ir-nav-i[data-active="true"]{background:linear-gradient(90deg,rgba(240,200,50,.12),transparent 75%);
  border-left-color:var(--gold);color:var(--text);}
.ir-nav-i[data-active="true"] i{color:var(--gold);}
.ir-badge{font-family:var(--mono);font-size:9px;font-weight:800;padding:2px 7px;border-radius:9px;
  background:var(--gold);color:#1a1305;}
.ir-badge.is-over{background:var(--red);color:#fff;}

.ir-main{padding:22px clamp(16px,2.2vw,28px) 60px;min-width:0;}
.ir-sec{border-left:1px solid var(--border);padding:20px 18px;display:flex;flex-direction:column;gap:18px;
  position:sticky;top:var(--hdh);align-self:start;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
  animation:wgIn .6s var(--ease) .12s both;}
.ir-sec-h{font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:8px;margin-bottom:11px;}
.ir-qa{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ir-qa a{display:flex;flex-direction:column;gap:7px;padding:12px;border:1px solid var(--border);border-radius:11px;
  background:rgba(255,255,255,.03);font-size:11px;color:var(--t2);transition:.18s var(--ease);}
.ir-qa a i{color:var(--gold);font-size:15px;}
.ir-qa a:hover{border-color:var(--gglow);background:rgba(240,200,50,.06);}

/* Glass */
.glass{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.20);border-radius:16px;padding:18px 20px;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 42%,var(--panel)),
             linear-gradient(320deg,var(--gdim),transparent 60%);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07);}
.glass-gold{border-color:rgba(212,175,55,.32);border-left:3px solid var(--gold);}
.ir-standing{animation:wgIn .5s var(--ease) both;}
.ir-standing p{margin:9px 0 0;max-width:76ch;font-size:14px;line-height:1.62;color:var(--t2);}
.ir-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);}
.ir-h2{font-family:var(--disp);font-size:17px;font-weight:600;}
.ir-count{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--t2);}
.ir-block{margin-top:18px;}
.ir-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 12px;flex-wrap:wrap;}
.ir-view{animation:cvIn .38s var(--ease) both;}

/* Buttons / fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);
  font-size:13.5px;font-weight:600;border:1px solid var(--border);border-radius:12px;min-height:44px;
  padding:0 16px;cursor:pointer;background:var(--panel);color:var(--text);transition:.25s var(--ease);}
.btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--gglow);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-sm{min-height:38px;font-size:12.5px;padding:0 12px;}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);border-color:var(--gglow);}
.btn-green{background:rgba(76,214,87,.16);color:var(--green);border-color:rgba(76,214,87,.45);}
.btn-red{background:rgba(255,72,72,.16);color:#ff8f8f;border-color:rgba(255,72,72,.5);}
.btn-outline{background:transparent;color:var(--t2);}
.btn-outline:hover{color:var(--gold);}
.btn-full{width:100%;}
.gi{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;color:var(--text);
  font-family:var(--body);font-size:14px;min-height:44px;padding:11px 13px;width:100%;}
.gi:focus{outline:none;border-color:var(--gglow);}
.gi::placeholder{color:var(--t3);}
.gi-ta{resize:vertical;line-height:1.6;min-height:84px;}
select.gi option{background:var(--deep);color:var(--text);}

/* ── KPI deck: each tile is a filter, not just a number ────────────── */
.ir-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:20px;}
.ir-kpi{border:1px solid var(--border);border-top:2px solid var(--gglow);border-radius:14px;padding:14px 15px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));cursor:pointer;text-align:left;
  font-family:var(--body);color:var(--text);animation:scIn .45s var(--ease) both;transition:.25s var(--ease);}
.ir-kpi:hover{transform:translateY(-2px);border-color:var(--gglow);}
.ir-kpi:nth-child(1){animation-delay:.06s}.ir-kpi:nth-child(2){animation-delay:.10s}
.ir-kpi:nth-child(3){animation-delay:.14s}.ir-kpi:nth-child(4){animation-delay:.18s}
.ir-kpi:nth-child(5){animation-delay:.22s}
.ir-kpi-v{font-family:var(--mono);font-size:26px;font-weight:700;line-height:1;}
.ir-kpi-k{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);margin-top:6px;
  font-family:var(--mono);}
.ir-kpi-s{margin-top:5px;font-size:11.5px;color:var(--t2);}
.ir-kpi.is-amber{border-top-color:rgba(245,158,11,.55);}
.ir-kpi.is-red{border-top-color:rgba(255,72,72,.55);}
.ir-kpi.is-blue{border-top-color:rgba(85,136,255,.55);}

/* ── Overview ──────────────────────────────────────────────────────── */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.ir-tile{border:1px solid var(--border);border-radius:14px;padding:14px 15px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 42%,rgba(255,255,255,.08));
  animation:wgIn .45s var(--ease) both;}
.ir-tile-k{font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--t2);}
.ir-tile-v{font-family:var(--disp);margin-top:7px;font-size:26px;font-weight:700;line-height:1;color:var(--gold);}
.ir-tile-s{margin-top:4px;font-size:12.5px;color:var(--t2);}
.ir-wait{display:flex;align-items:center;gap:12px;padding:12px 13px;border:1px solid var(--border);border-radius:12px;
  background:rgba(255,255,255,.03);margin-bottom:9px;animation:wgIn .4s var(--ease) both;}
.ir-wait.is-over{border-color:rgba(255,72,72,.45);background:rgba(255,72,72,.08);}
.ir-wait-ic{width:36px;height:36px;flex:0 0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);font-size:13px;}
.ir-wait.is-over .ir-wait-ic{background:linear-gradient(135deg,var(--red),#ff7a7a);color:#fff;}
.ir-wait-main{flex:1 1 auto;min-width:0;}
.ir-wait-l{font-size:13.5px;line-height:1.4;word-break:break-word;}
.ir-wait-m{margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.8px;color:var(--t2);}

/* ── Admissions card ───────────────────────────────────────────────── */
.ir-adm{border:1px solid var(--border);border-radius:16px;padding:16px 18px;margin-bottom:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 42%,rgba(255,255,255,.09));
  animation:wgIn .45s var(--ease) both;}
.ir-adm.is-over{border-color:rgba(255,72,72,.45);}
.ir-adm-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.ir-av{width:44px;height:44px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:600;overflow:hidden;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);}
.ir-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.ir-adm-main{flex:1 1 240px;min-width:0;}
.ir-adm-n{font-family:var(--disp);font-size:16px;font-weight:600;word-break:break-word;}
.ir-adm-s{margin-top:4px;font-size:13px;color:var(--t2);}
.ir-adm-r{margin-top:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.1px;color:var(--t3);}
.ir-adm-age{text-align:right;flex:0 0 auto;}
.ir-adm-age-v{font-family:var(--mono);font-size:12px;color:var(--amber);}
.ir-adm.is-over .ir-adm-age-v{color:var(--red);}
.ir-adm-age-s{margin-top:3px;font-family:var(--mono);font-size:10px;color:var(--t3);}
/* The reason is quoted, not shown as a form value. */
.ir-quote{margin-top:14px;padding:14px 16px;border-left:3px solid var(--gglow);border-radius:0 12px 12px 0;
  background:rgba(212,175,55,.07);}
.ir-quote-k{font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);}
.ir-quote-v{margin-top:8px;font-size:14px;line-height:1.7;color:var(--t2);white-space:pre-wrap;
  max-width:78ch;word-break:break-word;}
.ir-over-flag{display:flex;align-items:center;gap:9px;margin-top:12px;padding:9px 12px;border-radius:10px;
  border:1px solid rgba(255,72,72,.45);background:rgba(255,72,72,.10);}
.ir-over-flag i{color:var(--red);}
.ir-over-flag span{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#ff8f8f;}
.ir-adm-acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}

/* ── Filmstrip: live stages, then outcomes, visually separated ─────── */
#ir-filmstrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;}
.ir-fstep{flex:0 0 auto;min-width:104px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;
  background:rgba(255,255,255,.03);cursor:pointer;text-align:left;font-family:var(--body);color:var(--text);
  transition:.25s var(--ease);}
.ir-fstep:hover{border-color:var(--gglow);}
.ir-fstep[data-has="true"]{border-color:rgba(240,200,50,.4);background:rgba(212,175,55,.10);}
.ir-fstep[data-active="true"]{border-color:var(--gold);background:var(--gdim);}
.ir-fstep-k{font-family:var(--mono);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t3);}
.ir-fstep-v{font-family:var(--disp);margin-top:5px;font-size:20px;font-weight:700;line-height:1;color:var(--t3);}
.ir-fstep[data-has="true"] .ir-fstep-v{color:var(--gold);}
.ir-fstep-l{margin-top:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.6px;color:var(--t2);
  line-height:1.35;word-break:break-word;}
.ir-fsplit{flex:0 0 auto;width:1px;margin:4px 6px;background:linear-gradient(180deg,transparent,var(--border),transparent);}

/* ── Pipeline table, becomes cards below 820px ─────────────────────── */
.ir-tbl{margin-top:18px;border:1px solid var(--border);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.6fr 1.4fr .9fr .5fr 1.4fr 44px;gap:12px;
  align-items:center;padding:12px 16px;}
.tblhead{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--t3);
  border-bottom:1px solid var(--border);background:rgba(255,255,255,.03);}
.tblrow{border-bottom:1px solid rgba(255,255,255,.07);transition:background .2s var(--ease);}
.tblrow:last-child{border-bottom:0;}
.tblrow:hover{background:rgba(255,255,255,.03);}
.ir-row-n{font-size:13.5px;font-weight:600;word-break:break-word;}
.ir-row-s{margin-top:3px;font-family:var(--mono);font-size:10.5px;color:var(--t3);}
.ir-row-t{font-size:13px;color:var(--t2);word-break:break-word;}
.ir-pill{font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;border:1px solid var(--gglow);background:var(--gdim);color:var(--gold);
  white-space:nowrap;display:inline-block;}
.ir-pill.is-waiting{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.12);color:var(--amber);}
.ir-days{font-family:var(--mono);font-size:12px;color:var(--t2);}
.ir-days.is-old{color:var(--amber);}
.ir-days.is-stale{color:var(--red);}
.ir-open-btn{width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.05);
  color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ir-open-btn:hover{border-color:var(--gglow);color:var(--gold);}

/* ── Generic list rows ─────────────────────────────────────────────── */
.ir-lrow{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--border);
  border-radius:13px;background:rgba(255,255,255,.03);margin-bottom:9px;animation:wgIn .4s var(--ease) both;}
.ir-lrow-ic{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;background:linear-gradient(135deg,var(--gold),var(--gold2));}
.ir-lrow-main{flex:1 1 auto;min-width:0;}
.ir-lrow-t{font-size:13.5px;font-weight:600;word-break:break-word;}
.ir-lrow-d{margin-top:4px;font-size:13px;color:var(--t2);line-height:1.5;word-break:break-word;}
.ir-lrow-m{margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.8px;color:var(--t3);}

/* ── Audit ─────────────────────────────────────────────────────────── */
.ir-aud{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:11px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);font-size:13px;}
.ir-aud:last-child{border-bottom:0;}
.ir-aud-w{font-family:var(--mono);font-size:11px;color:var(--t3);white-space:nowrap;}
.ir-aud-a{color:var(--t2);word-break:break-word;}
.ir-aud-r{margin-top:3px;font-family:var(--mono);font-size:10.5px;color:var(--t3);}
.ir-feed{display:flex;flex-direction:column;gap:12px;}
.ir-feed-i{font-size:12.5px;color:var(--t2);line-height:1.5;}
.ir-feed-w{margin-top:3px;font-family:var(--mono);font-size:10px;color:var(--t3);}

/* Empty */
.ir-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:34px 20px;border:1px dashed var(--border);border-radius:14px;color:var(--t2);}
.ir-empty i{font-size:24px;color:var(--gold);}
.ir-empty-t{font-family:var(--disp);font-size:15px;color:var(--text);}
.ir-empty-s{font-size:13px;line-height:1.6;max-width:50ch;}
.ir-skel{border-radius:14px;height:120px;margin-bottom:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 8%,rgba(255,255,255,.10) 18%,rgba(255,255,255,.05) 33%);
  background-size:800px 100%;animation:shim 1.4s linear infinite;}

/* ── Review drawer ─────────────────────────────────────────────────── */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);z-index:710;overflow-y:auto;
  overscroll-behavior:contain;border-left:1px solid rgba(255,255,255,.20);
  background:linear-gradient(165deg,var(--base),var(--deep));box-shadow:-24px 0 60px -20px rgba(0,0,0,.7);
  animation:drwIn .34s var(--ease) both;}
@keyframes drwIn{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
.ir-drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);
  background:linear-gradient(165deg,var(--base),var(--deep));}
.ir-x{width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.05);
  color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ir-x:hover{border-color:var(--gglow);color:var(--gold);}
#ir-drawer-body{padding:20px;}
.ird-sec{margin-top:22px;}
.ird-k{font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--t2);}
.ird-id{display:flex;align-items:flex-start;gap:14px;}
.ird-name{font-family:var(--disp);font-size:19px;font-weight:700;line-height:1.25;word-break:break-word;}
.ird-role{margin-top:5px;font-size:13.5px;color:var(--t2);}
.ird-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.ird-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;border:1px solid var(--border);color:var(--t2);}
.ird-tag.is-internal{border-color:rgba(85,136,255,.45);background:rgba(85,136,255,.10);color:var(--blue);}
.ird-target{margin-top:16px;padding:13px 15px;border:1px solid var(--border);border-radius:13px;
  background:rgba(255,255,255,.03);}
.ird-target-v{font-family:var(--disp);margin-top:5px;font-size:16px;font-weight:600;word-break:break-word;}
.ird-target-s{margin-top:4px;font-family:var(--mono);font-size:10.5px;color:var(--t3);}
/* Their words, quoted, never collapsed behind a disclosure. */
.ird-quote{margin-top:9px;padding:14px 16px;border-left:3px solid var(--gglow);border-radius:0 12px 12px 0;
  background:rgba(212,175,55,.07);font-size:14px;line-height:1.72;color:var(--t2);white-space:pre-wrap;
  word-break:break-word;}
.ird-rec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:11px;}
.ird-cell{padding:11px 13px;border:1px solid rgba(255,255,255,.14);border-radius:12px;min-width:0;}
.ird-cell.is-warn{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.08);}
.ird-cell-k{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);}
.ird-cell-v{margin-top:5px;font-size:13.5px;word-break:break-word;}
.ird-cell.is-warn .ird-cell-v{color:var(--amber);}
/* THE next action: one sentence, one primary button. */
#ird-next{margin-top:22px;padding:18px;border:1px solid rgba(240,200,50,.45);border-radius:15px;
  background:linear-gradient(160deg,rgba(212,175,55,.18),rgba(255,255,255,.03) 60%);}
.ird-next-s{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--text);}
.ird-blocked{display:flex;align-items:flex-start;gap:11px;margin-top:10px;padding:12px 13px;border-radius:11px;
  border:1px solid var(--border);background:rgba(255,255,255,.04);}
.ird-blocked i{color:var(--amber);flex:0 0 auto;margin-top:2px;}
.ird-blocked-v{font-size:13.5px;line-height:1.55;color:var(--t2);}
.ird-more-btn{display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%;min-height:44px;
  margin-top:12px;padding:0 14px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.04);
  color:var(--t2);font-family:var(--body);font-size:13px;cursor:pointer;}
.ird-more-btn:hover{border-color:var(--gglow);color:var(--gold);}
#ird-more{display:flex;flex-direction:column;gap:8px;margin-top:10px;animation:cvIn .3s var(--ease) both;}
.ird-more-i{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 14px;
  border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.03);color:var(--t2);
  font-family:var(--body);font-size:13px;cursor:pointer;text-align:left;}
.ird-more-i:hover{border-color:var(--gglow);}
.ird-more-i.is-danger{color:#ff8f8f;border-color:rgba(255,72,72,.35);}
/* Vertical stage rail inside the drawer */
#ird-stage-rail{display:flex;flex-direction:column;margin-top:11px;}
.ird-step{display:flex;gap:12px;}
.ird-step-l{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(--border);display:flex;
  align-items:center;justify-content:center;font-size:9px;color:var(--void);flex:0 0 auto;}
.ird-dot.is-done{border-color:var(--green);background:var(--green);}
.ird-dot.is-current{border-color:var(--gold);background:var(--gold);}
.ird-line{width:2px;flex:1 1 auto;min-height:16px;background:rgba(255,255,255,.14);}
.ird-line.is-done{background:rgba(76,214,87,.5);}
.ird-step-r{padding-bottom:14px;min-width:0;}
.ird-step-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.6px;color:var(--t3);word-break:break-word;}
.ird-step-t.is-done{color:var(--t2);}
.ird-step-t.is-current{color:var(--text);}
.ird-step-o{margin-top:3px;font-size:11.5px;color:var(--gold);}
.ird-doc{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--border);
  border-radius:12px;background:rgba(255,255,255,.03);margin-top:8px;}
.ird-doc-ic{width:34px;height:34px;flex:0 0 auto;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--violet),#a78bfa);color:#fff;font-size:12px;}
.ird-tl{display:flex;flex-direction:column;margin-top:11px;}
.ird-tl-i{display:flex;gap:12px;}
.ird-tl-l{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;}
.ird-tl-ic{width:28px;height:28px;border-radius:50%;border:1px solid var(--gglow);background:var(--gdim);
  color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:10px;flex:0 0 auto;}
.ird-tl-r{padding-bottom:14px;min-width:0;}
.ird-tl-t{font-size:13.5px;font-weight:600;line-height:1.4;word-break:break-word;}
.ird-tl-d{margin-top:3px;font-size:13px;color:var(--t2);line-height:1.5;word-break:break-word;}
.ird-tl-w{margin-top:3px;font-family:var(--mono);font-size:10px;letter-spacing:.7px;color:var(--t3);}
.ird-note{padding:11px 13px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.03);
  margin-bottom:9px;}
.ird-note-t{font-size:13.5px;line-height:1.55;color:var(--t2);white-space:pre-wrap;word-break:break-word;}
.ird-note-m{margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.7px;color:var(--t3);}
.ird-note-help{margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--t3);}

/* ── Overlays ──────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;z-index:720;background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s var(--ease) both;}
.modal-overlay.u-hide{display:none;}
/* THE SCRIM MUST SIT BELOW THE DRAWER (corrected 2026-07-29).
   This was 705, which was right when .drawer was z-index 710. The port to the
   Claude Design changed .drawer to the design's 680 (css/dc-internal-recruitment.css)
   and did not move the scrim with it, so a 72% black blurred sheet ended up ON TOP
   of the drawer. The VP: "the overlay modal is blurr, I can not see anything."
   670 is the design's own pairing for 680. */
#ir-drawer-scrim{z-index:670;}
.modal-overlay>.modal-card{width:100%;max-width:min(660px,calc(100vw - 24px));max-height:calc(100vh - 40px);
  overflow-y:auto;overscroll-behavior:contain;padding:26px 24px;border-radius:16px;
  border:1px solid rgba(255,255,255,.20);background:linear-gradient(165deg,var(--base),var(--deep));
  position:relative;animation:mIn .32s var(--ease) both;}
#ir-appoint-modal>.modal-card{max-width:min(760px,calc(100vw - 24px));}
.ir-modal-t{font-family:var(--disp);margin:9px 0 0;font-size:20px;line-height:1.28;font-weight:700;word-break:break-word;}
.ir-modal-sub{margin:9px 0 0;font-size:13.5px;line-height:1.62;color:var(--t2);}
.ir-modal-acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;justify-content:flex-end;}
.ir-field{margin-top:18px;}
.ir-label{display:block;font-size:13.5px;font-weight:600;color:var(--text);line-height:1.45;}
.ir-help{margin:5px 0 9px;font-size:12.5px;line-height:1.55;color:var(--t3);}
.ir-cell{padding:12px 14px;border:1px solid var(--border);border-radius:12px;min-width:0;}
.ir-avail{margin-top:14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;
  background:rgba(255,255,255,.03);font-size:13.5px;line-height:1.55;color:var(--t2);}

/* Explicitly drawn radio / checkbox. Never a bare native control. */
.ir-radio{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:11px 13px;margin-bottom:8px;
  border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03);cursor:pointer;
  position:relative;transition:.2s var(--ease);}
.ir-radio:hover{border-color:var(--gglow);}
.ir-radio input{position:absolute;opacity:0;width:1px;height:1px;}
.ir-radio-dot{width:22px;height:22px;flex:0 0 auto;border:2px solid rgba(255,255,255,.4);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:1px;transition:.2s var(--ease);}
.ir-radio-dot::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--gold);
  transform:scale(0);transition:.2s var(--ease);}
.ir-radio input:checked ~ .ir-radio-dot{border-color:var(--gold);}
.ir-radio input:checked ~ .ir-radio-dot::after{transform:scale(1);}
.ir-radio input:checked ~ .ir-radio-l{color:var(--text);}
.ir-radio:has(input:checked){border-color:rgba(240,200,50,.45);background:rgba(212,175,55,.10);}
.ir-radio input:focus-visible ~ .ir-radio-dot{outline:2px solid var(--gold);outline-offset:2px;}
.ir-radio-l{font-size:13.5px;line-height:1.45;color:var(--t2);}
.ir-radio-h{margin-top:4px;font-size:12px;line-height:1.45;color:var(--t3);}
.ir-check{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;position:relative;}
.ir-check input{position:absolute;opacity:0;width:1px;height:1px;}
.ir-check-box{width:26px;height:26px;flex:0 0 auto;border:2px solid rgba(255,255,255,.4);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--void);font-size:12px;transition:.2s var(--ease);}
.ir-check-box i{opacity:0;transform:scale(.6);transition:.2s var(--ease);}
.ir-check input:checked + .ir-check-box{background:var(--gold);border-color:var(--gold);}
.ir-check input:checked + .ir-check-box i{opacity:1;transform:none;}
.ir-check input:focus-visible + .ir-check-box{outline:2px solid var(--gold);outline-offset:2px;}
.ir-check-label{font-size:13.5px;color:var(--t2);line-height:1.45;}

/* The preview of exactly what the colleague reads. */
#ir-np-preview{margin-top:16px;padding:16px 18px;border:1px solid var(--border);border-radius:13px;
  background:rgba(255,255,255,.03);animation:cvIn .3s var(--ease) both;}
.ir-prev-k{font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);}
.ir-prev-b{margin-top:9px;font-size:14px;line-height:1.7;color:var(--t2);max-width:60ch;}
.ir-prev-b p{margin:0 0 10px;white-space:pre-wrap;word-break:break-word;}

/* Panel picker */
.ir-panel{display:flex;flex-wrap:wrap;gap:8px;}
.ir-panel-b{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 13px;border:1px solid var(--border);
  border-radius:999px;background:rgba(255,255,255,.04);color:var(--t2);font-family:var(--body);font-size:13px;cursor:pointer;}
.ir-panel-b[data-on="true"]{border-color:rgba(240,200,50,.5);background:rgba(212,175,55,.14);color:var(--text);}
.ir-panel-ini{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;font-weight:600;background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--void);flex:0 0 auto;overflow:hidden;}
.ir-panel-ini img{width:100%;height:100%;object-fit:cover;border-radius:50%;}

/* Appointment countdown + diff + flags */
.ir-countdown{margin-top:12px;padding:14px 16px;border:1px solid rgba(240,200,50,.45);border-radius:13px;
  background:rgba(212,175,55,.12);}
.ir-countdown-v{font-family:var(--disp);font-size:17px;font-weight:700;line-height:1.35;color:var(--gold);}
.ir-countdown-s{margin-top:7px;font-size:13px;line-height:1.55;color:var(--t2);}
.ir-diff{margin-top:11px;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.ir-diff-h,.ir-diff-r{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:12px;padding:10px 13px;align-items:center;}
.ir-diff-h{font-family:var(--mono);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t3);
  border-bottom:1px solid var(--border);background:rgba(255,255,255,.03);}
.ir-diff-r{border-bottom:1px solid rgba(255,255,255,.07);font-size:13px;}
.ir-diff-r:last-child{border-bottom:0;}
.ir-diff-r.is-changed{background:rgba(212,175,55,.07);}
.ir-diff-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.8px;color:var(--t2);}
.ir-diff-f{color:var(--t3);word-break:break-word;}
.ir-diff-t{color:var(--gold);font-weight:600;word-break:break-word;}
.ir-flag{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;margin-top:8px;}
.ir-flag.is-grant{border:1px solid rgba(76,214,87,.4);background:rgba(76,214,87,.08);}
.ir-flag.is-remove{border:1px solid rgba(255,72,72,.35);background:rgba(255,72,72,.07);}
.ir-flag-m{width:24px;height:24px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:10px;}
.ir-flag.is-grant .ir-flag-m{border:2px solid var(--green);background:var(--green);color:var(--void);}
.ir-flag.is-remove .ir-flag-m{border:2px solid var(--red);background:transparent;color:var(--red);}
.ir-flag-main{flex:1 1 auto;min-width:0;}
.ir-flag-l{font-size:13.5px;word-break:break-word;}
.ir-flag-w{margin-top:3px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--amber);}
.ir-flag-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;flex:0 0 auto;}
.ir-flag.is-grant .ir-flag-tag{color:var(--green);}
.ir-flag.is-remove .ir-flag-tag{color:var(--red);}
.ir-notify{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.ir-notify span{font-family:var(--mono);font-size:11px;padding:6px 11px;border:1px solid var(--border);
  border-radius:999px;color:var(--t2);}

/* Toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);z-index:900;
  display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:12px;border:1px solid var(--border);
  border-left:3px solid var(--green);background:linear-gradient(165deg,var(--base),var(--deep));
  box-shadow:0 18px 44px -16px rgba(0,0,0,.7);font-size:13.5px;opacity:0;transition:.35s var(--ease);pointer-events:none;}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
#toast.error{border-left-color:var(--red);}
#toast i{color:var(--green);}
#toast.error i{color:var(--red);}

/* Keyframes */
@keyframes hdrDrop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes sbIn{from{transform:translateX(-16px);opacity:0}to{transform:none;opacity:1}}
@keyframes wgIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes cvIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes scIn{from{transform:translateY(12px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes mIn{from{transform:translateY(18px) scale(.985);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shim{0%{background-position:-380px 0}100%{background-position:380px 0}}

/* ── Responsive ────────────────────────────────────────────────────── */
@media(max-width:1300px){
  .ir-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:1100px){
  .ir-suite{grid-template-columns:210px minmax(0,1fr);}
  .ir-sec{grid-column:1/-1;border-left:0;border-top:1px solid var(--border);position:static;
    flex-direction:row;flex-wrap:wrap;}
  .ir-sec-block{flex:1 1 240px;min-width:0;}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:820px){
  .ir-suite{grid-template-columns:1fr;}
  /* The rail becomes a horizontal strip, group meaning preserved by the icons. */
  .ir-rail{position:static;border-right:0;border-bottom:1px solid var(--border);}
  .ir-rail-crest{display:none;}
  .ir-nav{flex-direction:row;overflow-x:auto;gap:8px;margin-top:0;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  .ir-nav-i{flex:0 0 auto;border-left:0;border:1px solid var(--border);border-radius:11px;padding:0 14px;}
  .ir-nav-i[data-active="true"]{border-color:var(--gglow);background:var(--gdim);}
  .hidesm{display:none !important;}
  .ir-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* The pipeline table becomes cards. */
  .tblhead{display:none;}
  .tblrow{grid-template-columns:1fr;gap:7px;padding:14px 16px;border-bottom:1px solid var(--border);}
  .tblrow>*:last-child{justify-self:start;}
  .g2,.ird-rec,.ir-diff-h,.ir-diff-r{grid-template-columns:1fr;}
  .ir-diff-h{display:none;}
  .ir-diff-r{gap:6px;}
  .ir-diff-f::before{content:'Now: ';font-family:var(--mono);font-size:10px;color:var(--t3);}
  .ir-diff-t::before{content:'From the effective date: ';font-family:var(--mono);font-size:10px;color:var(--t3);}
}
@media(max-width:640px){
  .hidexs{display:none !important;}
  .rowstack{flex-direction:column !important;align-items:stretch !important;}
  .ir-main{padding:16px 14px 50px;}
  .ir-kpis{grid-template-columns:1fr;}
  .g3{grid-template-columns:1fr;}
  .ir-adm-acts>*{width:100%;}
  /* The drawer becomes a full-screen sheet. */
  .drawer{width:100vw;top:0;border-left:0;}
  /* Overlays become bottom sheets with the safe-area inset honoured. */
  .modal-overlay{padding:0;align-items:flex-end;}
  .modal-overlay>.modal-card{max-width:100% !important;border-radius:18px 18px 0 0;max-height:90vh;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));}
  .ir-modal-acts{flex-direction:column-reverse;}
  .ir-modal-acts>*{width:100%;}
  .ir-aud{grid-template-columns:1fr;gap:4px;}
}
@media print{
  #hdr,.ir-rail,.ir-sec,.modal-overlay,.drawer,#toast{display:none !important;}
  html,body{background:#fff !important;color:#111 !important;}
  .ir-suite{grid-template-columns:1fr;}
  *{animation:none !important;}
}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

/* ── The admission authority notice (2026-07-29) ─────────────────────
   Stage 1 is the Head of Operations' gate and nobody else's. When that post is
   unfilled the queue looked exactly the same as a healthy one, so an application
   could sit waiting on a person who does not exist with nothing on the screen
   saying so. Amber, not red: this is a gap in the org chart, not a fault. */
.ir-authority-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid rgba(240, 200, 50, 0.4);
  border-radius: 13px;
  background: rgba(212, 175, 55, 0.1);
}
.ir-authority-notice > i {
  margin-top: 2px;
  flex: 0 0 auto;
  font-size: 14px;
  color: #f0c832;
}
.ir-authority-notice > div { min-width: 0; }
.ir-authority-t {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.ir-authority-b {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(242, 247, 238, 0.88);
  text-wrap: pretty;
}

/* ── The interview outcome overlay (2026-07-29) ──────────────────────
   From "Internal Recruitment Console.dc.html" (#ir-outcome-modal). Three
   recommendations as a radio group, a note with a stated minimum, and the
   CONSEQUENCE of the chosen recommendation shown before it is committed, which
   is the design's own idea: declining closes the offer route, and the officer
   should read that before pressing the button rather than discover it after. */
.ir-out-recs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.ir-out-rec {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.21);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(242, 247, 238, 0.88);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s cubic-bezier(.16, 1, .3, 1), background .2s cubic-bezier(.16, 1, .3, 1);
}
.ir-out-rec:hover { border-color: rgba(240, 200, 50, 0.34); }
.ir-out-rec[data-active="true"] {
  border-color: rgba(240, 200, 50, 0.5);
  background: rgba(212, 175, 55, 0.12);
  color: #f2f7ee;
}
.ir-out-dot {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.34);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ir-out-rec[data-active="true"] .ir-out-dot { border-color: #f0c832; }
.ir-out-rec[data-active="true"] .ir-out-dot::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f0c832;
}
.ir-out-l { min-width: 0; overflow-wrap: anywhere; }

.ir-out-count {
  margin-top: 7px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: rgba(242, 247, 238, 0.62);
}
.ir-out-count[data-ok="true"] { color: #4cd657; }

/* The consequence. Gold when an offer stays available, red when it does not,
   because those are materially different decisions. */
.ir-out-cons {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 16px;
  padding: 13px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(242, 247, 238, 0.88);
}
.ir-out-cons[data-tone="gold"] {
  border: 1px solid rgba(240, 200, 50, 0.4);
  background: rgba(212, 175, 55, 0.1);
}
.ir-out-cons[data-tone="gold"] > i { color: #f0c832; }
.ir-out-cons[data-tone="red"] {
  border: 1px solid rgba(229, 104, 110, 0.45);
  background: rgba(229, 104, 110, 0.12);
}
.ir-out-cons[data-tone="red"] > i { color: #e5686e; }
.ir-out-cons > i { margin-top: 2px; flex: 0 0 auto; font-size: 13px; }
.ir-out-cons > div { min-width: 0; }

/* ── The design's interaction layer (Claude Design ".irw", ported 2026-08-02)
   A class-by-class comparison against "Internal Recruitment Console.dc.html"
   found the port carried every structural class and none of these. They are
   the behaviours rather than the layout, which is exactly the part that gets
   dropped in a port and then reads as "close but not the design".

   Scoped to #shell rather than a new wrapper class, so no markup has to change
   and nothing can leak onto another board. */
#shell button {
  transition: background .25s cubic-bezier(.16,1,.3,1),
              border-color .25s cubic-bezier(.16,1,.3,1),
              color .25s cubic-bezier(.16,1,.3,1),
              transform .18s cubic-bezier(.16,1,.3,1);
}
/* The press. One pixel, and it is the difference between a button that
   responds and a picture of a button. */
#shell button:not(:disabled):active { transform: translateY(1px); }
#shell button:disabled { opacity: .5; cursor: not-allowed; }
#shell :focus-visible { outline: 2px solid #f0c832; outline-offset: 2px; border-radius: 8px; }
#shell ::-webkit-scrollbar { width: 10px; height: 10px; }
#shell ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.21); border-radius: 8px; }
#shell input::placeholder,
#shell textarea::placeholder { color: rgba(242,247,238,.62); }
@media (prefers-reduced-motion: reduce) {
  #shell button { transition: none; }
  #shell button:not(:disabled):active { transform: none; }
}