/* ================================================================
   INTERNAL OPPORTUNITIES: the Claude Design, ported exactly
   ----------------------------------------------------------------
   Source: design-source/Internal Opportunities.dc.html, fetched 2026-07-28.
   Every number, colour and easing curve here was read out of that file.

   LOADS AFTER css/dc-base.css, which carries everything this page shares with
   the rest of the ported project: the tokens, the page ground, the fonts, the
   keyframes, .lift, the .ijb button family, the overlay scrim and card, and the
   mobile bottom sheet. Thirty-two rules that used to be duplicated here were
   byte identical to the base and have been removed; nothing conflicted.

   WHAT REMAINS HERE IS ONLY THIS PAGE'S OWN DECISIONS:
     a 1180px centred reading column        (the console is a 3 column suite)
     three KPI tiles                        (the console has five)
     a two across board, one only at 540px
     the hero with its service record stamp
     the vacancy card, the application row, the stage rail
     the four overlays and their per overlay widths
   ================================================================ */
:root {
  --ij-gold:   #f0c832;
  --ij-gold-b: rgba(240,200,50,.34);   /* the gold border, everywhere */
  --ij-gold-f: rgba(212,175,55,.10);   /* the gold fill */
  --ij-blue:   #5588ff;
  --ij-amber:  #f59e0b;
  --ij-green:  #4cd657;
  --ij-red:    #ff4848;
  --ij-ink:    #f2f7ee;
  --ij-body:   rgba(242,247,238,.88);
  --ij-muted:  rgba(242,247,238,.62);
  --ij-line:   rgba(255,255,255,.20);
  --ij-line2:  rgba(255,255,255,.21);
  --ij-soft:   rgba(255,255,255,.14);
  --ij-fill:   rgba(255,255,255,.05);
  --ij-fill2:  rgba(255,255,255,.04);
  --ij-fill3:  rgba(255,255,255,.03);
  --ij-ease:   cubic-bezier(.16,1,.3,1);
  --ij-card:   linear-gradient(165deg,#172213,#111a0e);   /* overlay cards */
}

/* ── The reading column ─────────────────────────────────────────────────
   The design bounds this at 1180px. The VP asked for the page to be full screen
   on web (2026-07-29), so the bound is lifted above the tablet breakpoint and
   the gutters carry the breathing room instead. Below 900px the bound is
   irrelevant anyway, because the viewport is narrower than it.

   Only the WIDTH changes. Every other value on this page is still the design's. */
.ij-wrap { max-width:none; margin:0 auto; padding:22px clamp(20px, 2.4vw, 34px) 80px; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.ij-hero {
  position:relative; overflow:hidden;
  border:1px solid var(--ij-line); border-radius:18px; padding:26px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 42%, rgba(255,255,255,.10)),
    linear-gradient(320deg, rgba(212,175,55,.12), 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);
  animation:wgIn .5s var(--ij-ease) .06s both;
}
/* The gold sweep along the top edge. 1.5px, 5.5s, and it never speeds up. */
.ij-scan {
  position:absolute; left:0; right:0; top:0; height:1.5px; z-index:2;
  background:linear-gradient(90deg, transparent, var(--ij-gold), transparent);
  background-size:200% 100%; animation:mdScan 5.5s linear infinite;
}
.ij-hero-row  { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.ij-hero-main { flex:1 1 400px; min-width:0; }
.ij-eyebrow {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:2.6px; text-transform:uppercase; color:var(--ij-gold);
}
.ij-hero-title {
  font-family:'Cinzel', serif; margin:10px 0 0;
  font-size:30px; line-height:1.18; font-weight:700; text-wrap:pretty;
}
.ij-hero-lede {
  margin:12px 0 0; max-width:58ch; font-size:14.5px; line-height:1.62;
  color:var(--ij-body); text-wrap:pretty;
}
/* The member's own service record. Live profile data, never a placeholder. */
.ij-stamp {
  flex:0 0 auto; min-width:210px;
  border:1px solid var(--ij-gold-b); border-radius:14px; padding:15px 17px;
  background:var(--ij-gold-f);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
}
.ij-stamp-k { font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ij-gold); }
.ij-stamp-a { margin-top:9px; font-size:14px; color:var(--ij-ink); }
.ij-stamp-b { margin-top:5px; font-size:12.5px; color:var(--ij-body); }
.ij-stamp-c { margin-top:10px; padding-top:9px; border-top:1px solid var(--ij-soft);
  font-size:12.5px; color:var(--ij-body); }

/* ── KPI strip: three tiles ─────────────────────────────────────────── */
.kstrip { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:16px; }
.ij-kpi {
  border:1px solid var(--ij-line); border-radius:16px; padding:17px;
  background:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 42%, rgba(255,255,255,.09));
  animation:scIn .45s var(--ij-ease) both;
}
.ij-kpi:nth-child(1) { animation-delay:.06s }
.ij-kpi:nth-child(2) { animation-delay:.10s }
.ij-kpi:nth-child(3) { animation-delay:.14s }
.ij-kpi-k { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px;
  letter-spacing:2px; text-transform:uppercase; color:var(--ij-body); }
