/* ============================================================================
   Worklane — Global theme CSS
   Sourced from design deliverables: tokens.css + components.css
   All values flow from --wp--preset--* / --wp--custom--* variables generated
   by theme.json. The --color-* / --font-* aliases below bridge the design
   system's token names to WP-generated custom properties.
   ============================================================================ */

/* ---- Box-sizing + reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--line-height--normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--accent-on);
}

/* ---- Design token aliases (bridge design → WP presets) ------------------- */
/* These allow component CSS to use --color-* names from the design system
   while the actual values are defined once in theme.json. */
:root {
  --color-base:                    var(--wp--preset--color--base);
  --color-base-elevated:           var(--wp--preset--color--base-elevated);
  --color-surface-2:               var(--wp--preset--color--surface-2);
  --color-surface-3:               var(--wp--preset--color--surface-3);
  --color-neutral:                 var(--wp--preset--color--neutral);
  --color-neutral-strong:          var(--wp--preset--color--neutral-strong);
  --color-neutral-bg:              var(--wp--preset--color--neutral-bg);
  --color-contrast:                var(--wp--preset--color--contrast);
  --color-contrast-muted:          var(--wp--preset--color--contrast-muted);
  --color-contrast-subtle:         var(--wp--preset--color--contrast-subtle);
  --color-accent-1:                var(--wp--preset--color--accent-1);
  --color-accent-1-hover:          var(--wp--preset--color--accent-1-hover);
  --color-accent-1-active:         var(--wp--preset--color--accent-1-active);
  --color-accent-on:               var(--wp--preset--color--accent-on);
  --color-accent-weak:             var(--wp--preset--color--accent-weak);
  --color-accent-border:           var(--wp--preset--color--accent-border);
  --color-status-open-fg:          var(--wp--preset--color--status-open-fg);
  --color-status-open-bg:          var(--wp--preset--color--status-open-bg);
  --color-status-open-border:      var(--wp--preset--color--status-open-border);
  --color-status-reviewing-fg:     var(--wp--preset--color--status-reviewing-fg);
  --color-status-reviewing-bg:     var(--wp--preset--color--status-reviewing-bg);
  --color-status-reviewing-border: var(--wp--preset--color--status-reviewing-border);
  --color-status-assigned-fg:      var(--wp--preset--color--status-assigned-fg);
  --color-status-assigned-bg:      var(--wp--preset--color--status-assigned-bg);
  --color-status-assigned-border:  var(--wp--preset--color--status-assigned-border);
  --color-status-closed-fg:        var(--wp--preset--color--status-closed-fg);
  --color-status-closed-bg:        var(--wp--preset--color--status-closed-bg);
  --color-status-closed-border:    var(--wp--preset--color--status-closed-border);
  --color-rating-star:             var(--wp--preset--color--rating-star);
  --color-success-fg:              var(--wp--preset--color--success-fg);
  --color-success-bg:              var(--wp--preset--color--success-bg);
  --color-error-fg:                var(--wp--preset--color--error-fg);
  --color-error-bg:                var(--wp--preset--color--error-bg);
  --color-error-border:            var(--wp--preset--color--error-border);
  --color-warning-fg:              var(--wp--preset--color--warning-fg);
  --color-warning-bg:              var(--wp--preset--color--warning-bg);

  /* Typography aliases */
  --font-sans: var(--wp--preset--font-family--sans);
  --font-mono: var(--wp--preset--font-family--mono);

  --font-size-sm:      var(--wp--preset--font-size--sm);
  --font-size-base:    var(--wp--preset--font-size--base);
  --font-size-md:      var(--wp--preset--font-size--md);
  --font-size-lg:      var(--wp--preset--font-size--lg);
  --font-size-xl:      var(--wp--preset--font-size--xl);
  --font-size-display: var(--wp--preset--font-size--display);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   var(--wp--custom--line-height--tight);
  --lh-normal:  var(--wp--custom--line-height--normal);
  --lh-relaxed: var(--wp--custom--line-height--relaxed);

  --tracking-tight: var(--wp--custom--letter-spacing--tight);
  --tracking-snug:  var(--wp--custom--letter-spacing--snug, -0.01em);
  --tracking-wide:  var(--wp--custom--letter-spacing--wide);

  /* Spacing aliases */
  --spacing-10: var(--wp--preset--spacing--10);
  --spacing-20: var(--wp--preset--spacing--20);
  --spacing-30: var(--wp--preset--spacing--30);
  --spacing-40: var(--wp--preset--spacing--40);
  --spacing-50: var(--wp--preset--spacing--50);
  --spacing-60: var(--wp--preset--spacing--60);
  --spacing-70: var(--wp--preset--spacing--70);
  --spacing-80: var(--wp--preset--spacing--80);

  /* Radius aliases */
  --radius-sm:    var(--wp--custom--radius--sm);
  --radius-md:    var(--wp--custom--radius--md);
  --radius-lg:    var(--wp--custom--radius--lg);
  --radius-full:  var(--wp--custom--radius--full);
  --radius-scale: var(--wp--custom--radius--scale);

  /* Shadow aliases */
  --shadow-sm:    var(--wp--custom--shadow--sm);
  --shadow-md:    var(--wp--custom--shadow--md);
  --shadow-lg:    var(--wp--custom--shadow--lg);
  --shadow-focus: var(--wp--custom--shadow--focus);

  /* Transition */
  --transition-duration: var(--wp--custom--transition--duration);
  --transition-easing:   var(--wp--custom--transition--easing);
  --transition: var(--wp--custom--transition--duration) var(--wp--custom--transition--easing);

  /* Layout */
  --container-max: var(--wp--custom--container-max);
}

