/* ============================================================================
   JoberTrust - Design System
   ----------------------------------------------------------------------------
   Derived from the approved Stitch screens (Material-3 style token set).

   WHY PLAIN CSS AND NOT @apply:
   The previous base.html defined .btn / .card / .badge / .form-input with
   @apply inside a plain <style> tag. The Tailwind Play CDN only compiles
   @apply inside <style type="text/tailwindcss">, so the browser treated
   @apply as an unknown at-rule and discarded it - every one of those classes
   resolved to nothing. This file uses real CSS properties driven by custom
   properties, so the component layer works:
     - now, on the Play CDN
     - later, after moving to a compiled Tailwind build
     - even if the CDN fails to load
   Nothing here depends on Tailwind being present.

   CASCADE NOTE:
   Every component selector is a single class. The Play CDN injects Tailwind's
   styles after this file, so utility classes still win - which is what we
   want. `class="btn btn-primary text-sm w-full"` keeps working exactly as the
   existing templates expect.

   CLASS CONTRACT - DO NOT RENAME:
   .form-input and .form-select are emitted from 55 widget definitions across
   apps/<app>/forms.py. .btn / .card / .badge are used ~250 times in templates.
   Renaming any of them requires a coordinated Python + template change.
   See DESIGN_SYSTEM.md.
   ========================================================================= */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Brand / ink ------------------------------------------------------ */
  --jt-primary:                 #000000;
  --jt-on-primary:              #ffffff;
  --jt-primary-container:       #131b2e;
  --jt-on-primary-container:    #7c839b;
  --jt-primary-fixed:           #dae2fd;
  --jt-primary-fixed-dim:       #bec6e0;
  --jt-on-primary-fixed:        #131b2e;
  --jt-on-primary-fixed-variant:#3f465c;
  --jt-ink:                     #0f172a;

  /* --- Secondary (the "trust" green) ----------------------------------- */
  --jt-secondary:               #006c49;
  --jt-on-secondary:            #ffffff;
  --jt-secondary-container:     #6cf8bb;
  --jt-on-secondary-container:  #00714d;
  --jt-secondary-fixed:         #6ffbbe;
  --jt-secondary-fixed-dim:     #4edea3;

  /* --- Tertiary --------------------------------------------------------- */
  --jt-tertiary-container:      #00174b;
  --jt-on-tertiary-container:   #497cff;

  /* --- Surfaces --------------------------------------------------------- */
  --jt-background:              #f9f9ff;
  --jt-surface:                 #f9f9ff;
  --jt-surface-bright:          #f9f9ff;
  --jt-surface-container-lowest:#ffffff;
  --jt-surface-container-low:   #f0f3ff;
  --jt-surface-container:       #e7eefe;
  --jt-surface-container-high:  #e2e8f8;
  --jt-surface-container-highest:#dce2f3;
  --jt-surface-variant:         #dce2f3;
  --jt-surface-dim:             #d3daea;
  --jt-inverse-surface:         #2a313d;

  /* --- Content / lines -------------------------------------------------- */
  --jt-on-background:           #151c27;
  --jt-on-surface:              #151c27;
  --jt-on-surface-variant:      #45464d;
  --jt-outline:                 #76777d;
  --jt-outline-variant:         #c6c6cd;

  /* --- Status ----------------------------------------------------------- */
  --jt-success:                 #10b981;
  --jt-warning:                 #f59e0b;
  --jt-info:                    #2563eb;
  --jt-error:                   #ba1a1a;
  --jt-on-error:                #ffffff;
  --jt-error-container:         #ffdad6;
  --jt-on-error-container:      #93000a;

  /* Tinted status backgrounds, for badges and alerts */
  --jt-success-soft:            #ecfdf5;
  --jt-success-line:            #a7f3d0;
  --jt-warning-soft:            #fffbeb;
  --jt-warning-line:            #fde68a;
  --jt-info-soft:               #eff6ff;
  --jt-info-line:               #bfdbfe;
  --jt-error-soft:              #fef2f2;
  --jt-error-line:              #fecaca;

  /* --- Type ------------------------------------------------------------- */
  --jt-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Radii ------------------------------------------------------------ */
  --jt-radius-sm:   0.25rem;
  --jt-radius:      0.5rem;
  --jt-radius-lg:   0.75rem;
  --jt-radius-xl:   1rem;
  --jt-radius-2xl:  1.5rem;
  --jt-radius-full: 9999px;

  /* --- Spacing (mirrors tailwind.config spacing scale) ------------------ */
  --jt-xs:  4px;
  --jt-sm:  8px;
  --jt-md:  16px;
  --jt-lg:  24px;
  --jt-xl:  32px;
  --jt-2xl: 48px;
  --jt-3xl: 64px;
  --jt-gutter: 24px;
  --jt-margin-mobile:  16px;
  --jt-margin-desktop: 32px;

  /* --- Elevation -------------------------------------------------------- */
  --jt-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --jt-shadow:    0 4px 12px rgba(15, 23, 42, 0.08);
  --jt-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);
  --jt-shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.16);

  /* --- Interaction ------------------------------------------------------ */
  --jt-focus-ring:  0 0 0 3px rgba(0, 108, 73, 0.28);
  --jt-transition:  150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layout ----------------------------------------------------------- */
  --jt-page-max:        80rem;  /* original content shell */
  --jt-page-max-narrow: 48rem;  /* long-form reading measure */
  --jt-page-max-form:   28rem;  /* auth + short forms */
  --jt-nav-height:      64px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--jt-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--jt-on-background);
  background-color: var(--jt-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Visible keyboard focus everywhere, without a ring on mouse clicks. */
:focus-visible {
  outline: 2px solid var(--jt-secondary);
  outline-offset: 2px;
}

/* Screen-reader-only text (used for icon-only controls in the nav). */
.jt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip link - first focusable element on the page. */
.jt-skip-link {
  position: absolute;
  left: 50%;
  top: var(--jt-sm);
  z-index: 100;
  transform: translate(-50%, -200%);
  padding: 10px var(--jt-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--jt-on-primary);
  background: var(--jt-primary-container);
  border-radius: var(--jt-radius);
  transition: transform var(--jt-transition);
}
.jt-skip-link:focus { transform: translate(-50%, 0); }

/* Material Symbols sizing default. */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}
.material-symbols-outlined.fill,
.jt-icon-fill { font-variation-settings: "FILL" 1; }