.ij-kpi-v { font-family:'Cinzel', serif; margin-top:7px; font-size:32px; font-weight:700; }
.ij-kpi-c { margin-top:3px; font-size:13px; color:var(--ij-body); }
/* One colour per question, as the design assigns them. Scoped so the page does
   not redefine the portal-wide utility classes for everybody else. */
.ij-kpi-v.u-gold  { color:var(--ij-gold); }
.ij-kpi-v.u-blue  { color:var(--ij-blue); }
.ij-kpi-v.u-amber { color:var(--ij-amber); }

/* ── Track an application ───────────────────────────────────────────── */
.ij-track {
  margin-top:16px; border:1px solid var(--ij-line); border-radius:16px; padding:16px 18px;
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(255,255,255,.08));
  animation:wgIn .5s var(--ij-ease) .18s both;
}
.ij-track-row   { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ij-track-main  { flex:1 1 300px; min-width:0; }
.ij-track-lede  { margin:8px 0 0; font-size:13.5px; line-height:1.55; color:var(--ij-body); }
.ij-track-form  { display:flex; gap:10px; flex:0 1 360px; min-width:0; }
.ij-track-form .gi { flex:1 1 auto; min-width:0; letter-spacing:2px; }
.ij-track-body  { margin-top:13px; animation:cvIn .3s var(--ij-ease) both; }
/* Found. It is a button because the whole strip opens the application. */
.ij-track-card.is-found {
  display:flex; align-items:center; gap:13px; width:100%; padding:14px;
  border:1px solid rgba(76,214,87,.45); border-radius:12px; background:rgba(76,214,87,.10);
  color:var(--ij-ink); text-align:left;
}
.ij-track-card.is-missing {
  display:flex; align-items:center; gap:11px; padding:14px;
  border:1px solid var(--ij-line2); border-radius:12px; background:var(--ij-fill2);
  font-size:13.5px; color:var(--ij-body);
}
.ij-track-card.is-found  > i { color:var(--ij-green); }
.ij-track-card.is-missing > i { color:var(--ij-muted); }
.ij-track-t { font-size:13.5px; }
.ij-track-s { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:3px;
  font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ij-green); }

/* ── Tabs: a padded segmented control, each with its count ──────────── */
#ij-tabs {
  display:flex; gap:6px; margin-top:18px; padding:5px;
  border:1px solid var(--ij-line2); border-radius:14px; background:var(--ij-fill);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
#ij-tabs::-webkit-scrollbar { display:none; }
.tab {
  display:flex; align-items:center; gap:9px; min-height:44px; padding:0 16px;
  white-space:nowrap; border:1px solid transparent; border-radius:10px; background:transparent;
  color:var(--ij-body); font-family:'DM Sans', sans-serif; font-size:13.5px; cursor:pointer;
}
.tab:hover { background:rgba(255,255,255,.06) !important; color:var(--ij-ink) !important; }
.tab[data-active="true"] {
  background:rgba(212,175,55,.16) !important;
  border-color:var(--ij-gold-b) !important;
  color:var(--ij-ink) !important;
}
.tab[data-active="true"] i { color:var(--ij-gold); }
.tab-count { font-family:'IBM Plex Mono', ui-monospace, monospace; padding:2px 7px;
  border:1px solid var(--ij-line2); border-radius:999px; font-size:10.5px; }

/* ── Filter bar: search takes two shares, each control one ──────────── */
.fbar { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:10px; margin-top:14px; }
.ij-search-wrap { position:relative; min-width:0; }
.ij-search-ico { position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:12.5px; color:var(--ij-muted); pointer-events:none; }
#ij-search { padding-left:40px; }
.gi {
  width:100%; min-height:44px; padding:0 13px;
  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;
}
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); }
.gi-ta { min-height:0; padding:12px 13px; line-height:1.6; resize:vertical; }
.gi:focus { border-color:var(--ij-gold-b); }

/* ── The board: two across, and two is the maximum ──────────────────── */
.cards  { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:14px;
  animation:cvIn .38s var(--ij-ease) both; }
.ij-stack { display:flex; flex-direction:column; gap:14px; margin-top:14px;
  animation:cvIn .38s var(--ij-ease) both; }

/* ── A vacancy card ─────────────────────────────────────────────────── */
.ij-card {
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  border:1px solid var(--ij-line); border-radius:16px; padding:18px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 42%, rgba(255,255,255,.10)),
    linear-gradient(320deg, rgba(212,175,55,.12), 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);
}
.ij-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ij-card-head > div:first-child { min-width:0; }
/* The department line. Blue, because the department is a fact, not a warning. */
.ij-card .ij-eyebrow,
.ij-app  .ij-eyebrow { font-size:10px; letter-spacing:1.8px; color:var(--ij-blue); }
.ij-card-t {
  font-family:'Cinzel', serif; margin:8px 0 0;
  font-size:19px; line-height:1.26; font-weight:600; word-break:break-word;
}
.ij-card-sub { margin-top:6px; font-size:13.5px; color:var(--ij-body); }
/* Save. A 44px square, so it is reachable with a thumb. */
.ij-save {
  width:44px; height:44px; flex:0 0 auto; border:1px solid var(--ij-line2);
  border-radius:11px; background:var(--ij-fill); color:var(--ij-muted); cursor:pointer;
  font-size:13px;
}
.ij-save[data-saved="1"] { color:var(--ij-gold); border-color:var(--ij-gold-b);
  background:rgba(212,175,55,.14); }

