/* ============================================================================
   EmployeeIQ - Job Fair theme
   ----------------------------------------------------------------------------
   The single source of truth for what this product looks like. Every colour the
   job fair uses is a custom property declared here; no view, no page-level style
   block and no inline attribute may name a colour of its own, and there is a
   test that fails when one does.

   The reason is per-tenant branding. A property sets one colour, and the layout
   emits a handful of values into :root to override the defaults below. That only
   works if the components read variables - a hardcoded purple in one card is a
   card that stays purple on an orange property's registration page, and nobody
   notices until a candidate does.

   Palette shape and proportions come from docs/design/EmployeeIQ-JobFair-Overview.html.
   ============================================================================ */
:root {
  /* -- brand: overridden per tenant, in the layout head, values only -------- */
  --jf-brand: #8d3a96;
  --jf-brand-dark: #6b2c73;
  --jf-brand-light: #f4ecf5;
  --jf-on-brand: #ffffff;
  /* -- neutrals: not tenant configurable ---------------------------------- */
  --jf-ink: #1f2430;
  --jf-muted: #6a7280;
  --jf-line: #e6e2ea;
  --jf-bg: #faf9fb;
  --jf-card: #ffffff;
  /* -- the product's own accent -------------------------------------------
       Gold, and #d4af37 rather than anything darker because contrast decided it
       rather than taste. The one use the brand rules mandate is the wordmark's
       second line on the purple hero, and that is display-size text, so the bar
       is 3:1. Measured against the gradient: 4.47 on the deep end, 3.14 on the
       base purple, and 1.78 on the light end - which is why the wordmark sits on
       the deep half and never drifts down the gradient.

       At the other end of the permitted range #c9a227 manages only 2.73 on base
       purple, so it fails the one thing gold is for here.

       On white it is 2.10, which is exactly why gold is never a text colour on
       white. As a fill it is fine: ink on gold is 7.38.

       Not tenant settable. The admin side wears the product's brand; the tenant's
       colours belong to the pages their candidates see. */
  --jf-gold: #d4af37;
  --jf-gold-light: #faf3e0;
  /* -- status ------------------------------------------------------------- */
  --jf-green: #1e9e6a;
  --jf-amber: #d97706;
  --jf-red: #c0392b;
  /* The washes behind a notice. Tokens rather than literals repeated per sheet:
       the admin chrome needs the same danger wash for a failed login that the
       candidate pages use for a refused upload. */
  --jf-danger-bg: #fdeeec;
  --jf-danger-ink: #8c2119;
  --jf-warning-bg: #fdf6ec;
  /* -- shape -------------------------------------------------------------- */
  --jf-radius: 14px;
  --jf-radius-sm: 9px;
  --jf-radius-pill: 20px;
  --jf-shadow: 0 1px 3px rgba(31, 36, 48, 0.06);
  --jf-shadow-lift: 0 8px 24px rgba(31, 36, 48, 0.1);
  /* A thumb, not a mouse pointer. Every interactive element on a candidate
       page is at least this tall. */
  --jf-touch: 44px;
}
/* ============================================================================
   Candidate-facing page shell
   ============================================================================ */
.jf-page {
  background: var(--jf-bg);
  color: var(--jf-ink);
  min-height: 100vh;
  /* Room for the sticky call to action, so the last opening in a list is never
       hidden behind it. */
  padding-bottom: 6.5rem;
  -webkit-text-size-adjust: 100%;
}
/* The brand bar. Gradient rather than flat, matching the pitch document's hero,
   and it degrades to a solid brand colour wherever gradients are not painted. */