/* ==========================================================================
   3. TYPOGRAPHY  (semantic classes; the Tailwind text-* aliases also exist)
   ========================================================================== */

.jt-display-lg { font-size: 48px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }
.jt-headline-lg { font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; }
.jt-headline-md { font-size: 24px; line-height: 1.3; font-weight: 700; }
.jt-title-lg    { font-size: 20px; line-height: 1.4; font-weight: 600; }
.jt-body-lg     { font-size: 18px; line-height: 1.6; font-weight: 400; }
.jt-body-md     { font-size: 16px; line-height: 1.5; font-weight: 400; }
.jt-body-sm     { font-size: 14px; line-height: 1.5; font-weight: 400; }
.jt-label-md    { font-size: 14px; line-height: 1.2; letter-spacing: 0.01em; font-weight: 600; }
.jt-label-sm    { font-size: 12px; line-height: 1.2; letter-spacing: 0.02em; font-weight: 600; }

/* display-lg steps down on small screens so the hero never overflows. */
@media (max-width: 767px) {
  .jt-display-lg  { font-size: 30px; letter-spacing: -0.01em; }
  .jt-headline-lg { font-size: 28px; }
}

.jt-muted    { color: var(--jt-on-surface-variant); }
.jt-subtle   { color: var(--jt-outline); }

/* ==========================================================================
   4. LAYOUT - page container + section spacing
   ========================================================================== */

/* .page - the standard content well. Replaces the hand-repeated
   `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` in five templates. */
/* Single shared shell. Nothing nests inside it, so this rule alone governs the
   width of every section, the nav and the footer.

   The gutter grows with the shell: 16px on mobile, 32px from 768px, 48px from
   1280px. Without the third step the extra 160px of shell would land entirely
   in the content and the edges would feel tight against the viewport. */
.page {
  width: 100%;
  max-width: var(--jt-page-max);
  margin-inline: auto;
  padding-inline: var(--jt-margin-mobile);
}
@media (min-width: 768px) {
  .page { padding-inline: var(--jt-margin-desktop); }
}
.page-narrow { max-width: var(--jt-page-max-narrow); }  /* article / long form */
.page-form   { max-width: var(--jt-page-max-form); }    /* auth + short forms */
.page-flush  { padding-inline: 0; }

/* Vertical rhythm. Kept on separate classes from .page so a section can
   choose its own container width without inheriting padding twice. */
.section       { padding-block: var(--jt-2xl); }
.section-tight { padding-block: var(--jt-xl); }
.section-loose { padding-block: var(--jt-2xl); }
@media (min-width: 768px) {
  .section       { padding-block: var(--jt-3xl); }
  .section-tight { padding-block: var(--jt-2xl); }
  .section-loose { padding-block: 96px; }
}