.ij-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.ij-chip {
  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; text-transform:uppercase; color:var(--ij-body);
}
/* A paid post says so in green. An unpaid one is simply not marked. */
.ij-chip.paid { border-color:rgba(76,214,87,.4); background:rgba(76,214,87,.10); color:var(--ij-green); }

.ij-det-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:14px; }
.ij-det-k { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--ij-body); }
.ij-det-v { margin-top:4px; font-size:13px; }

/* The closing line. Neutral normally, amber when it is close. */
.ij-closing {
  display:flex; align-items:center; gap:9px; margin-top:13px; padding:10px 12px;
  border:1px solid var(--ij-soft); border-radius:11px;
}
.ij-closing > i { color:var(--ij-muted); font-size:12px; }
.ij-closing > span { font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ij-body); }
.ij-closing.is-soon { border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.10); }
.ij-closing.is-soon > i,
.ij-closing.is-soon > span { color:var(--ij-amber); }

/* The spacer that keeps every card's actions on the same line. */
.ij-card-foot { display:flex; gap:9px; margin-top:16px; }
.ij-card-spacer { flex:1 1 auto; }

/* Already applied: the reference is shown on the card itself. */
.ij-applied {
  display:flex; align-items:center; gap:11px; margin-top:16px; padding:12px 13px;
  border:1px solid rgba(76,214,87,.45); border-radius:12px; background:rgba(76,214,87,.10);
}
.ij-applied > i { color:var(--ij-green); }
.ij-applied-main { flex:1 1 auto; min-width:0; }
.ij-applied-k   { font-size:13.5px; }
.ij-applied-ref { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:3px;
  font-size:11.5px; letter-spacing:1.4px; color:var(--ij-green); }

/* Cannot apply yet: the reason is stated on the card, not hidden in a modal. */
.ij-blocked {
  margin-top:16px; padding:12px 13px; border:1px solid var(--ij-line2);
  border-radius:12px; background:var(--ij-fill2);
}
.ij-blocked .ij-elig-k { font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--ij-body); }
.ij-blocked .ij-elig-v { margin-top:5px; font-size:13px; color:var(--ij-body); line-height:1.5; }

/* Saved tab and closed tab reuse the card with a quieter treatment. */
.ij-card.is-saved { background:linear-gradient(160deg, rgba(255,255,255,.11),
  rgba(255,255,255,.03) 42%, rgba(255,255,255,.09)); box-shadow:none; }
.ij-card.is-saved .ij-card-t { font-size:18px; }
.ij-card.is-closed { border-color:var(--ij-soft); background:var(--ij-fill3); box-shadow:none; }
.ij-card.is-closed .ij-eyebrow  { color:var(--ij-muted); }
.ij-card.is-closed .ij-card-t   { font-size:18px; color:var(--ij-body); }
.ij-card.is-closed .ij-card-sub { color:var(--ij-muted); }
.ij-card.is-closed .ij-chip { display:inline-block; margin-top:14px; padding:6px 11px;
  letter-spacing:1.6px; }

/* ── An application row, on My applications ─────────────────────────── */
.ij-app {
  position:relative; overflow:hidden;
  border:1px solid var(--ij-line); border-radius:16px; padding:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 42%, rgba(255,255,255,.10));
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
}
.ij-app-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.ij-app-head > div:first-child { min-width:0; flex:1 1 260px; }
.ij-app-t { font-family:'Cinzel', serif; margin:12px 0 0; font-size:19px; line-height:1.26; font-weight:600; }
.ij-app-sub { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:5px;
  font-size:11.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ij-body); }

/* The reference chip, with its own copy button. */
.ij-ref {
  display:inline-flex; align-items:center; gap:10px; padding:8px 12px;
  border:1px solid var(--ij-gold-b); border-radius:10px; background:var(--ij-gold-f);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
}
.ij-ref > span:first-child { font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--ij-body); }
.ij-ref-v { font-size:13px; letter-spacing:2.2px; color:var(--ij-gold); }
.ij-ref-copy {
  width:30px; height:30px; border:1px solid var(--ij-line2); border-radius:8px;
  background:var(--ij-fill); color:var(--ij-ink); cursor:pointer; font-size:10.5px;
}

/* The stage chip. Its tone is set per stage by the JS. */
.ij-stage-chip {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  flex:0 0 auto; padding:7px 12px; border-radius:999px; border:1px solid var(--ij-line2);
  background:var(--ij-fill); color:var(--ij-body);
  font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase;
}
.ij-stage-chip[data-tone="live"]  { border-color:var(--ij-gold-b); background:rgba(212,175,55,.14); color:var(--ij-gold); }
.ij-stage-chip[data-tone="good"]  { border-color:rgba(76,214,87,.4); background:rgba(76,214,87,.10); color:var(--ij-green); }
.ij-stage-chip[data-tone="wait"]  { border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.10); color:var(--ij-amber); }
.ij-stage-chip[data-tone="stop"]  { border-color:rgba(255,72,72,.4); background:rgba(255,72,72,.10); color:var(--ij-red); }

