/* Onboarding platform — design system */
:root {
  /* ------------------------------------------------------------------------
     Rush Innovations palette — sampled from the pixels of public/img/logo.png.
     --navy is the logo's own background colour, so the emblem sits on any dark
     surface with no visible tile edge. Keep it that way if the logo changes.

     The variables are still NAMED --navy and --teal, from the template this app
     was built on, so every rule in this file still resolves. Only the colours
     behind the names are Rush's.
     ------------------------------------------------------------------------ */
  --navy: #1B191A;        /* logo background — top bars, email header, PDF viewer */
  --navy-2: #2E2A2B;      /* lifted, for gradients and hover */
  --teal: #B02125;        /* the red in the R and the mane — primary actions, links */
  --teal-soft: #FBEAEA;   /* red wash — selected rows, callouts */
  --gold: #CD9A2F;        /* the gold of the crown and swoosh — accents, progress */
  --gold-pale: #F3C980;   /* the highlight on the gold — on dark only */
  --ember: #4A1512;       /* the deep red in the mane's shadow — hero gradient */
  --bg: #F7F3EA;          /* warm cream, keyed to the pale gold */
  --card: #ffffff;
  --ink: #1B191A;
  --muted: #7A7168;
  --line: #E7DFD2;
  --ok: #1F7A4D;
  --ok-soft: #E2F4EA;
  --warn: #9A6700;
  --warn-soft: #FFF3D6;
  /* Deliberately a darker, browner red than --teal. When danger and primary are
     the same red, "Not moving forward" looks identical to the approve button. */
  --danger: #7A1410;
  --danger-soft: #F7E6E4;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(27, 25, 26, .08), 0 4px 16px rgba(27, 25, 26, .06);
  --font: Barlow, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.5; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 760px; }
.wrap.wide { max-width: 1320px; }