/* ---- Skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--color-accent-1);
  color: var(--color-accent-on);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  z-index: 100;
  transition: top 0.15s;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---- A11y utility --------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Focus ring (shared) -------------------------------------------------- */
.wl-focusable:focus-visible,
.wl-btn:focus-visible,
.wl-input:focus-visible,
.wl-textarea:focus-visible,
.wl-select:focus-visible,
.wl-check__box:focus-visible,
a.wl-link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--color-accent-1);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.wl-btn {
  --_r: calc(var(--radius-md) * var(--radius-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-20);
  min-height: 2.75rem;
  padding: 0 var(--spacing-50);
  border: 1px solid transparent;
  border-radius: var(--_r);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.wl-btn:active { transform: translateY(1px); }

.wl-btn--primary  { background: var(--color-accent-1); color: var(--color-accent-on); }
.wl-btn--primary:hover { background: var(--color-accent-1-hover); }
.wl-btn--primary:active { background: var(--color-accent-1-active); }

.wl-btn--secondary {
  background: var(--color-surface-2);
  color: var(--color-contrast);
  border-color: var(--color-neutral-strong);
}
.wl-btn--secondary:hover { background: var(--color-surface-3); border-color: var(--color-accent-border); }

.wl-btn--ghost   { background: transparent; color: var(--color-contrast-muted); }
.wl-btn--ghost:hover { color: var(--color-contrast); background: var(--color-surface-2); }

.wl-btn--danger  { background: transparent; color: var(--color-error-fg); border-color: var(--color-error-border); }
.wl-btn--danger:hover { background: var(--color-error-bg); }

.wl-btn--sm  { min-height: 2.25rem; padding: 0 var(--spacing-40); font-size: var(--font-size-sm); }
.wl-btn--lg  { min-height: 3.25rem; padding: 0 var(--spacing-60); font-size: var(--font-size-md); }
.wl-btn--block { display: flex; width: 100%; }

.wl-btn:disabled,
.wl-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.wl-btn[data-loading="true"] { color: transparent !important; pointer-events: none; position: relative; }
.wl-btn[data-loading="true"]::after {
  content: ""; position: absolute;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--color-accent-on);
  animation: wl-spin .7s linear infinite;
}
.wl-btn--secondary[data-loading="true"]::after,
.wl-btn--ghost[data-loading="true"]::after { color: var(--color-contrast); }

@keyframes wl-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   LINKS
   ============================================================================ */
.wl-link {
  color: var(--color-accent-1);
  text-decoration: none;
  font-weight: var(--fw-medium);
  border-radius: 2px;
  transition: color var(--transition);
}
.wl-link:hover { color: var(--color-accent-1-hover); text-decoration: underline; text-underline-offset: 0.18em; }

/* ============================================================================
   FORM FIELDS
   ============================================================================ */
.wl-field { display: flex; flex-direction: column; gap: var(--spacing-20); }
.wl-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-contrast-muted);
  letter-spacing: var(--tracking-snug);
}
.wl-field__req { color: var(--color-accent-1); }

.wl-input, .wl-textarea, .wl-select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--spacing-30) var(--spacing-40);
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.wl-input::placeholder, .wl-textarea::placeholder { color: var(--color-contrast-subtle); }
.wl-textarea { min-height: 7.5rem; resize: vertical; }
.wl-input:hover, .wl-textarea:hover, .wl-select:hover { border-color: var(--color-accent-border); }
.wl-input[data-filled="true"] { background: var(--color-surface-3); }

.wl-field--error .wl-input,
.wl-field--error .wl-textarea,
.wl-field--error .wl-select { border-color: var(--color-error-fg); }
.wl-field--error .wl-field__label { color: var(--color-error-fg); }