/* Section tints from the approved screens. */
.section-alt    { background-color: var(--jt-surface-container-low);
                  border-block: 1px solid var(--jt-outline-variant); }
.section-raised { background-color: var(--jt-surface-container); }
.section-invert { background-color: var(--jt-primary-container);
                  color: var(--jt-on-primary); }
.section-invert .jt-muted { color: var(--jt-on-primary-container); }

/* Stack helper - consistent gaps between cards in a column. */
.jt-stack > * + * { margin-top: var(--jt-md); }
.jt-stack-lg > * + * { margin-top: var(--jt-lg); }

/* ==========================================================================
   5. BUTTONS
   Existing variants (.btn-primary/-secondary/-danger/-success) keep their
   names so no template edits are needed.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jt-sm);
  padding: 12px var(--jt-lg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--jt-radius);
  cursor: pointer;
  transition: background-color var(--jt-transition),
              border-color var(--jt-transition),
              color var(--jt-transition),
              box-shadow var(--jt-transition),
              opacity var(--jt-transition),
              transform var(--jt-transition);
  /* 44px min target - the old text-xs buttons were ~28px tall. */
  min-height: 44px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn:not(:disabled):active { transform: scale(0.98); }

/* --- Filled: the primary action ---------------------------------------- */
.btn-primary {
  color: var(--jt-on-primary);
  background-color: var(--jt-primary);
  box-shadow: var(--jt-shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--jt-primary-container);
  box-shadow: var(--jt-shadow);
}

/* --- Outlined: the secondary action ----------------------------------- */
.btn-secondary {
  color: var(--jt-on-surface);
  background-color: var(--jt-surface-container-lowest);
  border-color: var(--jt-outline-variant);
  box-shadow: var(--jt-shadow-sm);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--jt-surface-container-low);
  border-color: var(--jt-outline);
}

/* --- Status actions ---------------------------------------------------- */
.btn-danger {
  color: var(--jt-on-error);
  background-color: var(--jt-error);
  box-shadow: var(--jt-shadow-sm);
}
.btn-danger:hover:not(:disabled) { background-color: #93000a; }

.btn-success {
  color: var(--jt-on-secondary);
  background-color: var(--jt-secondary);
  box-shadow: var(--jt-shadow-sm);
}
.btn-success:hover:not(:disabled) { background-color: var(--jt-on-secondary-container); }

/* --- Added variants for new work -------------------------------------- */
.btn-outline {
  color: var(--jt-primary);
  background-color: transparent;
  border-color: var(--jt-primary);
}
.btn-outline:hover:not(:disabled) {
  color: var(--jt-on-primary);
  background-color: var(--jt-primary);
}

.btn-ghost {
  color: var(--jt-on-surface-variant);
  background-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  color: var(--jt-on-surface);
  background-color: var(--jt-surface-container);
}

/* --- Sizes / shape ----------------------------------------------------- */
.btn-sm    { min-height: 36px; padding: 8px var(--jt-md); font-size: 12px; }
.btn-lg    { min-height: 52px; padding: 14px var(--jt-xl); font-size: 16px; }
.btn-block { display: flex; width: 100%; }
.btn-icon  { padding: 0; width: 44px; min-width: 44px; }

/* ==========================================================================
   6. FORMS
   .form-input / .form-select are the contract with apps/<app>/forms.py.
   ========================================================================== */

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px var(--jt-md);
  font-family: inherit;
  font-size: 16px; /* 16px avoids iOS Safari zoom-on-focus */
  line-height: 1.5;
  color: var(--jt-on-surface);
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius);
  transition: border-color var(--jt-transition), box-shadow var(--jt-transition);
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--jt-outline); }

.form-input:hover,
.form-select:hover,
.form-textarea:hover { border-color: var(--jt-outline); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--jt-secondary);
  box-shadow: var(--jt-focus-ring);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  color: var(--jt-outline);
  background-color: var(--jt-surface-container);
  cursor: not-allowed;
}

/* Textareas get .form-input in several forms.py widgets - honour rows. */
textarea.form-input,
.form-textarea {
  min-height: 96px;
  line-height: 1.6;
  resize: vertical;
}

/* Selects: own chevron, since appearance is reset above. */
.form-select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2345464d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--jt-md) center;
  background-size: 18px 18px;
  cursor: pointer;
}

/* File inputs also receive .form-input in the verification templates. */
.form-input[type="file"] {
  padding: var(--jt-sm);
  font-size: 14px;
  cursor: pointer;
}
.form-input[type="file"]::file-selector-button {
  margin-right: var(--jt-md);
  padding: 8px var(--jt-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--jt-on-surface);
  background-color: var(--jt-surface-container);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-sm);
  cursor: pointer;
}

