/* ==========================================================================
   RKS  ·  tawaran.css
   Two things app.css does not cover: the offer letter, and the vacancies
   board. Loaded only by semak.html.

   Everything here is written against the tokens already declared in
   app.css, so both themes come out right without a second palette. The one
   exception is the letter itself: on paper it is always black ink on white
   paper, because a letter printed out of a dark theme would eat a cartridge
   and come back unreadable.
   ========================================================================== */

/* ── the vacancies board ───────────────────────────────────────────────── */
.kekos__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  justify-content: space-between;
}
.kekos__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kekos__pill[data-open="true"] {
  background: var(--wait-bg);
  border-color: var(--wait-line);
  color: var(--wait-ink);
}
.kekos__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: currentColor;
  flex: none;
}
.kekos__n {
  display: block;
  margin-top: var(--s5);
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.kekos__lab {
  display: block;
  margin-top: var(--s2);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
}
.kekos__split {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.kekos__split div { min-width: 7rem; }
.kekos__split b {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kekos__split span {
  display: block;
  font-size: .86rem;
  color: var(--text-muted);
}
.kekos__stamp {
  margin-top: var(--s5);
  font-size: .82rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── the offer letter, on screen ───────────────────────────────────────── */
.stbox {
  margin-top: var(--s5);
  padding: var(--s5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--card-2);
}
.stbox__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s4);
}

.surat {
  margin-top: var(--s5);
  padding: clamp(var(--s5), 6vw, 46px);
  background: #FFFFFF;
  color: #101010;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  /* The site self hosts only one cut of IBM Plex Serif, 500 italic, so a
     letter set in it would come out synthesised or silently in Georgia.
     Times is what the typed letters already use, it is on every machine
     that will print this, and it is what an official letter looks like. */
  font-family: 'Times New Roman', Times, Georgia, serif;
  font-size: 15px;
  line-height: 1.62;
  overflow-x: auto;
}
.surat * { color: inherit; }
.surat__crest {
  display: block;
  width: 62px;
  height: 62px;
  margin: 0 auto var(--s3);
}
.surat__org {
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .02em;
}
.surat__org b { display: block; font-size: 15px; letter-spacing: .06em; }
.surat__rule { border: 0; border-top: 2px solid #101010; margin: var(--s4) 0 var(--s5); }
.surat__ref {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3);
  font-size: 13.5px;
}
.surat__ref span { font-variant-numeric: tabular-nums; }
.surat table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s4) 0;
  font-size: 14.5px;
}
.surat td {
  padding: 5px 0;
  vertical-align: top;
  border-bottom: 1px solid #E4E4E4;
}
.surat td:first-child {
  width: 38%;
  padding-right: var(--s4);
  color: #4A4A4A;
}
.surat h2 {
  margin: var(--s5) 0 var(--s4);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.45;
  text-wrap: balance;
}
.surat p { margin: 0 0 var(--s4); }
/* Justification is for the printed page, where the measure is 17cm and
   the spacing holds. In the result column on a phone it opens rivers. */
@media print { html[data-cetak] .surat p { text-align: justify; }
               html[data-cetak] .surat p.surat__hal { text-align: left; } }
.surat em.surat__motto {
  display: block;
  text-align: center;
  margin: var(--s5) 0;
  font-size: 15px;
}
.surat__sign { margin-top: var(--s6); font-size: 14px; line-height: 1.5; }
.surat__sign b { display: block; margin-top: 42px; text-transform: uppercase; }
.surat__foot {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid #E4E4E4;
  font-size: 11.5px;
  color: #5A5A5A;
  text-align: center;
}

/* ── the offer letter, on paper ────────────────────────────────────────── */
@media print {
  @page { size: A4; margin: 18mm 20mm 16mm 20mm; }

  /* Only when the reader asked for the letter. Ctrl-P on the page itself
     still prints the page, which is what somebody pressing Ctrl-P meant. */
  html[data-cetak] body * { visibility: hidden; }
  html[data-cetak] .surat,
  html[data-cetak] .surat * { visibility: visible; }
  html[data-cetak] .surat {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #FFFFFF;
    font-size: 11.2pt;
    line-height: 1.55;
  }
  html[data-cetak] .surat p { orphans: 3; widows: 3; }
  html[data-cetak] .surat__sign { break-inside: avoid; }
}