/* ── The stage rail. Scroll-snapped, so a phone shows one stage at a time ── */
.rail { display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
  scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.rail > * { scroll-snap-align:start; }
.ij-app .rail { margin-top:18px; }
.rail-step { flex:0 0 auto; min-width:132px; padding-right:12px; }
.rail-row  { display:flex; align-items:center; }
.rail-dot  { width:14px; height:14px; flex:0 0 auto; border-radius:50%;
  border:2px solid var(--ij-soft); background:transparent; }
.rail-line { flex:1 1 auto; height:2px; background:var(--ij-soft); }
.rail-lbl  { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:8px;
  padding-right:10px; font-size:11px; line-height:1.4; letter-spacing:.6px;
  color:var(--ij-muted); word-break:break-word; }
/* Done, here, and not yet. Three states, three colours. */
.rail-step[data-state="done"] .rail-dot  { border-color:var(--ij-green); background:var(--ij-green); }
.rail-step[data-state="done"] .rail-line { background:var(--ij-green); }
.rail-step[data-state="done"] .rail-lbl  { color:var(--ij-body); }
.rail-step[data-state="here"] .rail-dot  { border-color:var(--ij-gold); background:var(--ij-gold); }
.rail-step[data-state="here"] .rail-lbl  { color:var(--ij-gold); }

/* What happens next. Neutral on the row, gold inside the overlay, because in
   the overlay it is the one thing the reader came for. */
.ij-next {
  display:flex; align-items:flex-start; gap:11px; margin-top:14px; padding:13px;
  border:1px solid var(--ij-soft); border-radius:12px; background:var(--ij-fill3);
}
.ij-next > i { margin-top:3px; color:var(--ij-gold); font-size:12px; }
.ij-next-k { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px;
  letter-spacing:1.8px; text-transform:uppercase; color:var(--ij-body); }
.ij-next-v { margin-top:5px; font-size:13.5px; line-height:1.55; color:var(--ij-body); text-wrap:pretty; }
#ija-next-step { margin-top:15px; padding:14px; border-color:var(--ij-gold-b);
  background:var(--ij-gold-f); }
#ija-next-step .ij-next-k { color:var(--ij-gold); }

.ij-app-acts { display:flex; gap:9px; margin-top:15px; flex-wrap:wrap; }

/* ── Empty states ───────────────────────────────────────────────────── */
.ij-empty {
  grid-column:1 / -1; 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;
}
.ij-empty > i   { font-size:22px; color:var(--ij-muted); }
.ij-empty-t     { font-size:14px; color:var(--ij-body); max-width:44ch; }
.ij-empty-s     { font-size:13px; color:var(--ij-muted); max-width:44ch; }
/* A one-line empty state, used inside the overlays. */
.ij-empty.is-inline { grid-column:auto; flex-direction:row; align-items:center; gap:11px;
  padding:14px; border-radius:12px; text-align:left; }
.ij-empty.is-inline > i { font-size:inherit; }

/* Loading. The design's shimmer, not a spinner. */
.ij-skel {
  height:150px; border:1px solid var(--ij-soft); border-radius:16px;
  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;
}