/* Invalid state - pair with aria-invalid="true" for assistive tech. */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid,
[aria-invalid="true"].form-input,
[aria-invalid="true"].form-select {
  border-color: var(--jt-error);
}
.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
[aria-invalid="true"].form-input:focus {
  box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.2);
}

/* Field scaffolding */
.form-field  { margin-bottom: var(--jt-md); }
.form-label  {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--jt-on-surface-variant);
}
.form-label .form-required { color: var(--jt-error); }
.form-help   { margin: 6px 0 0; font-size: 12px; color: var(--jt-outline); }
.form-error  { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--jt-error); }

.form-check  { display: flex; align-items: center; gap: var(--jt-sm); font-size: 14px; cursor: pointer; }
.form-divider {
  display: flex;
  align-items: center;
  gap: var(--jt-md);
  margin-block: var(--jt-lg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jt-on-surface-variant);
}
.form-divider::before,
.form-divider::after {
  content: "";
  flex: 1 1 0;
  border-top: 1px solid var(--jt-outline-variant);
}

/* ==========================================================================
   7. CARDS
   .card carries chrome only - never padding. Existing templates supply their
   own (`card p-6`, `card p-5`, `card p-8`), so adding padding here would
   double it on ~72 usages.
   ========================================================================== */

.card {
  display: block;
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-xl);
  box-shadow: var(--jt-shadow-sm);
  transition: box-shadow var(--jt-transition),
              border-color var(--jt-transition),
              transform var(--jt-transition);
}

/* Only links and buttons lift - static cards shouldn't imply interactivity. */
a.card:hover,
button.card:hover,
.card-interactive:hover {
  border-color: var(--jt-primary-fixed-dim);
  box-shadow: var(--jt-shadow);
}

.card-flat    { box-shadow: none; }
.card-raised  { box-shadow: var(--jt-shadow); }
.card-quiet   { background-color: var(--jt-surface-container-low); box-shadow: none; }
.card-invert  { color: var(--jt-on-primary); background-color: var(--jt-primary-container); border-color: transparent; }
.card-pad     { padding: var(--jt-lg); }  /* opt-in, for new markup only */

.card-header {
  padding: var(--jt-lg) var(--jt-lg) 0;
}
.card-divide  { border-top: 1px solid var(--jt-outline-variant); }

/* Empty state, for the "No results found" blocks. */
.jt-empty {
  padding-block: var(--jt-3xl);
  text-align: center;
  color: var(--jt-on-surface-variant);
}
.jt-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--jt-md);
  color: var(--jt-outline);
  background-color: var(--jt-surface-container);
  border-radius: var(--jt-radius-full);
}

/* ==========================================================================
   8. BADGES / CHIPS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--jt-xs);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--jt-radius-full);
}

/* Existing names, kept. */
.badge-verified { color: var(--jt-on-secondary-container); background-color: var(--jt-success-soft); border-color: var(--jt-success-line); }
.badge-pending  { color: #92400e;                         background-color: var(--jt-warning-soft); border-color: var(--jt-warning-line); }
.badge-danger   { color: var(--jt-on-error-container);     background-color: var(--jt-error-soft);   border-color: var(--jt-error-line); }
.badge-brand    { color: var(--jt-ink);                    background-color: var(--jt-surface-container); border-color: var(--jt-primary-fixed-dim); }
.badge-neutral  { color: var(--jt-on-surface-variant);     background-color: var(--jt-surface-container-low); border-color: var(--jt-outline-variant); }

/* Added, to cover the four verification levels without hex literals. */
.badge-success  { color: var(--jt-on-secondary-container); background-color: var(--jt-success-soft); border-color: var(--jt-success-line); }
.badge-info     { color: #1e40af;                         background-color: var(--jt-info-soft);    border-color: var(--jt-info-line); }
.badge-solid    { color: var(--jt-on-primary);             background-color: var(--jt-primary-container); }

.badge-lg { padding: 6px 14px; font-size: 14px; }

/* Chip - the category/service pills. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--jt-on-surface);
  background-color: var(--jt-surface-container-low);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-full);
  text-decoration: none;
  transition: background-color var(--jt-transition), border-color var(--jt-transition), color var(--jt-transition);
}
a.chip:hover {
  color: var(--jt-on-primary);
  background-color: var(--jt-primary);
  border-color: var(--jt-primary);
}

/* ==========================================================================
   9. ALERTS / MESSAGES
   Maps onto Django's message tags: success / error / warning / info / debug.
   `.js-alert` is the dismissal hook - never target colour classes for this.
   The old static/js/main.js matched [class*=bg-green-50], which also hit
   badges and chips and removed them from the page.
   ========================================================================== */

.alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--jt-sm);
  padding: 14px var(--jt-md);
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--jt-radius);
}
.alert + .alert { margin-top: var(--jt-sm); }
.alert-body    { flex: 1 1 auto; min-width: 0; }
.alert-icon    { flex: 0 0 auto; margin-top: 1px; }