.wl-field__help  { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); }
.wl-field__error {
  display: flex; align-items: center; gap: var(--spacing-20);
  font-size: var(--font-size-sm); color: var(--color-error-fg);
}

.wl-input:disabled, .wl-textarea:disabled, .wl-select:disabled {
  opacity: .5; cursor: not-allowed; background: var(--color-neutral-bg);
}

/* select — custom caret */
.wl-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-contrast-muted) 50%),
    linear-gradient(135deg, var(--color-contrast-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) center, calc(100% - 0.8rem) center;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: var(--spacing-60);
}

/* checkbox / radio */
.wl-check { display: inline-flex; align-items: center; gap: var(--spacing-30); cursor: pointer; min-height: 2.75rem; }
.wl-check__box {
  appearance: none;
  width: 1.25rem; height: 1.25rem; flex: none;
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale) * 0.6);
  display: grid; place-content: center;
  transition: background var(--transition), border-color var(--transition);
}
.wl-check__box--radio { border-radius: var(--radius-full); }
.wl-check__box:checked { background: var(--color-accent-1); border-color: var(--color-accent-1); }
.wl-check__box:checked::after { content: ""; width: 0.7rem; height: 0.7rem; }
.wl-check__box:not(.wl-check__box--radio):checked::after {
  width: 0.32rem; height: 0.62rem; margin-top: -2px;
  border: solid var(--color-accent-on); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.wl-check__box--radio:checked::after { border-radius: 50%; background: var(--color-accent-on); }
.wl-check__label { font-size: var(--font-size-base); color: var(--color-contrast); }

/* ============================================================================
   BADGES
   ============================================================================ */
.wl-badge {
  display: inline-flex; align-items: center; gap: var(--spacing-20);
  height: 1.625rem; padding: 0 var(--spacing-30);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  border: 1px solid transparent;
  white-space: nowrap;
}
.wl-badge::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: currentColor;
}
.wl-badge--open      { color: var(--color-status-open-fg);      background: var(--color-status-open-bg);      border-color: var(--color-status-open-border); }
.wl-badge--reviewing { color: var(--color-status-reviewing-fg); background: var(--color-status-reviewing-bg); border-color: var(--color-status-reviewing-border); }
.wl-badge--assigned  { color: var(--color-status-assigned-fg);  background: var(--color-status-assigned-bg);  border-color: var(--color-status-assigned-border); }
.wl-badge--closed    { color: var(--color-status-closed-fg);    background: var(--color-status-closed-bg);    border-color: var(--color-status-closed-border); }
.wl-badge--error     { color: var(--color-error-fg);            background: var(--color-error-bg);            border-color: var(--color-error-border); }

/* solid variant */
.wl-badge--solid.wl-badge--open     { color: var(--color-accent-on); background: var(--color-status-open-fg);      border-color: transparent; }
.wl-badge--solid.wl-badge--reviewing{ color: var(--color-status-reviewing-bg); background: var(--color-status-reviewing-fg); border-color: transparent; }
.wl-badge--solid.wl-badge--assigned { color: var(--color-status-assigned-bg); background: #C6CDD6; border-color: transparent; }
.wl-badge--solid.wl-badge--closed   { color: var(--color-base); background: var(--color-status-closed-fg); border-color: transparent; }
.wl-badge--solid.wl-badge--error    { color: var(--color-error-bg); background: var(--color-error-fg); border-color: transparent; }
.wl-badge--solid::before { background: color-mix(in srgb, currentColor 55%, transparent); }
.wl-badge--ghost { background: transparent; border-color: transparent; padding-left: 0; }

/* ============================================================================
   TAGS / CHIPS
   ============================================================================ */
.wl-tag {
  display: inline-flex; align-items: center;
  height: 1.75rem; padding: 0 var(--spacing-30);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  background: var(--color-surface-2);
  border: 1px solid var(--color-neutral);
  color: var(--color-contrast-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.wl-tag--accent { color: var(--color-accent-1); border-color: var(--color-accent-border); background: var(--color-accent-weak); }

/* ============================================================================
   RATING STARS
   ============================================================================ */
.wl-stars { display: inline-flex; align-items: center; gap: var(--spacing-20); }
.wl-stars__track {
  position: relative; display: inline-block;
  font-size: 1rem; line-height: 1; letter-spacing: 0.1em;
}
.wl-stars__empty { color: var(--color-neutral-strong); }
.wl-stars__fill {
  color: var(--color-rating-star);
  position: absolute; inset: 0; overflow: hidden; white-space: nowrap;
  width: var(--stars-fill, 0%);
}
.wl-stars__value { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--color-contrast); }
.wl-stars__count { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); }

/* ============================================================================
   AVATAR
   ============================================================================ */
.wl-avatar {
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  border: 1px solid var(--color-neutral-strong);
  display: grid; place-content: center;
  color: var(--color-contrast-muted);
  font-weight: var(--fw-semibold);
  overflow: hidden; flex: none;
}
.wl-avatar--sm { width: 2rem;   height: 2rem;   font-size: var(--font-size-sm); }
.wl-avatar--md { width: 2.75rem; height: 2.75rem; font-size: var(--font-size-base); }
.wl-avatar--lg { width: 4.5rem; height: 4.5rem; font-size: var(--font-size-md); }
.wl-avatar__ph { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================================
   CURRENCY / AMOUNT
   ============================================================================ */
.wl-amount { font-family: var(--font-sans); font-weight: var(--fw-bold); color: var(--color-contrast); letter-spacing: var(--tracking-tight); }
.wl-amount__cur { color: var(--color-contrast-muted); font-weight: var(--fw-semibold); }
.wl-amount__per { color: var(--color-contrast-subtle); font-weight: var(--fw-medium); font-size: 0.7em; }

/* ============================================================================
   CARD (base)
   ============================================================================ */
.wl-card {
  --_r: calc(var(--radius-md) * var(--radius-scale));
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral);
  border-radius: var(--_r);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.wl-card--hoverable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-neutral-strong);
}