.jf-appbar {
  background: var(--jf-brand);
  background: linear-gradient(135deg, var(--jf-brand-dark), var(--jf-brand) 75%);
  color: var(--jf-on-brand);
}
.jf-appbar a,
.jf-appbar .btn-link {
  color: var(--jf-on-brand);
}
/* ---------------------------------------------------------------------------
   The language switcher.

   This is where the first live browser pass found two bugs with one cause. The
   bar sets color: var(--jf-on-brand) on itself, and that cascades into anything
   inside it - so a Bootstrap .btn-light rendered as a white pill with white text,
   and the dropdown menu it opened was white text on a white menu. Both were
   invisible to a structural test, which only ever asked whether the classes were
   present.

   So the switcher gets a treatment of its own rather than borrowing one: an
   outlined button that carries the bar's own text colour, and a menu that leaves
   the bar's cascade behind and goes back to ink on card.
   --------------------------------------------------------------------------- */
.jf-appbar-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--jf-touch);
  padding: 0.4rem 0.85rem;
  border-radius: var(--jf-radius-sm);
  /* currentColor, so it tracks --jf-on-brand: white on a dark brand, ink on a
       light one, and legible on both without a second variable. */
  border: 1.5px solid currentColor;
  background: transparent;
  color: var(--jf-on-brand);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.jf-appbar-action:hover,
.jf-appbar-action:focus,
.jf-appbar-action[aria-expanded="true"] {
  /* A wash of the bar's own text colour. Works whichever way round the pair is,
       which a fixed rgba(255,255,255,...) would not. */
  background: color-mix(in srgb, currentColor 15%, transparent);
  color: var(--jf-on-brand);
}
/* The menu is not on the brand colour, so it must not inherit the brand's text
   colour. Stated rather than left to the cascade - that inheritance is the bug. */
.jf-appbar .dropdown-menu {
  background: var(--jf-card);
  border: 1px solid var(--jf-line);
  border-radius: var(--jf-radius-sm);
  box-shadow: var(--jf-shadow-lift);
  padding: 0.35rem;
  min-width: 11rem;
}
.jf-appbar .dropdown-item {
  color: var(--jf-ink);
  border-radius: 6px;
  /* A menu on a phone is a list of tap targets. */
  min-height: var(--jf-touch);
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
}
.jf-appbar .dropdown-item:hover,
.jf-appbar .dropdown-item:focus {
  background: var(--jf-brand-light);
  color: var(--jf-brand-dark);
}
/* The language they are already reading in. Solid brand, with the text colour the
   derivation proved readable on it. */
.jf-appbar .dropdown-item.active,
.jf-appbar .dropdown-item:active {
  background: var(--jf-brand);
  color: var(--jf-on-brand);
}
/* The tenant's own mark, when they have uploaded one. Bounded rather than sized:
   a logo arrives at whatever aspect ratio the property's designer chose, and the
   header must not change height because of it. */
.jf-logo {
  max-height: 40px;
  max-width: 190px;
  width: auto;
  object-fit: contain;
}
.jf-appbar-title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
}
.jf-appbar-sub {
  font-size: 0.78rem;
  opacity: 0.85;
}
/* Reading widths. A candidate page is one column on a phone and must not become a
   wall of text on a laptop; a kiosk is a desk-mounted tablet and gets more room. */
.jf-narrow {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}
.jf-form {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
.jf-kiosk-width {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}
/* ============================================================================
   The wordmark
   ----------------------------------------------------------------------------
   Text, not an image - there is no asset yet, and a well-set piece of type is
   better than a placeholder picture of one. The two halves come from
   ProductWordmark, which splits the one constant, so the login page and the admin
   header cannot end up naming the product differently.
   ============================================================================ */
.jf-wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
  /* Tightened, because the mark is set large and default tracking makes a long
       compound word look loose. */
  letter-spacing: -0.01em;
}
.jf-wordmark:hover,
.jf-wordmark:focus {
  text-decoration: none;
}
.jf-wordmark-primary {
  font-weight: 800;
  color: var(--jf-on-brand);
}
/* The weight contrast is the design: heavy mark, light descriptor, and the gold
   doing the separating rather than a rule or a bullet. Letter-spaced open so the
   lighter line reads as deliberate next to the bold one above it. */