.alert-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -6px -4px 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--jt-radius-sm);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--jt-transition), background-color var(--jt-transition);
}
.alert-close:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.06); }

.alert-success { color: var(--jt-on-secondary-container); background-color: var(--jt-success-soft); border-color: var(--jt-success-line); border-left-color: var(--jt-secondary); }
.alert-error   { color: var(--jt-on-error-container);     background-color: var(--jt-error-soft);   border-color: var(--jt-error-line);   border-left-color: var(--jt-error); }
.alert-warning { color: #92400e;                         background-color: var(--jt-warning-soft); border-color: var(--jt-warning-line); border-left-color: var(--jt-warning); }
.alert-info    { color: #1e40af;                         background-color: var(--jt-info-soft);    border-color: var(--jt-info-line);    border-left-color: var(--jt-info); }

.alert-is-leaving { opacity: 0; transition: opacity 300ms ease; }

/* ==========================================================================
   10. NAVIGATION
   ========================================================================== */

.jt-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--jt-surface-bright);
  border-bottom: 1px solid var(--jt-outline-variant);
  box-shadow: var(--jt-shadow-sm);
}

.jt-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jt-md);
  height: var(--jt-nav-height);
}

.jt-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--jt-sm);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--jt-primary);
  text-decoration: none;
  white-space: nowrap;
}
.jt-brand:hover { opacity: 0.85; }

/* Top-level nav link */
.jt-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--jt-xs);
  padding: 8px 2px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--jt-on-surface-variant);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--jt-transition), border-color var(--jt-transition);
}
.jt-nav-link:hover { color: var(--jt-primary); }
.jt-nav-link[aria-current="page"],
.jt-nav-link.is-active {
  color: var(--jt-on-secondary-container);
  border-bottom-color: var(--jt-on-secondary-container);
}

/* Dropdown (Resources, account menu) */
.jt-menu { position: relative; }

.jt-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 16rem;
  padding: var(--jt-sm) 0;
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-lg);
  box-shadow: var(--jt-shadow-lg);
}
.jt-menu-panel[hidden] { display: none; }
.jt-menu-panel-start { left: 0; }
.jt-menu-panel-end   { right: 0; }

.jt-menu-item {
  display: flex;
  align-items: center;
  gap: var(--jt-sm);
  width: 100%;
  padding: 10px var(--jt-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: var(--jt-on-surface-variant);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--jt-transition), color var(--jt-transition);
}
.jt-menu-item:hover,
.jt-menu-item:focus-visible {
  color: var(--jt-primary);
  background-color: var(--jt-surface-container);
}
.jt-menu-item-danger { color: var(--jt-error); }
.jt-menu-item-danger:hover { color: var(--jt-on-error-container); background-color: var(--jt-error-soft); }

.jt-menu-separator {
  height: 1px;
  margin: var(--jt-sm) 0;
  background-color: var(--jt-outline-variant);
  border: 0;
}
.jt-menu-heading {
  padding: var(--jt-sm) var(--jt-md) var(--jt-xs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jt-outline);
}

.jt-menu-caret { transition: transform var(--jt-transition); }
[aria-expanded="true"] .jt-menu-caret { transform: rotate(180deg); }

/* Account avatar */
.jt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--jt-on-primary);
  background-color: var(--jt-primary-container);
  border-radius: var(--jt-radius-full);
  overflow: hidden;
}
.jt-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* The amber "verification incomplete" pip carried over from the old nav. */
.jt-pip {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background-color: var(--jt-warning);
  border-radius: var(--jt-radius-full);
}

/* Icon-only control (hamburger, search) */
.jt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  color: var(--jt-on-surface-variant);
  background: none;
  border: 0;
  border-radius: var(--jt-radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--jt-transition), color var(--jt-transition);
}
.jt-icon-btn:hover { color: var(--jt-primary); background-color: var(--jt-surface-container); }

/* --- Mobile drawer ---------------------------------------------------- */
.jt-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background-color: rgba(15, 23, 42, 0.5);
  opacity: 0;
  transition: opacity 300ms ease;
}
.jt-drawer-overlay[hidden] { display: none; }
.jt-drawer-overlay.is-open { opacity: 1; }