/* Project card */
.wl-project { padding: var(--spacing-50); display: flex; flex-direction: column; gap: var(--spacing-40); }
.wl-project__top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-30); }
.wl-project__title {
  font-size: var(--font-size-md); font-weight: var(--fw-semibold);
  color: var(--color-contrast); line-height: var(--lh-tight); letter-spacing: var(--tracking-snug);
  margin: 0; text-wrap: balance;
}
.wl-project__title a { color: inherit; text-decoration: none; }
.wl-project__title a:hover { color: var(--color-accent-1); }
.wl-project__excerpt {
  font-size: var(--font-size-base); color: var(--color-contrast-muted);
  line-height: var(--lh-normal); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wl-project__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-40); align-items: center; }
.wl-project__metaitem { display: flex; flex-direction: column; min-width: 0; }
.wl-project__metalabel { font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-contrast-subtle); margin-bottom: 0.25rem; }
.wl-project__divider { height: 1px; background: var(--color-neutral); border: 0; margin: 0; }
.wl-project__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-30); }
.wl-project__poster { display: flex; align-items: center; gap: var(--spacing-30); min-width: 0; }
.wl-project__poster > .stack { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.wl-project__postername { display: block; font-size: var(--font-size-sm); color: var(--color-contrast); font-weight: var(--fw-semibold); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.wl-project__postersub { display: block; font-size: 0.78rem; color: var(--color-contrast-subtle); line-height: 1.25; }
.wl-project__skills { display: flex; flex-wrap: wrap; gap: var(--spacing-20); }

/* Freelancer/vendor card */
.wl-vendor { padding: var(--spacing-50); display: flex; flex-direction: column; gap: var(--spacing-40); text-align: left; }
.wl-vendor__head { display: flex; gap: var(--spacing-40); align-items: flex-start; }
.wl-vendor__id { min-width: 0; display: flex; flex-direction: column; }
.wl-vendor__name { font-size: var(--font-size-md); font-weight: var(--fw-semibold); color: var(--color-contrast); margin: 0; line-height: 1.2; }
.wl-vendor__role { font-size: var(--font-size-sm); color: var(--color-contrast-muted); margin: 0.18rem 0 0; line-height: 1.35; }
.wl-vendor__loc { display: flex; align-items: center; gap: var(--spacing-20); font-size: var(--font-size-sm); color: var(--color-contrast-subtle); }
.wl-vendor__id .wl-vendor__loc { margin-top: 0.3rem; }
.wl-vendor__rateblock { margin-left: auto; text-align: right; flex: none; }
.wl-vendor__rate { font-size: var(--font-size-md); }
.wl-vendor__avail { display: inline-flex; align-items: center; gap: var(--spacing-20); font-size: var(--font-size-sm); color: var(--color-status-open-fg); }
.wl-vendor__avail::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-status-open-fg) 22%, transparent);
}
.wl-vendor__skills { display: flex; flex-wrap: wrap; gap: var(--spacing-20); }
.wl-vendor__foot { display: flex; align-items: center; gap: var(--spacing-30); justify-content: space-between; }

/* ============================================================================
   PAGINATION
   ============================================================================ */
