/* ════════════════════════════════════════════════════════════════════
   VMEM RECRUITMENT JOURNEY, ported from the Claude Design export

   Source: design-source/VMEM Recruitment Journey.dc.html
   Pinned by: tests/dc-vmem-journey-fidelity.test.mjs

   EVERY DECLARATION IN THIS FILE IS COPIED FROM THE DESIGN. Nothing here is
   invented, rounded, or "close enough". The fidelity test asserts each value
   appears in BOTH the design and this file, so a number that drifts in either
   direction fails the build.

   SELECTORS ARE NAMESPACED `vj-`, DECLARATIONS ARE NOT. The design calls its
   tab `.tab`, which css/dc-internal-jobs.css already owns with different
   values; two pages fighting over one class name is how a "fixed" page breaks
   the page next door. The prefix keeps the styles apart while the declarations
   stay byte-identical to the design, which is what the fidelity test compares.

   The shared foundation (.cin, .mono, .lift, the keyframes, the .ijb buttons)
   lives in css/dc-base.css and is NOT repeated here.
   ════════════════════════════════════════════════════════════════════ */

/* ── keyframes the journey adds on top of dc-base ─────────────────────
   mdScan is the slow gold sweep across a header rule; sealIn is the stamp
   that lands when a thread closes. Both are the design's own. */
@keyframes mdScan { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@keyframes sealIn { from { transform: scale(.86); opacity: 0 } to { transform: none; opacity: 1 } }

/* ── the page shell ──────────────────────────────────────────────── */
.vj { font-family: 'DM Sans', system-ui, sans-serif; }
.vj button,
.vj select,
.vj input,
.vj textarea { font-family: 'DM Sans', system-ui, sans-serif; }

.vj 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);
}
.vj button:not(:disabled):active { transform: translateY(1px); }
.vj button:disabled { opacity: .55; cursor: not-allowed; }

/* The focus ring is gold and offset, so it reads on every one of the five
   themes without needing a per-theme override. */
.vj :focus-visible { outline: 2px solid #f0c832; outline-offset: 2px; border-radius: 8px; }

.vj ::-webkit-scrollbar { width: 10px; height: 10px }
.vj ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.21); border-radius: 8px }
.vj input::placeholder,
.vj textarea::placeholder { color: rgba(242,247,238,.62) }

/* ── stagger ──────────────────────────────────────────────────────
   The house rule is .06s then +.04s per item. The design stops advancing at
   the eighth child, so a long queue does not accumulate a delay a person
   would read as the page being slow. */
.vj-stg > *:nth-child(1) { animation-delay: .06s }
.vj-stg > *:nth-child(2) { animation-delay: .10s }
.vj-stg > *:nth-child(3) { animation-delay: .14s }
.vj-stg > *:nth-child(4) { animation-delay: .18s }
.vj-stg > *:nth-child(5) { animation-delay: .22s }
.vj-stg > *:nth-child(6) { animation-delay: .26s }
.vj-stg > *:nth-child(7) { animation-delay: .30s }
.vj-stg > *:nth-child(n+8) { animation-delay: .34s }

/* ── tabs ─────────────────────────────────────────────────────────
   `!important` is the design's own, because the active state has to beat the
   inline base style the prototype carries on every tab button. */
.vj-tab[data-active="true"] {
  background: rgba(212,175,55,.16) !important;
  border-color: rgba(240,200,50,.34) !important;
  color: #f2f7ee !important;
}
.vj-tab:hover { background: rgba(255,255,255,.07); color: #f2f7ee; }

/* ── layout ───────────────────────────────────────────────────────── */
.vj-cardgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.vj-split { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 16px; align-items: start; }

/* ── tables ───────────────────────────────────────────────────────
   Density is the constraint, not the enemy. The wrapper scrolls sideways so
   the PAGE never does, which is the portal-wide rule; min-width holds the
   columns honest inside it. */
.vj-tblwrap {
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.21);
  border-radius: 16px;
  background: rgba(255,255,255,.05);
}
table.vj-tbl { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; }
table.vj-tbl thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(242,247,238,.62);
  background: #141d10;
  border-bottom: 1px solid rgba(255,255,255,.21);
}
table.vj-tbl tbody td {
  padding: 13px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(242,247,238,.88);
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}
table.vj-tbl tbody tr:nth-child(even) td { background: rgba(255,255,255,.028); }
table.vj-tbl tbody tr { transition: background .25s ease; }
table.vj-tbl tbody tr:hover td { background: rgba(240,200,50,.09); }
table.vj-tbl tbody tr:last-child td { border-bottom: none; }
table.vj-tbl td.num,
table.vj-tbl th.num { font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }

/* ── the responsive ladder, in the design's own order ─────────────── */
@media (max-width: 1080px) {
  .vj-split { grid-template-columns: 1fr }
}
@media (max-width: 860px) {
  .vj-cardgrid { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  .vj-hidexs { display: none !important }
  .vj-rowstack { flex-direction: column !important; align-items: stretch !important }
}