.jt-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: 85%;
  max-width: 24rem;
  background-color: var(--jt-surface);
  box-shadow: var(--jt-shadow-xl);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.jt-drawer[hidden] { display: none; }
.jt-drawer.is-open { transform: translateX(0); }

.jt-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jt-md);
  padding: var(--jt-md) var(--jt-margin-mobile);
  border-bottom: 1px solid var(--jt-outline-variant);
}
.jt-drawer-body { flex: 1 1 auto; padding: var(--jt-md) var(--jt-margin-mobile); }
.jt-drawer-foot {
  display: flex;
  flex-direction: column;
  gap: var(--jt-sm);
  padding: var(--jt-md) var(--jt-margin-mobile) var(--jt-lg);
  border-top: 1px solid var(--jt-outline-variant);
}

.jt-drawer-link {
  display: flex;
  align-items: center;
  gap: var(--jt-md);
  padding: 14px var(--jt-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--jt-on-surface);
  background: none;
  border: 0;
  border-radius: var(--jt-radius-lg);
  font-family: inherit;
  width: 100%;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--jt-transition), color var(--jt-transition);
}
.jt-drawer-link:hover { background-color: var(--jt-surface-container); }
.jt-drawer-link[aria-current="page"] {
  color: var(--jt-on-secondary-container);
  background-color: var(--jt-secondary-container);
}
.jt-drawer-toggle { justify-content: space-between; }

.jt-drawer-sub { padding: var(--jt-xs) 0 var(--jt-sm) 52px; }
.jt-drawer-sub[hidden] { display: none; }
.jt-drawer-sub a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  color: var(--jt-on-surface-variant);
  text-decoration: none;
}
.jt-drawer-sub a:hover { color: var(--jt-primary); }

/* Body scroll lock while the drawer is open. */
body.jt-scroll-locked { overflow: hidden; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.jt-footer {
  margin-top: auto;
  color: var(--jt-on-primary-container);
  background-color: var(--jt-primary-container);
  border-top: 1px solid rgba(124, 131, 155, 0.2);
}
.jt-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jt-xl);
}
@media (min-width: 1024px) {
  .jt-footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .jt-footer-brand { grid-column: span 2; }
}
.jt-footer-brand-name {
  display: block;
  margin-bottom: var(--jt-md);
  font-size: 24px;
  font-weight: 700;
  color: var(--jt-surface-bright);
}
.jt-footer-heading {
  margin: 0 0 var(--jt-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--jt-surface-bright);
}
.jt-footer-list { margin: 0; padding: 0; list-style: none; }
.jt-footer-list li + li { margin-top: 10px; }
.jt-footer-link {
  font-size: 14px;
  color: rgba(124, 131, 155, 0.95);
  text-decoration: none;
  transition: color var(--jt-transition);
}
.jt-footer-link:hover { color: var(--jt-surface-bright); text-decoration: underline; }

.jt-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(124, 131, 155, 0.9);
  border: 1px solid rgba(124, 131, 155, 0.35);
  border-radius: var(--jt-radius-full);
  transition: color var(--jt-transition), border-color var(--jt-transition);
}
.jt-footer-social:hover { color: var(--jt-surface-bright); border-color: var(--jt-surface-bright); }
.jt-footer-social svg { width: 18px; height: 18px; fill: currentColor; }

.jt-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--jt-md);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--jt-2xl);
  padding-top: var(--jt-lg);
  border-top: 1px solid rgba(124, 131, 155, 0.25);
  font-size: 13px;
  color: rgba(124, 131, 155, 0.75);
}
@media (min-width: 768px) {
  .jt-footer-bottom { flex-direction: row; }
}

/* ==========================================================================
   12. MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   13. PRINT
   ========================================================================== */

@media print {
  .jt-nav,
  .jt-footer,
  .jt-drawer,
  .jt-drawer-overlay,
  .jt-skip-link,
  .alert-close { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ddd; }
}

/* ==========================================================================
   14. RESPONSIVE VISIBILITY + LAYOUT HELPERS

   These exist because this stylesheet loads AFTER the Tailwind Play CDN, which
   is deliberate: it is what lets the component layer beat Tailwind's preflight
   and the @tailwindcss/forms base styles. Moving this file earlier would let
   [type='text'] from the forms plugin override every .form-input.

   The side effect is that a Tailwind display utility loses to a component
   class that sets display. `class="jt-icon-btn md:hidden"` stayed visible on
   desktop for exactly that reason.

   So visibility is handled here instead. These rules only ever set
   display:none -- when an element is visible its own component display applies
   untouched, so no value needs restoring per element. Being last in the file,
   they win on source order without !important.
   ========================================================================== */