.wl-pagination { display: flex; align-items: center; gap: var(--spacing-20); }
.wl-page {
  min-width: 2.75rem; min-height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--spacing-30);
  border: 1px solid var(--color-neutral); border-radius: calc(var(--radius-sm) * var(--radius-scale));
  background: var(--color-base-elevated); color: var(--color-contrast-muted);
  font-size: var(--font-size-base); font-weight: var(--fw-medium); cursor: pointer; text-decoration: none;
  transition: all var(--transition);
}
.wl-page:hover:not(:disabled):not([aria-current]) { color: var(--color-contrast); border-color: var(--color-neutral-strong); }
.wl-page[aria-current="page"] { background: var(--color-accent-weak); border-color: var(--color-accent-border); color: var(--color-accent-1); }
.wl-page:disabled { opacity: .4; cursor: not-allowed; }
.wl-page--gap { border: 0; background: transparent; cursor: default; color: var(--color-contrast-subtle); }

/* ============================================================================
   FEEDBACK STATES
   ============================================================================ */
.wl-skeleton {
  background: linear-gradient(100deg, var(--color-surface-2) 30%, var(--color-surface-3) 50%, var(--color-surface-2) 70%);
  background-size: 200% 100%;
  animation: wl-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes wl-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.wl-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--spacing-40); padding: var(--spacing-80) var(--spacing-50);
}
.wl-state__icon {
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-full);
  display: grid; place-content: center;
  background: var(--color-surface-2); border: 1px solid var(--color-neutral);
  color: var(--color-contrast-subtle);
}
.wl-state__title { font-size: var(--font-size-md); font-weight: var(--fw-semibold); color: var(--color-contrast); margin: 0; }
.wl-state__text  { font-size: var(--font-size-base); color: var(--color-contrast-muted); margin: 0; max-width: 28rem; }

/* ============================================================================
   HEADER
   ============================================================================ */
.wl-header {
  background: var(--color-base);
  border-bottom: 1px solid var(--color-neutral);
}
.wl-header--sticky {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-base) 84%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
}
.wl-header__in {
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
  height: 4.5rem;
  display: flex; align-items: center; gap: var(--spacing-50);
}

.wl-brand {
  display: inline-flex; align-items: center; gap: var(--spacing-30);
  text-decoration: none; flex: none;
}
.wl-brand__mark { display: inline-flex; }
.wl-brand__name {
  font-size: var(--font-size-md); font-weight: var(--fw-semibold);
  color: var(--color-contrast); letter-spacing: var(--tracking-tight);
}

.wl-nav { display: flex; align-items: center; gap: var(--spacing-10); margin: 0; padding: 0; list-style: none; }
.wl-nav__link {
  display: inline-flex; align-items: center; gap: var(--spacing-20);
  min-height: 2.5rem; padding: 0 var(--spacing-40);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast-muted); text-decoration: none;
  font-size: var(--font-size-sm); font-weight: var(--fw-medium); white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.wl-nav__link:hover { color: var(--color-contrast); background: var(--color-surface-2); }
.wl-nav__link[aria-current="page"] { color: var(--color-contrast); }
.wl-nav__link--primary { color: var(--color-accent-1); }
.wl-nav__link--primary::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.wl-nav__link--primary:hover { color: var(--color-accent-1-hover); background: var(--color-accent-weak); }

.wl-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--spacing-30); }

.wl-iconbtn {
  position: relative;
  width: 2.75rem; height: 2.75rem; flex: none;
  display: inline-grid; place-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast-muted); cursor: pointer;
  transition: all var(--transition);
}
.wl-iconbtn:hover { color: var(--color-contrast); background: var(--color-surface-2); }
.wl-iconbtn svg { width: 1.25rem; height: 1.25rem; }
.wl-iconbtn__dot {
  position: absolute; top: 0.25rem; right: 0.25rem;
  min-width: 0.95rem; height: 0.95rem; padding: 0 0.2rem;
  display: grid; place-content: center;
  background: var(--color-accent-1); color: var(--color-accent-on);
  font-size: 0.58rem; font-weight: var(--fw-bold); line-height: 1;
  border-radius: var(--radius-full); border: 2px solid var(--color-base);
}

/* currency switcher */
.wl-curswitch { position: relative; }
.wl-curswitch__btn {
  display: inline-flex; align-items: center; gap: var(--spacing-20);
  min-height: 2.5rem; padding: 0 var(--spacing-30);
  background: transparent; border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast-muted); font-size: var(--font-size-sm); font-weight: var(--fw-medium);
  font-family: var(--font-sans); cursor: pointer; transition: all var(--transition);
}
.wl-curswitch__btn:hover { color: var(--color-contrast); border-color: var(--color-accent-border); }
.wl-curswitch__sym {
  display: inline-block; width: 1rem; text-align: center;
  color: var(--color-accent-1); font-weight: var(--fw-bold);
}