.jf-wordmark-accent {
  font-weight: 400;
  color: var(--jf-gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* On a light surface the mark goes to ink. Gold stays gold - it is legible on
   white as a *fill* and never used as text there, so the accent line switches to
   the brand colour instead. */
.jf-wordmark-on-light .jf-wordmark-primary {
  color: var(--jf-ink);
}
.jf-wordmark-on-light .jf-wordmark-accent {
  color: var(--jf-brand);
}
/* Sizes. Display for the login page, small for a header slot. */
.jf-wordmark-lg .jf-wordmark-primary {
  font-size: 2.1rem;
}
.jf-wordmark-lg .jf-wordmark-accent {
  font-size: 0.78rem;
}
.jf-wordmark-sm .jf-wordmark-primary {
  font-size: 1.1rem;
}
.jf-wordmark-sm .jf-wordmark-accent {
  font-size: 0.58rem;
}
/* The compact mark: initials, for a slot too narrow for the name - a minimized
   sidebar is about seventy pixels wide, and the full mark either wraps or is cut
   in half there. It takes the accent's colours rather than the mark's, because it
   is the same two letters the favicon shows. */
.jf-wordmark-monogram {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--jf-gold);
}
/* And follows the same rule the accent line does: gold is not a text colour on a
   pale surface, so on light it is the brand instead. Two letters at 1.25rem are
   small text by the contrast standard - they get the 4.5:1 bar, not the 3:1 one. */
.jf-wordmark-on-light .jf-wordmark-monogram {
  color: var(--jf-brand);
}
.jf-wordmark-compact {
  align-items: center;
}
/* ============================================================================
   Cards
   ============================================================================ */
.jf-card {
  background: var(--jf-card);
  border: 1px solid var(--jf-line);
  border-radius: var(--jf-radius);
  box-shadow: var(--jf-shadow);
}
.jf-card + .jf-card {
  margin-top: 1.25rem;
}
.jf-card-body {
  padding: 1.375rem;
}
.jf-card-head {
  padding: 1rem 1.375rem;
  border-bottom: 1px solid var(--jf-line);
  font-weight: 700;
  font-size: 1.0625rem;
}
/* Rows inside a card that reads as a list - the openings under a category. */
.jf-row + .jf-row {
  border-top: 1px solid var(--jf-line);
}
.jf-row {
  padding: 1rem 1.375rem;
}
/* ============================================================================
   Type
   ============================================================================ */
.jf-h1 {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--jf-ink);
}
.jf-h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--jf-ink);
}
.jf-lede {
  color: var(--jf-muted);
  font-size: 1rem;
}
.jf-muted {
  color: var(--jf-muted);
}
.jf-fine {
  color: var(--jf-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}
/* The uppercase brand kicker above a section heading. */
.jf-kicker {
  color: var(--jf-brand);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
/* ---------------------------------------------------------------------------
   Colour utilities. These exist so that a view never carries a style attribute:
   the rule is that markup names a role, and only this file knows what colour a
   role is. A test enforces the hex half of that; these classes are what make the
   rule liveable.
   --------------------------------------------------------------------------- */
.jf-text-brand {
  color: var(--jf-brand);
}
.jf-text-success {
  color: var(--jf-green);
}
.jf-text-warning {
  color: var(--jf-amber);
}
.jf-text-danger {
  color: var(--jf-red);
}
.jf-text-ink {
  color: var(--jf-ink);
}
.jf-bg-brand-light {
  background: var(--jf-brand-light);
}
a.jf-text-brand:hover {
  color: var(--jf-brand-dark);
}
/* ============================================================================
   Buttons
   ============================================================================ */
.jf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--jf-touch);
  padding: 0.7rem 1.15rem;
  border: 1.5px solid transparent;
  border-radius: var(--jf-radius-sm);
  background: var(--jf-brand);
  color: var(--jf-on-brand);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}
