/* ============================================================
   Mix Tape HR Hub — employee pages design system.

   Two typefaces do the work:
     Archivo        — headings and prose
     IBM Plex Mono  — anything that is DATA: codes, dates,
                      labels, small uppercase section markers
   Change the look in one place: the tokens below.
   Mobile first; verified at 360px wide.
   ============================================================ */

:root {
  /* color tokens (the only colors used anywhere) */
  --paper:      #E9EBE8;  /* page background, cool off-white */
  --panel:      #FFFFFF;  /* cards and content surfaces */
  --ink:        #191C1F;  /* primary text */
  --muted:      #6B7178;  /* secondary text (never for essential reading) */
  --rule:       #D2D6D1;  /* borders and dividers */
  --pine:       #1F4B47;  /* structure, headers, secondary actions */
  --pine-soft:  #E4EDEB;  /* selected / highlighted states */
  --amber:      #D18A12;  /* the one main call-to-action color */
  --amber-soft: #FBF0DC;  /* warning backgrounds */
  --alert:      #BC4038;  /* errors only */
  --alert-soft: #F9E6E4;  /* error backgrounds */

  --font-sans: "Archivo", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* spacing scale: 4, 8, 12, 16, 24, 32, 48 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;              /* 16px minimum so phones don't zoom on focus */
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}

/* ---------- header: wordmark + language switch ---------- */
.site-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px 0;
}
.brand {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pine);
}

/* The language switch: a clear two-option control, visible
   before login, big enough for thumbs. */
.lang-toggle {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.lang-toggle button {
  min-height: 44px;
  min-width: 104px;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
}
.lang-toggle button + button { border-left: 1px solid var(--rule); }
.lang-toggle button.lang-active {
  background: var(--pine);
  color: #fff;
  font-weight: 600;
}

/* ---------- layout ---------- */
main {
  max-width: 680px;             /* comfortable reading measure */
  margin: 0 auto;
  padding: 8px 16px 48px;
}
.page-login main { max-width: 460px; }  /* login: one narrow centered column */

.card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 24px 20px;
  margin-top: 24px;
  box-shadow: 0 1px 2px rgba(25, 28, 31, 0.05);
}

/* ---------- type ---------- */
h2 {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Breathing room between stacked sections inside one panel. */
.card h3:not(:first-child) { margin-top: 24px; }
.eligibility-callout h3 { margin-top: 0; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

/* Small uppercase mono marker — used for form labels and
   section eyebrows. This is a DATA voice, not prose. */
label,
.overline {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pine);
}

/* ---------- the code input ---------- */
input#code {
  width: 100%;
  padding: 14px 12px;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--muted);
  border-radius: 4px;
}
input#code::placeholder { color: var(--muted); opacity: 0.7; }
input#code:focus {
  border-color: var(--pine);
}

/* ---------- buttons ---------- */
button.primary {
  width: 100%;
  min-height: 54px;
  margin-top: 16px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);               /* dark on amber: strong contrast */
  background: var(--amber);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.15s;
}
button.primary:hover { filter: brightness(0.94); }
button.primary:disabled { opacity: 0.55; cursor: default; }

button.secondary {
  min-height: 44px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--pine);
  background: var(--panel);
  border: 1px solid var(--pine);
  border-radius: 4px;
  cursor: pointer;
}
button.secondary:hover { background: var(--pine-soft); }

/* Text links: pine, underlined, clearly clickable. */
main a:not(.pdf-link) {
  color: var(--pine);
  font-weight: 600;
  text-underline-offset: 2px;
}

/* Every interactive element gets an unmissable focus ring. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--pine);
  outline-offset: 2px;
}

/* ---------- messages ---------- */
.error {
  display: none;
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--alert);
  background: var(--alert-soft);
  border: 1px solid var(--alert);
  border-radius: 4px;
}
.error.visible { display: block; }

.success {
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--pine);
  background: var(--pine-soft);
  border: 1px solid var(--pine);
  border-radius: 4px;
}

/* ---------- help card ---------- */
.help h3 { font-size: 17px; }
.help p { font-size: 16px; }

/* ---------- benefits page pieces ---------- */

/* Eligibility: the one thing people most need to read,
   set apart on a soft pine panel. */
.eligibility-callout {
  margin: 0 0 24px;
  padding: 16px;
  background: var(--pine-soft);
  border: 1px solid var(--pine);
  border-radius: 4px;
}
.eligibility-callout h3 { color: var(--pine); }
.eligibility-callout p:last-child { margin-bottom: 0; }

ol.steps {
  margin: 0;
  padding-left: 24px;
}
ol.steps li { margin-bottom: 12px; padding-left: 4px; }

.pdf-link {
  display: block;
  min-height: 54px;
  padding: 14px 16px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--pine);
  border-radius: 4px;
  transition: filter 0.15s;
}
.pdf-link:hover { filter: brightness(1.12); }

/* Version / effective date: data, so mono. */
.meta-line {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

/* ---------- wider screens ---------- */
@media (min-width: 640px) {
  .site-head {
    flex-direction: row;
    justify-content: space-between;
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 16px 0;
  }
  .page-login .site-head { max-width: 460px; }
  .card { padding: 32px; }
  h2 { font-size: 30px; }
}

/* ---------- print view ----------
   Handed to deskless staff on paper: black on white, no
   chrome, no buttons, stands entirely on its own. */
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .site-head, .lang-toggle, .no-print, button, .pdf-link { display: none !important; }
  main { max-width: none; padding: 0; }
  .card {
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 14pt;
    background: #fff;
  }
  .eligibility-callout {
    background: #fff;
    border: 1.5pt solid #000;
    padding: 10pt;
  }
  .eligibility-callout h3 { color: #000; }
  label, .overline { color: #000; }
  .meta-line { color: #000; }
  h2 { font-size: 16pt; }
  h3 { font-size: 13pt; }
}