/* combined auth control */
.wl-auth {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  overflow: hidden;
}
.wl-auth a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0 var(--spacing-40);
  font-size: var(--font-size-sm); font-weight: var(--fw-semibold);
  text-decoration: none; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.wl-auth__in { color: var(--color-contrast-muted); }
.wl-auth__in:hover { color: var(--color-contrast); background: var(--color-surface-2); }
.wl-auth__up { background: var(--color-accent-1); color: var(--color-accent-on); border-left: 1px solid var(--color-neutral-strong); }
.wl-auth__up:hover { background: var(--color-accent-1-hover); }
.wl-auth a:focus-visible { outline: none; box-shadow: inset var(--shadow-focus); }

/* avatar button + dropdown */
.wl-avatar-btn {
  display: inline-flex; align-items: center; gap: var(--spacing-30);
  min-height: 2.75rem; padding: 0.3rem var(--spacing-30) 0.3rem 0.3rem;
  background: var(--color-surface-2); border: 1px solid var(--color-neutral);
  border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition);
}
.wl-avatar-btn:hover { border-color: var(--color-neutral-strong); }
.wl-avatar-btn__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
.wl-avatar-btn__name { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--color-contrast); white-space: nowrap; }
.wl-avatar-btn__role { font-size: 0.7rem; color: var(--color-accent-1); font-weight: var(--fw-medium); letter-spacing: var(--tracking-snug); }

/* dropdown menu */
.wl-menu {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 60;
  min-width: 14rem; padding: var(--spacing-20);
  background: var(--color-base-elevated); border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-md) * var(--radius-scale)); box-shadow: var(--shadow-lg);
}
.wl-menu[hidden] { display: none; }
.wl-menu__group { padding: var(--spacing-20) var(--spacing-30) var(--spacing-10); font-size: 0.68rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-contrast-subtle); }
.wl-menu__item {
  display: flex; align-items: center; gap: var(--spacing-30); width: 100%;
  min-height: 2.5rem; padding: 0 var(--spacing-30);
  background: transparent; border: 0;
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast); font-size: var(--font-size-sm); font-family: var(--font-sans);
  text-align: left; text-decoration: none; cursor: pointer; transition: background var(--transition);
}
.wl-menu__item:hover,
.wl-menu__item[aria-selected="true"] { background: var(--color-surface-2); }
.wl-menu__item--danger { color: var(--color-error-fg); }
.wl-menu__sep { height: 1px; background: var(--color-neutral); margin: var(--spacing-20) 0; border: 0; }

.wl-hamburger { display: none; }
@media (max-width: 900px) {
  .wl-header .wl-nav,
  .wl-avatar-btn__meta { display: none; }
  .wl-hamburger { display: inline-grid; }
}

/* mobile drawer */
.wl-drawer {
  width: min(20rem, 86vw); background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-lg) * var(--radius-scale));
  padding: var(--spacing-50); display: flex; flex-direction: column; gap: var(--spacing-20);
}
.wl-drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 2.75rem; padding: 0 var(--spacing-40);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast); text-decoration: none; font-weight: var(--fw-medium);
}
.wl-drawer__link:hover { background: var(--color-surface-2); }
.wl-drawer__link--primary { color: var(--color-accent-1); }

/* ============================================================================
   FOOTER
   ============================================================================ */
.wl-footer {
  background: var(--color-neutral-bg);
  border-top: 1px solid var(--color-neutral);
  color: var(--color-contrast-muted);
}
.wl-footer__in {
  width: min(100% - 2.5rem, var(--container-max));
  margin-inline: auto;
  padding-block: var(--spacing-70);
}
.wl-footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--spacing-60); }
.wl-footer__brand { display: flex; flex-direction: column; gap: var(--spacing-30); max-width: 18rem; }
.wl-footer__tag  { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); line-height: var(--lh-relaxed); margin: 0; }
.wl-footer__col h4 {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-contrast-subtle); margin: 0 0 var(--spacing-40); font-weight: var(--fw-semibold);
}
.wl-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-30); }
.wl-footer__col a { color: var(--color-contrast-muted); text-decoration: none; font-size: var(--font-size-sm); transition: color var(--transition); }
.wl-footer__col a:hover { color: var(--color-accent-1); }