.jf-btn:hover,
.jf-btn:focus {
  background: var(--jf-brand-dark);
  color: var(--jf-on-brand);
  text-decoration: none;
}
.jf-btn:disabled,
.jf-btn.disabled {
  opacity: 0.55;
  cursor: default;
}
.jf-btn-ghost {
  background: var(--jf-card);
  color: var(--jf-brand);
  border-color: var(--jf-brand);
}
.jf-btn-ghost:hover,
.jf-btn-ghost:focus {
  background: var(--jf-brand-light);
  color: var(--jf-brand-dark);
}
.jf-btn-block {
  display: flex;
  width: 100%;
}
/* Visible focus, everywhere, on the brand colour rather than the browser's blue -
   which on some brand colours is nearly invisible. Never removed: keyboard and
   switch users have no other way of knowing where they are. */
.jf-page :focus-visible,
.jf-brandable :focus-visible {
  outline: 3px solid var(--jf-brand);
  outline-offset: 2px;
}
/* The sticky action bar at the bottom of a candidate page. */
.jf-cta-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--jf-line);
}
/* ============================================================================
   Pills and chips
   ============================================================================ */
/* A pill states a status. Solid, small, and it carries its own colour by
   modifier - the default is the brand. */
.jf-pill {
  display: inline-block;
  border-radius: var(--jf-radius-pill);
  padding: 0.2rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--jf-brand);
  color: var(--jf-on-brand);
}
.jf-pill-success {
  background: var(--jf-green);
  color: #ffffff;
}
.jf-pill-warning {
  background: var(--jf-amber);
  color: #ffffff;
}
.jf-pill-quiet {
  background: var(--jf-brand-light);
  color: var(--jf-brand-dark);
}
/* A chip labels a thing rather than a state: an employment type, a category, a
   count. Tinted, never solid, so a row of them does not read as six alarms. */
.jf-chip {
  display: inline-block;
  border-radius: var(--jf-radius-pill);
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--jf-brand-light);
  color: var(--jf-brand-dark);
  white-space: nowrap;
}
.jf-chip-neutral {
  background: var(--jf-bg);
  color: var(--jf-muted);
  border: 1px solid var(--jf-line);
}
/* ============================================================================
   Stat tiles
   ============================================================================ */
.jf-stat-tile {
  background: var(--jf-card);
  border: 1px solid var(--jf-line);
  border-radius: 12px;
  padding: 0.875rem 1rem;
}
.jf-stat-tile b {
  display: block;
  font-size: 1.6rem;
  line-height: 1.15;
  font-weight: 700;
}
.jf-stat-tile span {
  font-size: 0.78rem;
  color: var(--jf-muted);
}
/* The one tile that is shouting. Amber rather than red: a bottleneck is a thing
   to go and look at, not a failure. */
.jf-stat-tile.jf-hot {
  border-color: var(--jf-amber);
  background: #fdf6ec;
}
.jf-stat-tile.jf-hot span {
  color: var(--jf-amber);
  font-weight: 600;
}
/* ============================================================================
   Form fields
   ============================================================================ */
.jf-field {
  margin-bottom: 1.15rem;
}
.jf-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--jf-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.jf-label.jf-required::after {
  content: " *";
  color: var(--jf-brand);
}
.jf-input,
.jf-page .form-control,
.jf-page .form-select {
  width: 100%;
  min-height: var(--jf-touch);
  border: 1.5px solid var(--jf-line);
  border-radius: var(--jf-radius-sm);
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  color: var(--jf-ink);
  background: var(--jf-card);
}
.jf-input:focus,
.jf-page .form-control:focus,
.jf-page .form-select:focus {
  border-color: var(--jf-brand);
  box-shadow: none;
}
/* Filled by the resume parser rather than typed. The pitch document tints these,
   and the tint is what makes "the AI did this, check it" legible without a
   sentence of explanation. */