@media (max-width: 767px)  { .jt-desktop-only { display: none; } }
@media (min-width: 768px)  { .jt-mobile-only  { display: none; } }
@media (max-width: 1023px) { .jt-wide-only    { display: none; } }

/* Page shell, so base.html needs no utility classes on body/main. */
.jt-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@supports (min-height: 100dvh) {
  .jt-body { min-height: 100dvh; }
}
.jt-main { flex: 1 1 auto; }

/* Nav internals */
.jt-nav-links { display: none; }
@media (min-width: 768px) {
  .jt-nav-links {
    display: flex;
    align-items: center;
    gap: var(--jt-xl);
  }
}

.jt-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--jt-sm);
}

/* Account trigger: avatar + optional verification pip, wider than a bare icon. */
.jt-account-trigger {
  width: auto;
  padding-inline: 6px;
  gap: var(--jt-sm);
}

/* Drawer accordion label */
.jt-drawer-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--jt-md);
}

/* Footer social row */
.jt-footer-social-row {
  display: flex;
  gap: var(--jt-md);
  margin-top: var(--jt-lg);
}

/* Utility bits used by the partials, so they do not depend on Tailwind. */
.jt-mt-auto    { margin-left: auto; }
.jt-menu-form  { display: block; width: 100%; }

/* ==========================================================================
   15. PROFESSIONAL CARD

   Shared component: templates/partials/professional_card.html
   Lives here rather than in a page stylesheet because Browse and Search will
   reuse the same partial. Currently rendered by the home page only.

   Whole-card click uses the stretched-link pattern: the card is an <article>
   and the CTA anchor's ::after covers it. That gives one tab stop, a real
   focusable link, and valid HTML -- nesting a button inside a card-wide <a>
   would not be.
   ========================================================================== */

.pro-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius-lg);
  box-shadow: var(--jt-shadow-sm);
  min-width: 0;
  transition: box-shadow var(--jt-transition), border-color var(--jt-transition);
}

.pro-card:hover {
  border-color: var(--jt-primary-fixed-dim);
  box-shadow: var(--jt-shadow);
}

/* The stretched link's own outline would trace the small CTA, so ring the
   whole card instead -- the click target and the focus indicator match. */
.pro-card:focus-within {
  outline: 2px solid var(--jt-secondary);
  outline-offset: 2px;
  border-color: var(--jt-secondary);
}

/* --- Top row: avatar + verification badge -------------------------------- */

.pro-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--jt-sm);
  margin-bottom: 12px;
}

.pro-card-avatar {
  display: block;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--jt-radius-full);
}

.pro-card-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--jt-on-primary);
  background-color: var(--jt-primary-container);
}

/* --- Verification badge --------------------------------------------------
   Level 1 blue, Level 2 yellow, Level 3 green. There is no separate "claimed"
   badge: claiming already requires phone and email, which is Level 1.        */

.pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.15;
  border: 1px solid transparent;
  border-radius: var(--jt-radius);
  white-space: nowrap;
}
.pro-badge-icon { font-size: 14px; font-variation-settings: "FILL" 1; }
.pro-badge-text { display: flex; flex-direction: column; }
.pro-badge-level { font-weight: 700; }
.pro-badge-word  { font-weight: 400; }

.pro-badge-l1   { color: #1e40af;                        background-color: var(--jt-info-soft);    border-color: var(--jt-info-line); }
.pro-badge-l2   { color: #92400e;                        background-color: var(--jt-warning-soft); border-color: var(--jt-warning-line); }
.pro-badge-l3   { color: var(--jt-on-secondary-container); background-color: var(--jt-success-soft); border-color: var(--jt-success-line); }
.pro-badge-none { color: var(--jt-on-surface-variant);   background-color: var(--jt-surface-container-low); border-color: var(--jt-outline-variant); }

/* --- Identity ------------------------------------------------------------ */

.pro-card-body { flex: 1 1 auto; margin-bottom: 12px; min-width: 0; }

.pro-card-name {
  margin: 0 0 3px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--jt-on-surface);
  overflow-wrap: break-word;
}

.pro-card-role {
  margin: 0 0 7px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--jt-on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-card-loc {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--jt-outline);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pro-card-loc .material-symbols-outlined {
  font-size: 14px;
  margin-right: 4px;
  vertical-align: -2px;
}

/* --- Trust score + rating ------------------------------------------------ */

.pro-card-stats {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding-block: 14px;
  border-top: 1px solid var(--jt-outline-variant);
  min-width: 0;
}
.pro-card-trust,
.pro-card-rating {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Left track is max-content so it can never be squeezed. The right track is
   the only one that shrinks, and it clips: a flex row with justify-content:
   flex-end overflows LEFTWARD when it runs out of room, which is what painted
   the stars over the "Trust Score" label. overflow:hidden makes that
   impossible regardless of the widths involved. */
.pro-card-rating { min-width: 0; overflow: hidden; }

.pro-card-trust-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  color: var(--jt-on-surface-variant);
}
.pro-card-trust-label .material-symbols-outlined {
  font-size: 13px;
  color: var(--jt-secondary);
  font-variation-settings: "FILL" 1;
}

.pro-card-trust-value {
  margin: 0;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--jt-secondary);
}

.pro-card-rating { text-align: right; }

.pro-card-rating-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0 0 3px;
  min-width: 0;
  white-space: nowrap;
}
.pro-card-rating-value {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--jt-on-surface);
}
.pro-card-rating-total {
  margin: 0;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--jt-on-surface-variant);
}