/* ── Email preference ───────────────────────────────────────────────── */
.ij-pref {
  margin-top:20px; padding:15px 17px; border:1px solid var(--ij-soft);
  border-radius:14px; background:var(--ij-fill3);
}
.ij-pref-row  { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.ij-pref-row > div:first-child { flex:1 1 320px; min-width:0; }
.ij-pref-lede { margin:8px 0 0; font-size:13.5px; line-height:1.55; color:var(--ij-body); }

/* The checkbox. A real input, visually hidden, with a drawn box beside it. */
.ij-check {
  display:flex; align-items:center; gap:13px; cursor:pointer;
  font-size:13.5px; line-height:1.5; color:var(--ij-body); white-space:normal;
}
.ij-check input { position:absolute; opacity:0; width:1px; height:1px; }
.ij-check-box {
  position:relative; width:26px; height:26px; flex:0 0 auto; border-radius:7px;
  border:1.5px solid var(--ij-line2); background:var(--ij-fill);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ij-ease), border-color .25s var(--ij-ease);
}
.ij-check-box > i { font-size:12px; color:#0c1109; opacity:0; }
.ij-check input:checked ~ .ij-check-box { border-color:var(--ij-gold); background:var(--ij-gold); }
.ij-check input:checked ~ .ij-check-box > i { opacity:1; }
.ij-check input:focus-visible ~ .ij-check-box { outline:2px solid var(--ij-gold); outline-offset:2px; }
.ij-check-label { min-width:0; }

.ij-legal { margin-top:26px; font-size:12px; line-height:1.6; color:var(--ij-muted); text-align:center; }
.ij-legal strong { color:var(--ij-body); font-weight:600; }

#ij-apply-modal { z-index:710; }
#ij-apply-modal .modal-card,
#ij-app-modal   .modal-card { max-width:min(680px, calc(100vw - 24px)); }
#ij-withdraw-modal { z-index:730; }
.ij-modal-x {
  position:absolute; top:16px; right:16px; width:40px; height:40px;
  border:1px solid var(--ij-line2); border-radius:10px; background:var(--ij-fill);
  color:var(--ij-ink); cursor:pointer; z-index:3;
}
/* The close button sits over the top-right corner, so the body reserves it. */
#ij-detail-body, #ij-app-body, #ij-apply-form, #ij-submitted-state > .ij-done-head { padding-right:46px; }

.ij-modal-t { font-family:'Cinzel', serif; margin:9px 0 0; font-size:24px; line-height:1.24;
  font-weight:700; word-break:break-word; }
.ij-modal-sub { margin:7px 0 0; font-size:14px; color:var(--ij-body); }
.ij-modal-acts { display:flex; gap:10px; margin-top:20px; }

/* ── Role detail ────────────────────────────────────────────────────── */
#ij-detail-body .ij-eyebrow { letter-spacing:2px; color:var(--ij-blue); }
.ij-sec { margin-top:18px; }
.ij-sec:first-of-type { margin-top:20px; }
.ij-sec-k { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px;
  letter-spacing:1.8px; text-transform:uppercase; color:var(--ij-gold); }
.ij-sec-body { margin:8px 0 0; font-size:14px; line-height:1.66; color:var(--ij-body);
  max-width:66ch; white-space:pre-wrap; text-wrap:pretty; }
.ij-list { display:flex; flex-direction:column; gap:8px; margin-top:9px; padding:0; list-style:none; }
.ij-li { display:flex; gap:10px; font-size:13.5px; line-height:1.55; color:var(--ij-body); }
.ij-li::before { content:''; width:5px; height:5px; margin-top:7px; flex:0 0 auto;
  border-radius:50%; background:var(--ij-gold); }
/* The second list is what would help but is not required, so its bullet is quiet. */
.ij-list.is-nice .ij-li::before { background:var(--ij-muted); }

#ij-detail-body .ij-det-grid { grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:18px; }
#ij-detail-body .ij-det-cell { padding:12px 13px; border:1px solid var(--ij-soft); border-radius:12px; }
#ij-detail-body .ij-det-k { letter-spacing:1.8px; }
#ij-detail-body .ij-det-v { margin-top:5px; font-size:13.5px; }

/* Can you apply. Three answers, three treatments. */
.ij-elig { display:flex; gap:13px; padding:16px; border-radius:14px; margin-top:20px; }
.ij-elig > i { margin-top:2px; font-size:16px; }
.ij-elig > div { min-width:0; }
.ij-elig-t { font-family:'Cinzel', serif; font-size:16px; font-weight:600; }
.ij-elig-b { margin-top:6px; font-size:13.5px; line-height:1.55; color:var(--ij-body); }
.ij-elig.is-ok {
  border:1px solid rgba(76,214,87,.45);
  background:linear-gradient(135deg, rgba(76,214,87,.16), rgba(76,214,87,.05));
}
.ij-elig.is-ok > i   { font-size:17px; color:var(--ij-green); }
.ij-elig.is-wait { border:1px solid rgba(245,158,11,.45); background:rgba(245,158,11,.10); }
.ij-elig.is-wait > i { color:var(--ij-amber); }
.ij-elig.is-info { border:1px solid var(--ij-line2); background:var(--ij-fill2); }
.ij-elig.is-info > i { color:var(--ij-body); }
.ij-foot-apply { margin-top:18px; }

/* ── Apply form ─────────────────────────────────────────────────────── */
#ij-apply-form .ij-eyebrow { letter-spacing:2px; color:var(--ij-gold); }
#ij-apply-form .ij-modal-t { font-size:22px; line-height:1.26; }
#ij-apply-form .ij-modal-sub { margin-top:6px; font-size:13.5px; }
.ij-field { margin-top:18px; }
.ij-field:first-of-type { margin-top:20px; }
.ij-label { display:block; font-size:12.5px; line-height:1.5; color:var(--ij-ink); white-space:normal; }
.ij-help  { margin:4px 0 0; font-size:13px; color:var(--ij-body); }
.ij-help-indent { margin-left:39px; }   /* clears the 26px box plus its 13px gap */
.ij-field .gi { margin-top:9px; }
.ij-field input.gi { min-height:46px; }
.ij-count { margin-top:6px; font-size:11.5px; letter-spacing:1.2px; color:var(--ij-muted); }
/* The counter's three states, as the design colours them. */
.ij-count[data-state="near"] { color:var(--ij-amber); }
.ij-count[data-state="ok"]   { color:var(--ij-green); }
.gi-ta[data-state="ok"] { border-color:rgba(76,214,87,.4); }

/* The manager question sits in its own box, because it is a different kind of
   question from the ones above it. */
.ij-field.is-boxed { padding:14px; border:1px solid var(--ij-line2); border-radius:12px;
  background:var(--ij-fill3); }
.ij-field.is-boxed .ij-check { align-items:flex-start; min-height:44px; line-height:1.55; }
.ij-field.is-boxed .ij-check-box { margin-top:1px; }

/* Attachments: a drop target, and the file input itself is hidden. */
.ij-file { position:absolute; opacity:0; width:1px; height:1px; }
.ij-drop {
  display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:9px;
  padding:24px 16px; border:1.5px dashed rgba(255,255,255,.25); border-radius:14px;
  background:var(--ij-fill3); text-align:center; cursor:pointer;
  font-size:13.5px; color:var(--ij-body);
  transition:border-color .25s var(--ij-ease), background .25s var(--ij-ease);
}
.ij-drop:hover, .ij-drop.is-over { border-color:var(--ij-gold-b); background:var(--ij-gold-f); }
.ij-drop > i { font-size:17px; color:var(--ij-gold); }
.ij-drop-hint { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10.5px;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--ij-muted); }
#ija-attach-list { display:flex; flex-direction:column; gap:8px; margin-top:9px; }
.ij-att {
  display:flex; align-items:center; gap:12px; padding:12px 13px;
  border:1px solid var(--ij-line2); border-radius:12px; background:var(--ij-fill2);
}
.ij-att > i  { color:var(--ij-muted); }
.ij-att-n    { flex:1 1 auto; min-width:0; font-size:13.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.ij-att-x {
  width:32px; height:32px; flex:0 0 auto; border:1px solid var(--ij-line2); border-radius:8px;
  background:var(--ij-fill); color:var(--ij-body); cursor:pointer; font-size:11px;
}

/* The action bar sticks to the bottom of the card, so Submit is always in
   reach however long the form runs. */
.ij-actbar {
  position:sticky; bottom:-26px; margin:22px -24px -26px;
  padding:16px 24px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--ij-soft);
  background:linear-gradient(180deg, rgba(23,34,19,.4), #111a0e 40%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.ij-actbar .ij-modal-acts { margin-top:0; flex-wrap:wrap; }
/* The gate line explains why Submit is not available yet. */
.ij-gate {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  display:flex; align-items:center; gap:8px; margin-bottom:11px;
  font-size:11.5px; letter-spacing:1.2px; color:var(--ij-amber);
}

/* ── Submitted: the receipt, with the reference as its hero ─────────── */
#ij-submitted-state { text-align:center; padding:10px 0 4px; }
.ij-done-mark {
  width:66px; height:66px; margin:0 auto; border-radius:50%;
  border:1.5px solid rgba(76,214,87,.5); background:rgba(76,214,87,.12);
  display:flex; align-items:center; justify-content:center;
}
.ij-done-mark > i { font-size:24px; color:var(--ij-green); }
.ij-done-t { font-family:'Cinzel', serif; margin:18px 0 0; font-size:23px; font-weight:700; }
.ij-done-refwrap {
  display:inline-flex; flex-direction:column; align-items:center; gap:8px; margin-top:18px;
  padding:16px 22px; border:1px solid rgba(240,200,50,.45); border-radius:14px;
  background:var(--ij-gold-f); font-family:'IBM Plex Mono', ui-monospace, monospace;
}
.ij-done-refk { font-size:9.5px; letter-spacing:2.2px; text-transform:uppercase; color:var(--ij-body); }
/* 21px and 3.4px of tracking. It is the one thing they must be able to read
   back to us over a phone line. */
.ij-done-refv { font-size:21px; letter-spacing:3.4px; color:var(--ij-gold); }
.ij-done-refwrap .ijb { font-family:'IBM Plex Mono', ui-monospace, monospace;
  min-height:40px; padding:0 14px; border-radius:10px; font-size:11.5px;
  letter-spacing:1.4px; text-transform:uppercase; margin-top:4px; }
.ij-done-next { margin-top:16px; font-size:14px; color:var(--ij-body); }
.ij-done-s { margin:10px auto 0; max-width:48ch; font-size:13.5px; line-height:1.6;
  color:var(--ij-body); text-wrap:pretty; }
#ij-submitted-state .ij-modal-acts { margin-top:22px; }
#ij-submitted-state .ijb { flex:1 1 auto; min-height:46px; font-size:14px; }

/* ── My application, in the overlay ─────────────────────────────────── */
#ij-app-body .ij-app-t { font-family:'Cinzel', serif; margin:13px 0 0; font-size:22px;
  line-height:1.26; font-weight:700; }
#ij-app-body .ij-app-sub { margin-top:6px; }
#ija-stage-rail { margin-top:20px; }
#ija-stage-rail .rail-step { min-width:138px; }

/* Documents waiting on the member. The violet disc marks a document to sign. */
#ija-docs { display:flex; flex-direction:column; gap:8px; margin-top:9px; }
.ij-doc {
  display:flex; align-items:center; gap:12px; padding:12px 13px;
  border:1px solid var(--ij-line2); border-radius:12px; background:var(--ij-fill2);
}
.ij-doc-ic {
  width:34px; height:34px; flex:0 0 auto; border-radius:50%;
  background:linear-gradient(135deg,#8b5cf6,#a78bfa);
  display:flex; align-items:center; justify-content:center;
}
.ij-doc-ic > i { font-size:12px; color:#fff; }
.ij-doc-main { flex:1 1 auto; min-width:0; }
.ij-doc-t { font-size:13.5px; }
.ij-doc-s { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:3px;
  font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ij-body); }

/* The history. One wire down the left, an event beside each node. */
.ij-tl { display:flex; flex-direction:column; gap:0; margin-top:11px; }
.ij-tl-i { display:flex; gap:13px; }
.ij-tl-i:last-child .ij-tl-w { display:none; }
.ij-tl-i > div:first-child { display:flex; flex-direction:column; align-items:center; flex:0 0 auto; }
.ij-tl-ic {
  width:30px; height:30px; border-radius:50%; border:1px solid rgba(240,200,50,.4);
  background:rgba(212,175,55,.12); display:flex; align-items:center; justify-content:center;
}
.ij-tl-ic > i { font-size:11px; color:var(--ij-gold); }
.ij-tl-w { flex:1 1 auto; width:1px; min-height:14px; background:var(--ij-soft); }
.ij-tl-main { padding-bottom:16px; min-width:0; }
.ij-tl-t { font-size:13.5px; font-weight:600; }
.ij-tl-b { margin-top:4px; font-size:13px; line-height:1.5; color:var(--ij-body); }
.ij-tl-d { font-family:'IBM Plex Mono', ui-monospace, monospace; margin-top:5px;
  font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ij-muted); }

#ij-app-body .ij-modal-acts { margin-top:14px; flex-wrap:wrap; }

/* ── Withdraw. Destructive, so it is marked down its left edge ──────── */
#ij-withdraw-modal .modal-card {
  max-width:min(520px, calc(100vw - 24px));
  border-left:3px solid var(--ij-red);
  /* THE DESIGN SETS max-height:none HERE, AND THIS DELIBERATELY DOES NOT.

     The design's withdraw card is three lines of consequence and two buttons,
     so it cannot outgrow a screen and needs no cap. The portal's card also
     carries a reason field, which the design has no equivalent of, and on a
     phone in landscape or with large accessibility text that is enough to push
     it past the viewport.

     An uncapped card in a centred overlay overflows off the TOP and the BOTTOM
     at once, with nothing to scroll: the heading above the screen and the
     buttons below it. That is the exact fault an HR user reported on the
     dashboard on 2026-07-28. Reproducing it here for the sake of matching one
     declaration would be the wrong trade, so the base cap from dc-base.css is
     left in place and this rule only sets what makes the card destructive. */
}
.ij-danger .ij-eyebrow { letter-spacing:2px; color:var(--ij-red); }
.ij-danger .ij-modal-t { font-size:20px; margin-top:9px; }
.ij-conseq { display:flex; flex-direction:column; gap:8px; margin:14px 0 0;
  padding:0; list-style:none; }