.wl-trust {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-40);
  margin-top: var(--spacing-60); padding-top: var(--spacing-50);
  border-top: 1px solid var(--color-neutral);
}
.wl-trust__label { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); margin-right: var(--spacing-20); }
.wl-trust__item {
  display: inline-flex; align-items: center; gap: var(--spacing-20);
  height: 2.25rem; padding: 0 var(--spacing-40);
  background: var(--color-base-elevated); border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast); font-size: var(--font-size-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
}
.wl-trust__item svg { display: block; }

.wl-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-40);
  margin-top: var(--spacing-60); padding-top: var(--spacing-50);
  border-top: 1px solid var(--color-neutral);
}
.wl-footer__legal { display: flex; flex-wrap: wrap; gap: var(--spacing-50); }
.wl-footer__legal a { color: var(--color-contrast-subtle); text-decoration: none; font-size: var(--font-size-sm); }
.wl-footer__legal a:hover { color: var(--color-contrast-muted); }
.wl-footer__copy { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); }

@media (max-width: 900px) {
  .wl-footer__top { grid-template-columns: 1fr 1fr; gap: var(--spacing-50); }
  .wl-footer__brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .wl-footer__top { grid-template-columns: 1fr 1fr; }
  .wl-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   MODAL
   ============================================================================ */
.wl-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: var(--spacing-50);
  background: color-mix(in srgb, var(--color-base) 78%, transparent);
  backdrop-filter: blur(4px);
  animation: wl-overlay-in var(--transition-duration) var(--transition-easing);
}
.wl-overlay[hidden] { display: none; }
@keyframes wl-overlay-in { from { opacity: 0; } to { opacity: 1; } }

.wl-modal {
  --_r: calc(var(--radius-md) * var(--radius-scale));
  width: 100%; max-width: 28rem;
  max-height: calc(100vh - 4rem); overflow-y: auto;
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral-strong);
  border-radius: var(--_r); box-shadow: var(--shadow-lg);
  animation: wl-modal-in var(--transition-duration) var(--transition-easing);
}
.wl-modal--wide { max-width: 32rem; }
@keyframes wl-modal-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.wl-modal__head {
  display: flex; align-items: flex-start; gap: var(--spacing-40);
  padding: var(--spacing-50) var(--spacing-50) var(--spacing-30);
}
.wl-modal__title { font-size: var(--font-size-md); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); margin: 0; }
.wl-modal__close {
  margin-left: auto; flex: none;
  width: 2.25rem; height: 2.25rem; display: grid; place-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast-subtle); cursor: pointer; transition: all var(--transition);
}
.wl-modal__close:hover { color: var(--color-contrast); background: var(--color-surface-2); }
.wl-modal__body {
  padding: 0 var(--spacing-50) var(--spacing-50);
  display: flex; flex-direction: column; gap: var(--spacing-40);
}
.wl-modal__body > p { margin: 0; color: var(--color-contrast-muted); line-height: var(--lh-relaxed); font-size: var(--font-size-base); }
.wl-modal__body strong { color: var(--color-contrast); font-weight: var(--fw-semibold); }
.wl-modal__foot {
  display: flex; gap: var(--spacing-30); justify-content: flex-end;
  padding-top: var(--spacing-20);
}
.wl-modal__foot .wl-btn { flex: 1; }
@media (max-width: 420px) { .wl-modal__foot { flex-direction: column-reverse; } }

/* freelancer mini-card inside modals */
.wl-minicard {
  display: flex; align-items: center; gap: var(--spacing-40);
  padding: var(--spacing-40);
  background: var(--color-surface-2); border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
}
.wl-minicard__id { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.wl-minicard__name { font-weight: var(--fw-semibold); color: var(--color-contrast); margin: 0; font-size: var(--font-size-base); }
.wl-minicard__sub  { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); margin: 0; }
.wl-minicard__rate { margin-left: auto; flex: none; font-size: var(--font-size-base); }

/* big amount callout */
.wl-callout {
  display: flex; flex-direction: column; gap: var(--spacing-10);
  padding: var(--spacing-40) var(--spacing-50);
  background: linear-gradient(160deg, var(--color-accent-weak), transparent);
  border: 1px solid var(--color-accent-border);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
}
.wl-callout__label  { font-size: var(--font-size-sm); color: var(--color-contrast-muted); }
.wl-callout__amount { font-size: var(--font-size-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--color-accent-1); }