/* Fractional stars: a clipped filled layer over a grey track. The width comes
   from {% widthratio average_rating 5 100 %}, so 4.7 renders as 94% -- an
   exact half star, with no extra template filter and no JavaScript. */
.pro-stars {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  line-height: 1;
  white-space: nowrap;
}
.pro-stars-track { display: flex; color: var(--jt-outline-variant); }
.pro-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  overflow: hidden;
  color: #eab308;
}
.pro-stars .material-symbols-outlined {
  display: block;
  font-size: 13px;
  line-height: 1;
}
.pro-stars-track .material-symbols-outlined { font-variation-settings: "FILL" 0; }
.pro-stars-fill  .material-symbols-outlined { font-variation-settings: "FILL" 1; }

/* --- Checked reviews ----------------------------------------------------- */

.pro-card-checked {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--jt-on-surface-variant);
}
.pro-card-checked .material-symbols-outlined { font-size: 14px; flex: 0 0 auto; }
.pro-card-checked-yes { color: var(--jt-on-secondary-container); font-weight: 500; }

/* --- Call to action ------------------------------------------------------ */

.pro-card-cta {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 10px var(--jt-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: var(--jt-on-surface);
  background-color: var(--jt-surface-container-lowest);
  border: 1px solid var(--jt-outline-variant);
  border-radius: var(--jt-radius);
  cursor: pointer;
  transition: background-color var(--jt-transition),
              border-color var(--jt-transition),
              color var(--jt-transition),
              box-shadow var(--jt-transition);
}

/* Stretch over the card so the whole surface is clickable. */
.pro-card-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.pro-card:hover .pro-card-cta,
.pro-card-cta:hover {
  color: var(--jt-on-primary);
  background-color: var(--jt-primary);
  border-color: var(--jt-primary);
  box-shadow: var(--jt-shadow-sm);
}

.pro-card-cta:active { transform: translateY(1px); box-shadow: none; }

/* The card already shows a ring via :focus-within, so suppress the duplicate
   outline on the stretched anchor itself. */
.pro-card-cta:focus-visible {
  outline: none;
  color: var(--jt-on-primary);
  background-color: var(--jt-primary);
  border-color: var(--jt-primary);
}

/* ==========================================================================
   16. LIGHTBOX

   Opened by any element carrying data-jt-lightbox, which supplies the image
   URL. One dialog is shared by the whole page; jobertrust.js populates it.
   Closed with the button, the backdrop, or Escape.
   ========================================================================== */

.jt-lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--jt-md);
  background-color: rgba(10, 14, 20, 0.92);
}
.jt-lb[data-open] { display: flex; }

.jt-lb-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.jt-lb-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--jt-radius);
  background-color: var(--jt-surface-container-lowest);
}

.jt-lb-caption {
  margin: 0;
  max-width: 44rem;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}

.jt-lb-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--jt-on-surface);
  background-color: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: var(--jt-radius-full);
  cursor: pointer;
  transition: background-color var(--jt-transition);
}
.jt-lb-btn:hover { background-color: #fff; }
.jt-lb-btn:focus-visible { outline: 2px solid var(--jt-surface-bright); outline-offset: 2px; }
.jt-lb-btn[hidden] { display: none; }

.jt-lb-close { top: calc(var(--jt-md) * -1 + 4px); right: 0; }
@media (min-width: 640px) { .jt-lb-close { top: -56px; right: -4px; } }

.jt-lb-prev { left: 6px; top: 50%; transform: translateY(-50%); }
.jt-lb-next { right: 6px; top: 50%; transform: translateY(-50%); }
@media (min-width: 640px) {
  .jt-lb-prev { left: -60px; }
  .jt-lb-next { right: -60px; }
}

.jt-lb-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

[data-jt-lightbox] { cursor: zoom-in; }