.ij-conseq > li { display:flex; gap:10px; font-size:13.5px; line-height:1.55; color:var(--ij-body); }
.ij-conseq > li::before {
  font-family:'Font Awesome 6 Free'; font-weight:900; content:'\f056';   /* circle-minus */
  margin-top:3px; font-size:11px; color:var(--ij-red); flex:0 0 auto;
}
/* The last consequence is the reassuring one, so it is green and a tick. */
.ij-conseq > li:last-child::before { content:'\f058'; color:var(--ij-green); }   /* circle-check */
.ij-danger .ij-modal-acts .ijb { flex:1 1 auto; min-height:46px; font-size:14px; }
/* ── Toast ──────────────────────────────────────────────────────────── */
#toast {
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:900;
  display:flex; align-items:center; gap:10px; padding:13px 18px; border-radius:12px;
  border:1px solid var(--ij-line2); border-left:3px solid var(--ij-green);
  background:var(--ij-card); box-shadow:0 18px 44px -16px rgba(0,0,0,.7);
  font-size:13.5px; opacity:0; pointer-events:none;
  transition:opacity .25s var(--ij-ease);
  max-width:calc(100vw - 32px);
}
#toast.show { opacity:1; }
#toast > i { color:var(--ij-green); }
#toast.is-bad { border-left-color:var(--ij-red); }
#toast.is-bad > i { color:var(--ij-red); }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE: the design's own four breakpoints, in its own order
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:820px) {
  /* The cards stay at TWO here. The design does not drop to one until 540. */
  .cards { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .fbar  { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .kstrip { grid-template-columns:1fr; }
  .fbar   { grid-template-columns:1fr; }
  /* The sticky bar's negative margins are measured off the 24px card padding,
     which the sheet keeps, so only the bottom needs re-seating. */
  .ij-actbar { bottom:calc(-22px - env(safe-area-inset-bottom)); }
  .ij-hero { padding:20px; }
  .ij-hero-title { font-size:24px; }
  .ij-wrap { padding:18px 14px 60px; }
  .ij-track-form { flex:1 1 auto; }
  .modal-card { padding:22px 18px; }
  #ij-detail-body, #ij-app-body, #ij-apply-form { padding-right:44px; }
  .ij-actbar { margin-left:-18px; margin-right:-18px; padding-left:18px; padding-right:18px; }
  .ij-modal-acts { flex-wrap:wrap; }
  .ij-modal-acts .ijb { flex:1 1 auto; }
}
@media (max-width:540px) {
  .cards { grid-template-columns:1fr; }
}
/* Below the design's own range. The narrowest phone still in service is 320px,
   and nothing may overflow it. */
@media (max-width:380px) {
  .ij-det-grid { grid-template-columns:1fr; }
  .ij-done-refv { font-size:17px; letter-spacing:2.4px; }
  .ij-hero-title { font-size:21px; }
  .ij-kpi-v { font-size:27px; }
  .ij-stamp { min-width:0; }
}

/* ════════════════════════════════════════════════════════════════════
   THE HEADER, rebuilt from the design  (2026-07-29)
   ────────────────────────────────────────────────────────────────────
   Source: the <header> element of "Internal Opportunities.dc.html", whose
   inline styles are reproduced here verbatim as rules. Banked at
   design-source/Internal Opportunities.dc.html.

   THE FAULT, and why the first attempt at this did not fix it.
   The VP reported "only shows very large images and nothing more, shrinked",
   then "Page is corrupt". Two separate omissions, both from this stylesheet
   having been written for the design's page-body and never for its header:

     1. .brand-logo-img had no rule, so the 512x512 brand PNG rendered at its
        natural size. That was the "very large image".
     2. #hdr had no rule AT ALL, so it computed to `display:block` and the
        .hdr-left and .hdr-right groups stacked as two rows instead of sitting
        on one. Measured in Chrome: hdr-left at y=0, hdr-right at y=42.

   Fixing (1) alone left (2) in place, which is why the page still looked wrong.
   I missed (2) the first time because my coverage check scanned for CLASSES and
   `#hdr` is an ID, so it was never in the list. The check now covers ids too.

   css/header-command.css supplies the header's APPEARANCE portal-wide
   (background, the gold hairline, the border) and deliberately not its layout,
   which every page states for itself. It also loads LAST, so its !important
   background legitimately wins over the design's; the layout below is what this
   file is responsible for.

   LITERALS, not tokens: neither dc-base.css nor this file defines --gold,
   --panel, --hdh and the rest, so a var() here would resolve to nothing. The
   design states literals too, so these are its own values unchanged.
   ════════════════════════════════════════════════════════════════════ */

/* The design: height:70px, one row, the two groups pushed apart. */
#hdr {
  height: 70px;
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .10));
  border-bottom: 1px solid rgba(255, 255, 255, .21);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  animation: hdrDrop .5s cubic-bezier(.16, 1, .3, 1) both;
}
/* min-width:0 on both, or a long member name pushes the header sideways. */
.hdr-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hdr-right { display: flex; align-items: center; gap: 10px; min-width: 0; }