.jf-input.jf-prefilled {
  border-color: var(--jf-brand);
  background: var(--jf-brand-light);
}
.jf-help {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--jf-muted);
}
/* Checkboxes on a candidate page are targets, not decorations. */
.jf-page .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  border-color: var(--jf-line);
}
.jf-page .form-check-input:checked {
  background-color: var(--jf-brand);
  border-color: var(--jf-brand);
}
.jf-page .form-check {
  min-height: var(--jf-touch);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-left: 0;
}
.jf-page .form-check .form-check-input {
  flex: 0 0 auto;
  margin-left: 0;
}
.jf-page .form-check-label {
  cursor: pointer;
}
/* The consent block. Bordered and tinted so it reads as a thing being agreed to
   rather than as another checkbox in a list. */
.jf-consent {
  border: 1.5px solid var(--jf-brand);
  background: var(--jf-brand-light);
  border-radius: var(--jf-radius-sm);
  padding: 0.875rem 1rem;
}
.jf-consent .form-check-label {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--jf-ink);
}
/* The honeypot's hiding place. Off-screen rather than display:none, because some
   bots skip inputs they can tell are hidden. */
.jf-offscreen {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* The availability grid. Each cell is a tap target on a phone, which a default
   table cell is not. */
.jf-shift-grid td .form-check-input {
  width: 1.5rem;
  height: 1.5rem;
}
.jf-shift-grid td,
.jf-shift-grid th {
  padding: 0.5rem 0.25rem;
  vertical-align: middle;
}
/* ============================================================================
   Notices
   ============================================================================ */
.jf-notice {
  border-radius: var(--jf-radius-sm);
  padding: 0.875rem 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9rem;
  border: 1px solid var(--jf-line);
  background: var(--jf-card);
}
.jf-notice-brand {
  border-color: var(--jf-brand);
  background: var(--jf-brand-light);
  color: var(--jf-brand-dark);
}
.jf-notice-success {
  border-color: var(--jf-green);
  background: #edf8f3;
  color: #106844;
}
.jf-notice-warning {
  border-color: var(--jf-amber);
  background: #fdf6ec;
  color: #8a4b04;
}
.jf-notice-danger {
  border-color: var(--jf-red);
  background: var(--jf-danger-bg);
  color: var(--jf-danger-ink);
}
/* ============================================================================
   The pass
   ----------------------------------------------------------------------------
   The one screen a candidate screenshots and shows to a stranger, so it is the
   one that most has to look like the property. The QR itself stays black on
   white at all times - branding lives around it, never in it, because a tinted
   code is a code that a cheap scanner in bad lobby light cannot read.
   ============================================================================ */
.jf-pass {
  text-align: center;
  overflow: hidden;
}
.jf-pass-head {
  background: var(--jf-brand);
  background: linear-gradient(135deg, var(--jf-brand-dark), var(--jf-brand) 75%);
  color: var(--jf-on-brand);
  padding: 1.125rem 1rem;
}
.jf-pass-body {
  padding: 1.5rem 1.125rem 1.75rem;
}
.jf-pass-qr {
  display: inline-block;
  background: #ffffff;
  border: 10px solid #ffffff;
  outline: 2px solid var(--jf-line);
  border-radius: 6px;
  line-height: 0;
}
.jf-pass-qr img {
  display: block;
  width: 240px;
  max-width: 62vw;
  height: auto;
}
.jf-pass-kiosk .jf-pass-qr img {
  width: 420px;
  max-width: 80vw;
}
.jf-pass-name {
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 0.9rem;
}
.jf-pass-meta {
  font-size: 0.82rem;
  color: var(--jf-muted);
  margin-top: 0.35rem;
}
/* The code in text, for the scanner that will not focus. Monospaced so a member
   of staff can read it out without losing their place. */
.jf-pass-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--jf-muted);
  word-break: break-all;
  margin-top: 0.5rem;
}
/* ============================================================================
   Day-of brand strip (inside Metronic)
   ----------------------------------------------------------------------------
   The admin theme stays Metronic's. This is one strip at the top of the three
   screens that run during a fair, so an operator looking at a tablet across a
   ballroom knows whose event they are working - and so the coordinator's wall
   display reads as the property's, not as our product's.
   ============================================================================ */
