/* Public pages (_PublicLayout: the /trial sign-up and the /apply/{token} job page): plain Bootstrap in the theme
   engine's colours. The palette block in the layout writes --at-* / --st-* for html[data-mode=light]: AtashiTech's on
   the sign-up pages, the employer's tenant palette on the apply page. Always light. No brand hex literals here. */

html[data-mode] body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  background: var(--at-page);
  color: var(--at-body);
  --bs-body-color: var(--at-body);
  --bs-secondary-color: var(--at-muted);
  --bs-border-color: var(--at-line);
  --bs-link-color-rgb: var(--at-accent-text-rgb);
  --bs-link-hover-color-rgb: var(--at-accent-text-rgb);
  --bs-focus-ring-color: rgba(var(--at-accent-rgb), .35);
}
/* The design's 3px line along the top. */
html[data-mode] body::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--at-heading), var(--at-accent), var(--at-topline-end));
}
html[data-mode] h1, html[data-mode] h2, html[data-mode] h3, html[data-mode] .h3, html[data-mode] .h4, html[data-mode] .h5 { color: var(--at-heading); }
html[data-mode] .text-muted { color: var(--at-muted) !important; }

.hr-public { max-width: 46rem; margin: 2rem auto; padding: 0 16px; }
html[data-mode] .card { background: var(--at-surface); border: 1px solid var(--at-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(var(--at-shadow-rgb), .06); color: var(--at-body); }
.employer { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.employer img { max-height: 48px; max-width: 160px; }
.hr-public-mark { height: 40px; width: auto; }
.description { white-space: pre-line; }
/* Honeypot field: off-screen for people, still filled in by bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

html[data-mode] .form-label { color: var(--at-ink); font-weight: 500; }
html[data-mode] .form-text { color: var(--at-muted); }
html[data-mode] .form-control, html[data-mode] .form-select { border-color: var(--at-line-strong); color: var(--at-ink); background-color: var(--at-surface); }
html[data-mode] .form-control:focus, html[data-mode] .form-select:focus { border-color: var(--at-accent); box-shadow: 0 0 0 3px rgba(var(--at-accent-rgb), .25); }
html[data-mode] .form-check-input:checked { background-color: var(--at-button); border-color: var(--at-button); }

html[data-mode] .btn { border-radius: 6px; font-weight: 600; }
html[data-mode] .btn-primary { background: var(--at-button); border-color: var(--at-button); color: var(--at-button-text); }
html[data-mode] .btn-primary:hover, html[data-mode] .btn-primary:focus { background: var(--at-button-hover); border-color: var(--at-button-hover); color: var(--at-button-hover-text); }
html[data-mode] .btn-link { color: var(--at-accent-text); }
/* "Talk to sales" stays a status colour (warning), never the brand. */
html[data-mode] .btn-warning { background: var(--st-warn); border-color: var(--st-warn); color: #FFFFFF; }
html[data-mode] .border-warning { border-color: var(--st-warn) !important; }

html[data-mode] .alert-danger { background: rgba(var(--st-bad-rgb), .1); border-color: rgba(var(--st-bad-rgb), .3); color: var(--st-bad-text); }
html[data-mode] .alert-info { background: rgba(var(--st-info-rgb), .1); border-color: rgba(var(--st-info-rgb), .3); color: var(--st-info-text); }
html[data-mode] .alert-secondary { background: var(--at-tint); border-color: var(--at-line); color: var(--at-body); }