.hdr-back-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .21);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: #f2f7ee;
  font-size: 13px;
  cursor: pointer;
  transition: color .25s cubic-bezier(.16, 1, .3, 1), border-color .25s cubic-bezier(.16, 1, .3, 1),
              background .25s cubic-bezier(.16, 1, .3, 1);
}
.hdr-back-btn:hover { border-color: rgba(240, 200, 50, .34); background: rgba(255, 255, 255, .09); }
.hdr-back-btn > i { font-size: 12px; color: #f0c832; }

.hdr-icon-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .21);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: #f2f7ee;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: color .25s cubic-bezier(.16, 1, .3, 1), border-color .25s cubic-bezier(.16, 1, .3, 1);
}
.hdr-icon-btn:hover { color: #f0c832; border-color: rgba(240, 200, 50, .34); }

.brand-logo-wrap {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #f0c832;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Without this the 512x512 PNG renders at 512x512. This was the reported fault. */
.brand-logo-img { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
/* The wordmark fallback the img's onerror handler reveals. */
.brand-text { display: flex; align-items: center; }
.brand-logo { font-family: 'Cinzel', serif; font-weight: 900; color: #f0c832; letter-spacing: 2px; }

.page-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 13px;
  border: 1px solid rgba(240, 200, 50, .34);
  border-radius: 999px;
  background: rgba(212, 175, 55, .12);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(242, 247, 238, .88);
  white-space: nowrap;
}
.page-pill > i { color: #f0c832; }

.hdr-clock {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: rgba(242, 247, 238, .88);
  white-space: nowrap;
}
.hdr-clock > i { color: #4cd657; }
.hdr-clock-tz { color: rgba(242, 247, 238, .62); }

.hdr-user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 6px 12px 6px 6px;
  border: 1px solid rgba(255, 255, 255, .21);
  border-radius: 999px;
}
.hdr-user-av {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0c832, #f7d94e);
  color: #0c1109;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
}
.hdr-user-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* A long name is truncated rather than allowed to widen the header. */
#hdr-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

.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;
}

/* ── The design's own two hide breakpoints ───────────────────────────
   "Internal Opportunities.dc.html": @media(max-width:900px) drops .hidesm and
   @media(max-width:640px) drops .hidexs. They are declared in the design's own
   <style> block, so if they are already stated above this is where they belong
   and the duplicate is harmless; stating them here keeps the header self
   contained. */
@media (max-width: 900px) {
  #hdr { padding: 0 14px; gap: 10px; }
}
@media (max-width: 640px) {
  #hdr { gap: 8px; }
}

/* ── The pre-auth gate and the shell ────────────────────────────────
   #auth-redirect is what the reader sees for the moment before Firebase resolves
   who they are, and #shell is everything after. Neither had a rule in this
   stylesheet, so that moment rendered as bare unstyled text on the default page
   background: white text of no particular size on nothing, which reads as a
   broken page rather than a loading one. Every other page in the portal styles
   it; the values here are the design's ground and its mono face. */
#auth-redirect {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background: #0c1109;
  color: rgba(242, 247, 238, .62);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 2px;
}
/* The shell is a plain block; stated so it cannot inherit a flex or grid context
   from anything the portal adds around it later. */
#shell { display: block; }