/* ---------- top bars ---------- */
.topbar { background: var(--navy); color: #fff; }
.topbar .wrap, .topbar .wrap.wide { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
/* The logo is fitted INTO a box whose height HR controls, rather than given a fixed
   size — object-fit keeps any aspect ratio intact, so a square emblem and a wide
   lockup both sit correctly on the bar without per-logo CSS. */
.brand .mark { height: var(--logo-bar-h, 42px); width: auto; max-width: 260px;
  object-fit: contain; flex: none; display: block; background: var(--logo-bg, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.brand .words { display: flex; flex-direction: column; line-height: 1.15; }
.brand:hover { text-decoration: none; }
.brand .name { font-weight: 700; font-size: 17px; letter-spacing: .3px; }
.brand .tag { font-size: 11px; color: var(--gold-pale); font-style: italic; }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topbar nav a { color: #ded7cc; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.topbar nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.topbar nav a.active { background: rgba(255,255,255,.16); color: #fff; }
.topbar .userchip { font-size: 13px; color: #bdb6ad; padding: 0 6px; white-space: nowrap; }
.topbar .account { display: flex; align-items: center; gap: 8px; }

/* Compact, two-row header on phones: brand + account on top, nav as a
   full-width segmented tab bar underneath. Desktop keeps the single row. */
@media (max-width: 700px) {
  .topbar .wrap { flex-wrap: wrap; min-height: 0; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; gap: 10px; }
  .brand .tag { display: none; }
  .brand .name { font-size: 16px; white-space: nowrap; }
  .topbar .account { margin-left: auto; }
  .topbar .userchip { padding: 0 2px; }
  .topbar .userchip .uid { display: none; }
  .topbar nav.tabs { order: 3; flex: 1 1 100%; margin-left: 0; background: rgba(255,255,255,.08); border-radius: 10px; padding: 3px; gap: 3px; flex-wrap: nowrap; }
  .topbar nav.tabs a { flex: 1; text-align: center; padding: 8px 4px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- cards & layout ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin: 18px 0; }
.card h2 { margin: 0 0 6px; font-size: 20px; color: var(--navy); }
.card h3 { margin: 18px 0 8px; font-size: 16px; color: var(--navy); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
hr.soft { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; color: #fff; padding: 52px 0 60px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 50%, var(--ember) 100%); }
/* The emblem, large and dimmed, filling the space to the right of the copy. Painted as
   a background layer so it can never push the text around, and dropped below 900px
   where that space belongs to the words. */
.hero::after {
  content: ""; position: absolute; top: 50%; right: 4%; transform: translateY(-50%);
  width: var(--logo-hero-w, 240px); height: var(--logo-hero-h, 240px); pointer-events: none;
  background: var(--hero-logo) center / contain no-repeat;
  opacity: .55;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.hero .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .hero::after { display: none; } }
.hero h1 { font-size: clamp(28px, 5vw, 40px); margin: 0 0 10px; line-height: 1.15; }
.hero p { font-size: 17px; color: #ded7cc; max-width: 640px; margin: 0 0 26px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: 600; padding: 11px 20px; border-radius: 10px;
  background: var(--teal); color: #fff; text-decoration: none; transition: filter .15s; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.big { font-size: 17px; padding: 14px 26px; }
.btn.secondary { background: #fff; color: var(--navy); border: 1.5px solid var(--line); }
.btn.secondary:hover { border-color: var(--teal); color: var(--teal); }
.btn.ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn.danger { background: var(--danger); }
.btn.subtle { background: var(--teal-soft); color: var(--teal); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.small { font-size: 13px; padding: 7px 13px; border-radius: 8px; }

/* ---------- forms ---------- */
label.field { display: block; margin: 0 0 14px; }
label.field > .lbl, .lbl { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.lbl .req { color: var(--danger); }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=password], select, textarea {
  width: 100%; font-family: var(--font); font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--line);
  border-radius: 9px; background: #fff; color: var(--ink); outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(176,33,37,.13); }
textarea { min-height: 90px; resize: vertical; }
.fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 16px; background: #FBF9F5; }
.fieldset > .legend { font-weight: 700; color: var(--navy); font-size: 15px; margin-bottom: 4px; }
.fieldset > .help { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.radio-group { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.radio-group.inline { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; font-size: 15px; }
.choice:hover { border-color: var(--teal); }
.choice input { margin-top: 3px; accent-color: var(--teal); flex: none; }
.choice.checked { border-color: var(--teal); background: var(--teal-soft); }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.error-box { background: var(--danger-soft); color: var(--danger); border: 1px solid #E9C4BF; border-radius: 9px; padding: 12px 14px; margin: 12px 0; font-size: 14.5px; display: none; }
.error-box.show { display: block; }
.ok-box { background: var(--ok-soft); color: var(--ok); border: 1px solid #bfe4cf; border-radius: 9px; padding: 12px 14px; margin: 12px 0; font-size: 14.5px; }

/* ---------- pills & status ---------- */
.pill { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 11px; border-radius: 99px; white-space: nowrap; }
.pill.submitted { background: #ede7dc; color: var(--navy); }
.pill.under_review { background: var(--warn-soft); color: var(--warn); }
.pill.approved { background: var(--teal-soft); color: var(--teal); }
.pill.completed { background: var(--ok-soft); color: var(--ok); }
.pill.rejected { background: var(--danger-soft); color: var(--danger); }
.pill.pending { background: #ede9e2; color: var(--muted); }
.pill.optional { background: #f5efe2; color: #8a6a14; }

/* ---------- progress ---------- */
.progress { background: var(--line); border-radius: 99px; height: 10px; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--teal), var(--gold)); border-radius: 99px; transition: width .4s; }

/* ---------- wizard steps ---------- */
.steps { display: flex; gap: 6px; margin: 20px 0 8px; flex-wrap: wrap; }
.steps .step { flex: 1; min-width: 52px; text-align: center; font-size: 11.5px; color: var(--muted); }
.steps .step .bar { height: 5px; background: #e0d9cf; border-radius: 4px; margin-bottom: 5px; }
.steps .step.done .bar, .steps .step.current .bar { background: var(--teal); }
.steps .step.current { color: var(--teal); font-weight: 700; }
.wizard-panel { display: none; }
.wizard-panel.active { display: block; }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }

/* ---------- checklist ---------- */
.section-head { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 4px; }
.section-head h2 { font-size: 19px; color: var(--navy); margin: 0; }
.section-head .count { font-size: 13px; color: var(--muted); }
.docrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 8px 0; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .1s; }
.docrow:hover { border-color: var(--teal); text-decoration: none; }
.docrow .tick { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; }
.docrow.completed .tick { background: var(--ok); border-color: var(--ok); }
.docrow .info { flex: 1; min-width: 0; }
.docrow .info .t { font-weight: 600; color: var(--navy); }
.docrow .info .d { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.docrow .chev { color: var(--muted); flex: none; }

/* ---------- doc page ---------- */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .doc-layout { grid-template-columns: 1fr; } }
.pdf-viewer { background: #3a3733; border-radius: var(--radius); padding: 12px; max-height: 82vh; overflow-y: auto; }
.pdf-viewer canvas { display: block; width: 100%; height: auto; margin: 0 auto 12px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.35); background: #fff; }
.pdf-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.action-panel { position: sticky; top: 14px; }
.action-panel .card { margin: 0 0 14px; }

/* ---------- signature widget ---------- */
.sigwidget .tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.sigwidget .tabs button { flex: 1; padding: 8px; border: 1.5px solid var(--line); background: #fff; border-radius: 8px; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.sigwidget .tabs button.active { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.sigwidget canvas.pad { width: 100%; height: 130px; border: 1.5px dashed #b9c4d0; border-radius: 9px; background: #fff; touch-action: none; display: block; }
.sigwidget .typed-row { display: flex; gap: 8px; }
.sigwidget .sig-preview { border: 1.5px solid var(--line); border-radius: 9px; background: #fff; padding: 6px; text-align: center; }
.sigwidget .sig-preview img { max-height: 70px; }
.sigwidget .tools { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

/* ---------- quiz ---------- */
.quiz-q { padding: 14px 0; border-bottom: 1px solid var(--line); }
.quiz-q .qt { font-weight: 600; margin-bottom: 8px; }
.tfrow { display: flex; gap: 8px; }
.tfrow .choice { flex: 1; justify-content: center; }
.match-grid { display: grid; grid-template-columns: 1fr 110px; gap: 8px 10px; align-items: center; }
.match-grid select { padding: 8px; }
.match-key { columns: 2; font-size: 13px; color: var(--muted); margin: 10px 0; }
@media (min-width: 700px) { .match-key { columns: 3; } }

/* ---------- HR tables ---------- */
table.data { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.data th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 14px; background: #f1ede6; border-bottom: 1px solid var(--line); }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tr.rowlink { cursor: pointer; }
table.data tr.rowlink:hover { background: #faf7f2; }
.statcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; }
.statcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.statcard .n { font-size: 26px; font-weight: 700; color: var(--navy); }
.statcard .l { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.statcard.link { text-decoration: none; display: block; }
.statcard.link:hover { border-color: var(--teal); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.toolbar input[type=text] { max-width: 300px; }
.toolbar select { max-width: 190px; }

/* HR detail two-col */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .detail-layout { grid-template-columns: 1fr; } }
.kvlist { margin: 0; }
.kvlist > div { display: grid; grid-template-columns: 220px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid #ede9e2; font-size: 14.5px; }
.kvlist > div:last-child { border-bottom: none; }
.kvlist dt { color: var(--muted); font-weight: 600; font-size: 13px; }
.kvlist dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .kvlist > div { grid-template-columns: 1fr; gap: 1px; } }
.note { background: #FBF9F5; border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; margin: 8px 0; font-size: 14.5px; }
.note .meta { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* footer */
footer.site { padding: 34px 0 44px; color: var(--muted); font-size: 13px; text-align: center; }

/* misc */
.code-display { font-size: 28px; font-weight: 800; letter-spacing: 2px; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--navy); background: var(--teal-soft); border: 2px dashed var(--teal); border-radius: 12px; padding: 14px 20px; display: inline-block; }
.badge-num { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; align-items: center; justify-content: center; margin-right: 8px; }
.print-hide { }

/* ---------- embedded in the public website (/apply?embed=1) ---------- */
body.embed { background: var(--bg); }
body.embed main.wrap { padding-bottom: 24px; }
body.embed main.wrap > div:first-child { margin-top: 8px !important; }