/* result panel (success / error / warning) */
.wl-result { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-30); }
.wl-result__icon {
  width: 4rem; height: 4rem; flex: none; margin-bottom: var(--spacing-20);
  border-radius: var(--radius-full); display: grid; place-content: center;
  border: 1px solid transparent;
}
.wl-result__icon--success { background: var(--color-success-bg); color: var(--color-success-fg); border-color: var(--color-accent-border); }
.wl-result__icon--error   { background: var(--color-error-bg);   color: var(--color-error-fg);   border-color: var(--color-error-border); }
.wl-result__icon--warning { background: var(--color-warning-bg); color: var(--color-warning-fg); border-color: var(--color-status-reviewing-border); }
.wl-result__icon svg { width: 2rem; height: 2rem; }
.wl-result__title { font-size: var(--font-size-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin: 0; }
.wl-result__text  { color: var(--color-contrast-muted); line-height: var(--lh-relaxed); margin: 0; max-width: 34rem; }

/* ============================================================================
   COOKIE CONSENT (Complianz .cc-* overrides)
   Maps Complianz output to the Worklane dark theme.
   ============================================================================ */
.cc-banner {
  position: fixed; left: 50%; bottom: var(--spacing-50);
  transform: translateX(-50%); z-index: 70;
  width: min(100% - 2.5rem, 40rem);
  background: var(--color-base-elevated);
  border: 1px solid var(--color-neutral-strong);
  border-radius: calc(var(--radius-md) * var(--radius-scale));
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-50);
  display: flex; align-items: flex-start; gap: var(--spacing-40);
}
.cc-banner[hidden] { display: none; }
.cc-banner__icon {
  width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  display: grid; place-content: center;
  background: var(--color-accent-weak); color: var(--color-accent-1);
  border: 1px solid var(--color-accent-border);
}
.cc-banner__body { min-width: 0; flex: 1; }
.cc-banner__text { font-size: var(--font-size-sm); color: var(--color-contrast-muted); line-height: var(--lh-relaxed); margin: 0; }
.cc-banner__text a { color: var(--color-accent-1); text-decoration: none; font-weight: var(--fw-medium); }
.cc-banner__text a:hover { text-decoration: underline; }
.cc-banner__actions { display: flex; gap: var(--spacing-20); margin-top: var(--spacing-40); flex-wrap: wrap; }
.cc-banner__close {
  flex: none; width: 2rem; height: 2rem; display: grid; place-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
  color: var(--color-contrast-subtle); cursor: pointer; transition: all var(--transition);
}
.cc-banner__close:hover { color: var(--color-contrast); background: var(--color-surface-2); }
@media (max-width: 560px) {
  .cc-banner { bottom: 0; width: 100%; border-radius: calc(var(--radius-md) * var(--radius-scale)) calc(var(--radius-md) * var(--radius-scale)) 0 0; }
  .cc-banner__actions .wl-btn { flex: 1; }
}

/* cc preferences modal */
.cc-cats { display: flex; flex-direction: column; gap: var(--spacing-30); }
.cc-cat {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-40);
  padding: var(--spacing-40);
  background: var(--color-surface-2); border: 1px solid var(--color-neutral);
  border-radius: calc(var(--radius-sm) * var(--radius-scale));
}
.cc-cat__text { min-width: 0; }
.cc-cat__name { font-weight: var(--fw-semibold); color: var(--color-contrast); margin: 0; font-size: var(--font-size-base); }
.cc-cat__desc { font-size: var(--font-size-sm); color: var(--color-contrast-subtle); margin: 0.2rem 0 0; line-height: var(--lh-normal); }
.cc-cat__locked { font-size: var(--font-size-sm); color: var(--color-accent-1); font-weight: var(--fw-medium); flex: none; }

/* toggle switch */
.cc-switch { position: relative; flex: none; width: 2.75rem; height: 1.6rem; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-switch__track {
  position: absolute; inset: 0; background: var(--color-surface-3);
  border: 1px solid var(--color-neutral-strong);
  border-radius: var(--radius-full);
  transition: background var(--transition), border-color var(--transition);
}
.cc-switch__track::after {
  content: ""; position: absolute; top: 50%; left: 0.18rem;
  width: 1.1rem; height: 1.1rem;
  transform: translateY(-50%); background: var(--color-contrast-muted);
  border-radius: 50%; transition: transform var(--transition), background var(--transition);
}
.cc-switch input:checked + .cc-switch__track { background: var(--color-accent-1); border-color: var(--color-accent-1); }
.cc-switch input:checked + .cc-switch__track::after { transform: translate(1.15rem, -50%); background: var(--color-accent-on); }
.cc-switch input:disabled + .cc-switch__track { background: var(--color-neutral-strong); border-color: var(--color-neutral-strong); opacity: 0.7; cursor: not-allowed; }
.cc-switch input:focus-visible + .cc-switch__track { box-shadow: var(--shadow-focus); }

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .wl-skeleton,
  .wl-btn[data-loading="true"]::after { animation: none; }
  .wl-card--hoverable:hover,
  .wl-btn:active { transform: none; }
  .wl-overlay, .wl-modal { animation: none; }
}