.jf-brand-strip {
  background: var(--jf-brand);
  background: linear-gradient(135deg, var(--jf-brand-dark), var(--jf-brand) 75%);
  color: var(--jf-on-brand);
  border-radius: var(--jf-radius);
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.jf-brand-strip .jf-logo {
  max-height: 34px;
}
.jf-brand-strip-name {
  font-weight: 700;
  font-size: 1.0625rem;
}
.jf-brand-strip-meta {
  font-size: 0.8rem;
  opacity: 0.9;
}
/* Pushed to the right end of the strip. */
.jf-brand-strip-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* ============================================================================
   Admin branding screen
   ----------------------------------------------------------------------------
   The preview renders with the real component classes rather than a mock-up of
   them, so it cannot drift from the page it is previewing. .jf-brandable is the
   scope the overriding variables are written into: inside it the property's
   colours apply, outside it Metronic keeps its own.
   ============================================================================ */
.jf-swatch {
  height: 46px;
  border-radius: var(--jf-radius-sm);
  border: 1px solid var(--jf-line);
}
/* A stand-in for a QR code, drawn rather than generated. Its whole job is to show
   that the code stays black on white whatever colour the property picks. */
.jf-qr-stub {
  width: 118px;
  height: 118px;
  background: repeating-linear-gradient(0deg, #111 0 6px, transparent 6px 12px), repeating-linear-gradient(90deg, #111 0 6px, #fff 6px 12px);
}
/* ============================================================================
   Wall display
   ----------------------------------------------------------------------------
   The coordinator board runs on a TV at the side of a ballroom, read from ten or
   fifteen feet away. Everything on it scales up together at the width a TV
   reports, rather than being sized for the laptop it was built on.
   ============================================================================ */
@media (min-width: 1600px) {
  .jf-wall {
    font-size: 1.2rem;
  }
  .jf-wall .jf-stat-tile b {
    font-size: 2.6rem;
  }
  .jf-wall .jf-stat-tile span {
    font-size: 1.05rem;
    /* Muted grey is legible on a laptop at arm's length and is not from
           across a room. On the wall it goes to full ink. */
    color: var(--jf-ink);
  }
  .jf-wall .jf-pill,
  .jf-wall .jf-chip {
    font-size: 0.95rem;
    padding: 0.25rem 0.85rem;
  }
  /* The coordinator board's own markup, which predates this stylesheet. Its
       totals and column headers get the same treatment as a stat tile: the
       number grows, and the label under it stops being grey. */
  .jf-wall .board-total .fs-1 {
    font-size: 3.4rem;
  }
  .jf-wall .board-total .text-muted,
  .jf-wall .board-column .text-muted {
    color: var(--jf-ink) !important;
    font-size: 1rem;
  }
  .jf-wall .board-column {
    min-width: 19rem;
  }
  .jf-wall .board-card {
    font-size: 1.05rem;
  }
}
/* ============================================================================
   Small screens
   ============================================================================ */
@media (max-width: 400px) {
  .jf-card-body,
  .jf-row {
    padding: 1rem;
  }
  .jf-h1 {
    font-size: 1.5rem;
  }
  .jf-pass-qr img {
    width: 200px;
  }
}
@media print {
  .jf-cta-bar,
  .jf-appbar {
    display: none;
  }
  .jf-page {
    background: #ffffff;
    padding-bottom: 0;
  }
  .jf-card {
    box-shadow: none;
  }
}