/*
 * LimitedHub - Career (public job board) page styles.
 *
 * Own stylesheet, same reasoning as marketplace/tutorials/admin - the
 * shared "chrome" below (tokens, reset, navbar, mobile menu, account
 * popover, auth modal, buttons, footer, cookie banner, text-selection) is
 * copied from css/style.css - if you change one of those there, mirror
 * the change here too.
 *
 * The "cr-" prefixed section near the bottom is this page's own: a public
 * job-board catalog (search + three filter facets: discipline, collab
 * type, experience level) rendering rows from `career_postings`, plus the
 * Career Application modal (reuses .auth-overlay/.auth-modal/.auth-form
 * chrome above - it also gets its own small "role summary" header block,
 * see .cr-apply-eyebrow/.cr-apply-tags/.cr-apply-divider further down).
 */

:root {
  /* Tells the browser to render its OWN native UI (select dropdown popups,
     scrollbars, date pickers, etc.) using a dark palette instead of the
     OS/browser default light one - without this, a <select>'s closed box
     picks up our dark .auth-input/.sell-select/etc styling just fine, but
     the popup list of <option>s that appears on click is native browser
     chrome and ignored our CSS entirely, showing up as a jarring white
     dropdown on an otherwise all-dark page. */
  color-scheme: dark;
  --bg: #08080a;
  --border: #1e1e26;
  --border-soft: #16161c;
  --accent: #ff9d2e;
  --accent-dim: #7a4d1c;
  --text: #f4f2ee;
  --text-dim: #8c8b96;
  --text-faint: #55555f;
  --glass-bg: rgba(15, 15, 19, 0.55);
  --avatar-empty: #2b2b33;
  --avatar-empty-ring: #38383f;
  --danger: #ff6b5e;
  --ok: #34d399;
  --font-display: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- custom scrollbar ---------- */

html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) var(--bg);
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--accent-dim);
  border: 3px solid var(--bg);
  border-radius: 999px;
  transition: background-color 0.2s var(--ease);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
}

::-webkit-scrollbar-corner {
  background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.stage {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}

/* Grid pattern folded directly into .stage's own background instead of
   a separate .stage::before pseudo-element (that's what used to bleed
   through card backgrounds - see git history/DEPLOY notes). A box's own
   background always paints behind its own content, no matter what -
   there's no stacking-context/z-index class of bug possible here at
   all, which is strictly more robust than the earlier z-index:-1 patch.
   Known, accepted tradeoff: background-attachment: fixed can silently
   fall back to scroll behavior on some older mobile Safari versions -
   there the grid just scrolls with the page instead of staying pinned;
   harmless, and still strictly better than the bug this replaces. Same
   change mirrored into every page's own css/style.css copy - see
   build.js's header comment for why there's no single shared
   stylesheet. */

/* ---------- NAVBAR (glass) ---------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-bg);
  /* blur radius cut from 22px to 12px - this bar sits sticky at the top
     of every page, so the browser re-computes this blur on every scroll
     frame the whole time you scroll; blur cost roughly scales with the
     radius squared, so this is a large, continuous saving in exchange for
     a barely-noticeable difference in how "frosted" it looks. Originally
     applied only to marketplace/author/css/style.css (Sept 2026) but
     never mirrored to the other copies of this shared chrome - every
     other page kept paying the full 22px cost on every scroll frame
     ever since, which is what made scrolling feel noticeably less smooth
     site-wide compared to that one page. */
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  width: 100%;
  padding: 0 clamp(24px, 5vw, 72px);
  height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* logo */

.logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  outline-offset: 6px;
  padding: 4px 0;
}

.logo:focus-visible {
  outline: 1px solid var(--accent);
}

.logo-mark {
  display: block;
  height: 22px;
  width: auto;
  flex: none;
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
  filter: drop-shadow(0 0 0 rgba(255, 157, 46, 0));
}

.logo:hover .logo-mark {
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 0 14px rgba(255, 157, 46, 0.35));
}

.logo:active .logo-mark {
  transform: translateY(0) scale(0.98);
}

/* center nav */

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.4vw, 20px);
  margin: 0;
  padding: 0;
  justify-self: center;
}

.nav-link {
  position: relative;
  display: inline-block;
  padding: 9px 13px 11px;
  font-size: 0.81rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.25s var(--ease), letter-spacing 0.25s var(--ease);
}

.nav-link-label {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 5px;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--text);
  letter-spacing: 0.055em;
}

.nav-link:hover .nav-link-label,
.nav-link:focus-visible .nav-link-label {
  transform: translateY(-1px);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  opacity: 0.5;
  transform: scaleX(1);
}

.nav-link:focus-visible {
  outline: none;
}

.nav-link.is-active {
  color: var(--text);
  font-weight: 700;
}

.nav-link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* avatar + name */

.nav-right {
  justify-self: end;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* cart icon (shared across all pages) */

.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  color: var(--text-dim);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.cart-btn:hover {
  background-color: rgba(255, 255, 255, 0.045);
  color: var(--text);
}

.cart-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* .cart-btn sets its own `display: flex` for layout (icon centering),
   which - being an ordinary author-stylesheet class rule - always wins
   over the browser's own `[hidden] { display: none }` default, since
   author rules beat UA rules regardless of selector specificity. Without
   this, any button/link carrying .cart-btn while also `hidden` (e.g. the
   notification bell before js/notifications.js decides whether to show
   it - see #notifBtn) renders anyway, as an empty circle, for every
   visitor including signed-out ones. */
.cart-btn[hidden] {
  display: none;
}

.cart-icon {
  width: 19px;
  height: 19px;
}

.cart-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--accent);
  color: #06070a;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.cart-badge[hidden] {
  display: none;
}

/* hamburger (mobile only) */

.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  transition: background-color 0.25s var(--ease);
}

.hamburger-btn:hover {
  background-color: rgba(255, 255, 255, 0.045);
}

.hamburger-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.hamburger-line {
  display: block;
  width: 19px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

.hamburger-btn[aria-expanded='true'] .hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.hamburger-btn[aria-expanded='true'] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-btn[aria-expanded='true'] .hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* mobile dropdown menu */

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  /* same 22px -> 12px cut as .navbar above, same reason - mobile GPUs feel
     a large blur radius even more than desktop does. Missed in the first
     propagation pass since that one only matched the .navbar block; caught
     on the follow-up full-site re-check. */
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border);
  padding: 0 clamp(24px, 5vw, 72px);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.28s var(--ease), opacity 0.2s var(--ease);
}

.mobile-menu.is-open {
  max-height: 320px;
  opacity: 1;
  padding-top: 6px;
  padding-bottom: 14px;
}

.mobile-link {
  padding: 14px 4px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.mobile-link:last-child {
  border-bottom: none;
}

.mobile-link:hover {
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.04);
}

.mobile-link.is-active {
  color: var(--text);
  font-weight: 700;
}

.mobile-link:active {
  color: var(--accent);
}

.account-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  transition: background-color 0.25s var(--ease);
}

.account-btn:hover {
  background-color: rgba(255, 255, 255, 0.045);
}

.account-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.avatar-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--avatar-empty-ring);
  background: var(--avatar-empty);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.account-btn:hover .avatar-ring {
  border-color: var(--accent-dim);
  transform: scale(1.06);
}

.avatar-glyph {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-faint);
}

.avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.avatar-ring[data-photo='1'] .avatar-glyph {
  display: none;
}

.avatar-ring[data-photo='1'] .avatar-photo {
  display: block;
}

.stage[data-auth='in'] .avatar-glyph {
  color: var(--accent);
  font-weight: 600;
}

.account-name {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text);
  display: none;
  transition: color 0.25s var(--ease);
}

.account-btn:hover .account-name {
  color: var(--accent);
}

/* state: logged in */

.stage[data-auth='in'] .avatar-ring {
  border-color: var(--accent-dim);
  background: linear-gradient(145deg, rgba(255, 157, 46, 0.22) 0%, rgba(255, 157, 46, 0.03) 100%);
}

.stage[data-auth='in'] .account-name {
  display: inline;
}

/* popover */

.popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 248px;
  background: #101014;
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  padding: 18px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}

.popover.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.popover-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 10px;
}

.popover-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.popover-body {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 16px;
}

.popover-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.popover-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #3a2c1a 0%, #1c1610 100%);
  border: 1px solid var(--accent-dim);
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.popover-avatar-initial {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}

.popover-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.popover-avatar[data-photo='1'] .popover-avatar-initial {
  display: none;
}

.popover-avatar[data-photo='1'] .popover-avatar-photo {
  display: block;
}

.popover-user-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
}

.popover-user-email {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-faint);
}

.popover-btn {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.popover-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.popover-btn.primary {
  background: var(--accent);
  color: #1a1104;
  border: 1px solid var(--accent);
}

.popover-btn.primary:hover {
  background: #ffb257;
}

.popover-btn.ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  margin-top: 8px;
}

.popover-btn.ghost:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

.popover-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.popover-link {
  display: block;
  padding: 8px 6px;
  font-size: 0.8rem;
  color: var(--text-dim);
  border-radius: 2px;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.popover-link[hidden] {
  display: none;
}

.popover-link:disabled {
  color: var(--text-faint);
  cursor: default;
  pointer-events: none;
}

.popover-link:hover {
  color: var(--text);
  background: var(--border-soft);
}

.popover-link.is-accent {
  color: var(--accent);
  font-weight: 600;
}

.popover-link.is-accent:hover {
  background: rgba(255, 157, 46, 0.1);
}

.popover-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 0;
  border: none;
}

/* ---------- AUTH MODAL (login / register) - also reused as the base for
   the Career Application modal further down, no separate CSS needed for
   it. ---------- */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 5, 4, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  /* visibility (not just opacity/pointer-events) matters here: this class
     is reused by every modal on the site, including the always-present
     sign-in modal's hCaptcha widget. A third-party iframe (hCaptcha's
     checkbox) can re-assert its own `pointer-events: auto` internally,
     which un-does an ancestor's `pointer-events: none` for that iframe
     specifically - opacity/pointer-events alone were not enough to stop
     the CLOSED sign-in modal's captcha from still being clickable through
     whatever modal was actually open on top of it (both share this exact
     class, position and z-index). `visibility: hidden` has no such
     escape hatch - a descendant cannot un-hide itself - so it closes that
     gap for every .auth-overlay on the site, not just this one page.
     Delayed via the transition below so the existing opacity fade-out
     still plays in full before the element actually stops being
     interactive/hit-testable. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), visibility 0s linear 0.22s;
}

.auth-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s var(--ease), visibility 0s linear 0s;
}

.auth-modal {
  width: 100%;
  max-width: 400px;
  background: #121216;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75);
  padding: 30px 30px 28px;
  position: relative;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.3s var(--ease);
}

.auth-modal--tall {
  max-height: min(88vh, 720px);
  overflow-y: auto;
}

.auth-overlay.is-open .auth-modal {
  transform: translateY(0) scale(1);
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 50%;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.auth-close:hover {
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.06);
}

/* brand row */

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 24px;
}

.auth-brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

/* segmented pill switch */

.auth-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #1a1a20;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
}

.auth-switch-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #f1efe8;
  border-radius: 9px;
  transform: translateX(0);
  transition: transform 0.32s var(--ease);
  will-change: transform;
}

.auth-modal[data-mode='signup'] .auth-switch-thumb {
  transform: translateX(100%);
}

.auth-switch-btn {
  position: relative;
  z-index: 1;
  padding: 13px 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-dim);
  transition: color 0.25s var(--ease);
}

.auth-switch-btn.is-active {
  color: #14141a;
}

.auth-switch-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* heading + copy */

.auth-panel {
  margin-top: 22px;
}

.auth-heading {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 8px;
  white-space: nowrap;
}

.auth-heading-accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 800;
}

.auth-subcopy {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 22px;
}

/* form */

.auth-form {
  display: flex;
  flex-direction: column;
}

.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 12px 0 6px;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 6px;
}

.auth-label-row .auth-label {
  margin: 0;
}

.auth-forgot-link {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint);
  transition: color 0.2s var(--ease);
}

.auth-forgot-link:hover {
  color: var(--accent);
}

.auth-forgot-link:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  background: #18181e;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.88rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.auth-input::placeholder {
  color: var(--text-faint);
}

.auth-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 157, 46, 0.14);
}

/* Chrome/Edge/Safari autofill (a saved email/password, address or payment
   autofill) forcibly repaints an input's background AND text color with
   its own yellow/light-blue styling the moment it's autofilled - this
   completely ignores .auth-input's own `background`/`color` above, and a
   real `background-color` override on `:-webkit-autofill` gets ignored
   by the browser too (this is the "browser overrides our style" bug
   people notice on login/signup/checkout forms). The fix is the standard
   trick: an inset box-shadow big enough to cover the whole field is NOT
   one of the properties the browser locks, so painting our own dark
   color that way (instead of `background-color`) actually sticks, and
   `-webkit-text-fill-color` forces the text back to our own color too.
   The absurdly long `transition` delay defeats Chrome's own animation
   that reveals the yellow tint after a short delay. Applies everywhere
   .auth-input is used (login/signup, checkout, profile editing, "Start a
   Project", tutorials/add, etc.) since they all share this one class. */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #18181e inset;
  box-shadow: 0 0 0 1000px #18181e inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* Belt-and-suspenders for the <select> popup on top of `color-scheme: dark`
   above (root of the file) - explicit dark colors on every <option> site-
   wide, in case a browser only partially dark-themes the native dropdown. */
select option {
  background: #18181e;
  color: var(--text);
}

.auth-textarea {
  min-height: 110px;
  resize: vertical;
  font-family: var(--font-display);
  line-height: 1.5;
}

/* show/hide password */

.auth-password-wrap {
  position: relative;
}

.auth-password-wrap .auth-input {
  padding-right: 46px;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--text-faint);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.auth-password-toggle:hover {
  color: var(--text-dim);
  background-color: rgba(255, 255, 255, 0.06);
}

.auth-password-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.auth-password-toggle.is-visible {
  color: var(--accent);
}

.icon-eye {
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url('/assets/icons/eye.svg') no-repeat center / contain;
  mask: url('/assets/icons/eye.svg') no-repeat center / contain;
}

.auth-password-toggle.is-visible .icon-eye {
  -webkit-mask-image: url('/assets/icons/eye-slash.svg');
  mask-image: url('/assets/icons/eye-slash.svg');
}

.auth-error {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--danger);
  background: rgba(255, 107, 94, 0.08);
  border: 1px solid rgba(255, 107, 94, 0.25);
  border-radius: 8px;
  padding: 9px 11px;
  margin-top: 12px;
}

.auth-success {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ok);
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 8px;
  padding: 9px 11px;
  margin-top: 12px;
}

.auth-submit {
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--accent);
  color: #1a1104;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 16px 32px -12px rgba(255, 157, 46, 0.5);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}

.auth-submit-arrow {
  transition: transform 0.2s var(--ease);
}

.auth-submit:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 20px 38px -12px rgba(255, 157, 46, 0.6);
}

.auth-submit:hover .auth-submit-arrow {
  transform: translateX(3px);
}

.auth-submit:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* google */

.auth-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0 16px;
}

.auth-google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #18181e;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.auth-google-btn:hover {
  background: #1e1e25;
  border-color: var(--text-faint);
}

.auth-google-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.google-icon {
  flex: none;
  display: block;
}

/* footer lines */

.auth-legal {
  margin: 14px 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-faint);
  text-align: center;
}

.auth-legal a {
  color: var(--text-dim);
  text-decoration: underline;
}

.auth-legal a:hover {
  color: var(--text);
}

.auth-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 2px;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-faint);
  cursor: pointer;
}

.auth-consent-checkbox {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}

.auth-consent-row a {
  color: var(--text-dim);
  text-decoration: underline;
}

.auth-consent-row a:hover {
  color: var(--text);
}

@media (max-width: 480px) {
  .auth-modal {
    padding: 24px 20px 24px;
    border-radius: 18px;
  }

  .auth-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- shared: wide modal + custom select dropdown ----------
   Added for the "Start a Project" modal (partials/project-inquiry-modal.html,
   see js/site-forms.js) - a from-scratch <select> re-skin, promoted to
   shared chrome since the project inquiry modal is injected on every page.
   This page already has its own .auth-modal--wide (see further down) -
   only the generic select classes are new here. If you change one of these, mirror the
   change in every other page's own copy (same rule as the rest of this
   "shared chrome" block - see the comment at the top of this file). */


/* A native <select>'s closed box happily takes .auth-input's dark
   styling, but its OPEN popup is OS/browser chrome - `color-scheme: dark`
   (root of this file) gets it part of the way, but the browser still
   paints its own blue highlight on the hovered/selected row and there is
   no CSS hook to change that. So any <select> that opts into this (see
   enhanceSelect() in js/site-forms.js) gets visually hidden via
   `.select-native` below - it stays in the DOM as the real source of
   truth for .value - and a fully custom trigger button + option list is
   layered on top instead, themed with our own accent color. */
.select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.select-wrap {
  position: relative;
}

.select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-value--placeholder {
  color: var(--text-faint);
}

.select-arrow {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--text-dim);
  border-bottom: 1px solid var(--text-dim);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.select-wrap.is-open .select-arrow {
  transform: rotate(-135deg) translateY(1px);
  border-color: var(--accent);
}

.select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  background: #18181e;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
}

.select-option {
  padding: 9px 10px;
  border-radius: 7px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}

.select-option:hover,
.select-option.is-active {
  background: rgba(255, 157, 46, 0.14);
}

.select-option[aria-selected='true'] {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- shared: "Start a Project" modal extras ----------
   Added back alongside the modal itself (partials/project-inquiry-modal.html,
   js/site-forms.js) when "Start a Project" reverted from its own page back
   to a popup. Mirrors the "success panel" pattern already used elsewhere
   (tutorials/add's .admin-gate, the old /start-project page's
   .sp-success-panel) but under its own class names since this modal is
   shared on every page and shouldn't depend on the admin-only .admin-gate
   styling. If you change one of these, mirror the change in every other
   page's own copy (same rule as the rest of this "shared chrome" block). */

/* .auth-form sets `display: flex`, which (being an author-stylesheet rule)
   otherwise wins over the browser's own `[hidden] { display: none }` -
   without this, `someForm.hidden = true` on anything carrying .auth-form
   silently does nothing. */
.auth-form[hidden] {
  display: none;
}

.project-success-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 180px;
  text-align: center;
  color: var(--text-dim);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 16px;
  background: rgba(52, 211, 153, 0.05);
  padding: 32px 24px;
}

.project-success-panel[hidden] {
  display: none;
}

.project-success-panel-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.project-success-panel-text {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  max-width: 420px;
}

.project-optional {
  text-transform: none;
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 0;
}

/* ---------- main content / hero ---------- */

.main-content {
  flex: 1;
}

@media (max-width: 720px) {
  .nav-links {
    display: none;
  }
  .nav-inner {
    grid-template-columns: auto 1fr;
  }
  .account-name {
    display: none !important;
  }
  .hamburger-btn {
    display: flex;
  }
  .popover {
    width: min(280px, calc(100vw - 48px));
  }
}

/* ---------- buttons (shared, copied from css/style.css) ---------- */

.hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 26px;
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), filter 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.hero-btn[hidden] {
  display: none;
}

.hero-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s var(--ease-premium);
  pointer-events: none;
}

.hero-btn:hover::before {
  left: 130%;
}

.hero-btn.primary {
  background: var(--accent);
  color: #1a1104;
  box-shadow: 0 20px 40px -18px rgba(255, 157, 46, 0.55);
}

.hero-btn.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 24px 46px -16px rgba(255, 157, 46, 0.65);
}

.hero-btn-arrow {
  transition: transform 0.2s var(--ease);
}

.hero-btn.primary:hover .hero-btn-arrow {
  transform: translateX(3px);
}

.hero-btn.outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.hero-btn.outline:hover {
  border-color: var(--text-faint);
  background: rgba(255, 255, 255, 0.03);
}

.hero-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.hero-btn.small {
  padding: 10px 18px;
  font-size: 0.72rem;
}

/* ---------- footer ---------- */

.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000000;
  border-top: 1px solid var(--border);
  padding: 40px clamp(24px, 5vw, 72px) 0;
}

.footer-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 48px;
  padding-bottom: 32px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.footer-logo-mark {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.footer-logo-word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.footer-tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-faint);
  margin: 0;
  max-width: 300px;
}

.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-faint);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease-premium);
}

.footer-social-link:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  transform: translateY(-2px);
}

.footer-social-link svg {
  width: 14px;
  height: 14px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 150px));
  gap: 28px;
  justify-content: end;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 4px;
}

.footer-link {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--text-faint);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease-premium);
}

.footer-link:hover {
  color: var(--text);
  transform: translateX(2px);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.footer-copyright,
.footer-signature {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  margin: 0;
}

.footer-watermark {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1px var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 90%);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
  margin-top: 2px;
  padding-bottom: 14px;
  overflow: hidden;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-links {
    justify-content: start;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    gap: 24px;
  }
  .footer-brand {
    max-width: 420px;
  }
}

@media (max-width: 560px) {
  .footer {
    padding-top: 36px;
  }
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ---------- career: hero ---------- */
/* Same recipe as portfolio/css/style.css's .pf-hero (this page had no hero
   before - just the plain .cr-catalog-title straight at the top, which is
   why it read as flat/unfinished next to pages like /portfolio that lead
   with one). Keyframes + .hero-eyebrow-bar/.hero-btn-reveal are the same
   shared entrance-animation recipe as the home hero and portfolio's hero -
   copied here since this page didn't need them until now. */

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes heroBarGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes heroBtnSlideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-eyebrow-bar {
  display: block;
  width: 56px;
  height: 2px;
  margin: 0 0 26px;
  background: var(--accent);
  transform-origin: left center;
  animation: heroBarGrow 0.7s var(--ease-premium) both;
}

.hero-btn-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateX(-28px);
  animation: heroBtnSlideIn 0.6s var(--ease-premium) 0.8s forwards;
}

.cr-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 69px);
  padding: 72px clamp(24px, 5vw, 72px) 56px;
}

.cr-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(120% 140% at 12% 0%, #1c1c22 0%, var(--bg) 58%);
}

.cr-hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 78%);
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.cr-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.cr-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  animation: heroFadeUp 0.7s var(--ease-premium) 0.25s both;
}

.cr-hero-title-accent {
  color: var(--accent);
}

.cr-hero-desc {
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 0 30px;
  animation: heroFadeUp 0.7s var(--ease-premium) 0.45s both;
}

.cr-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 560px) {
  .cr-hero {
    padding-bottom: 44px;
  }
}

/* ---------- career: public job-board catalog ---------- */

.cr-catalog {
  position: relative;
  padding: 48px clamp(24px, 5vw, 72px) 90px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
}

.cr-catalog.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cr-catalog-head {
  margin-bottom: 32px;
}

.cr-catalog-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.cr-catalog-subtitle {
  color: var(--text-dim);
  font-size: 0.94rem;
  max-width: 560px;
  margin: 0;
}

.cr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.cr-search {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 560px;
}

.cr-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.cr-search-input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #0e0e12;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.88rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.cr-search-input::placeholder {
  color: var(--text-faint);
}

.cr-search-input:focus {
  outline: none;
  border-color: var(--accent-dim);
  background: #131318;
}

.cr-toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cr-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.15s var(--ease);
}

.cr-toggle-btn:active {
  transform: scale(0.96);
}

.cr-toggle-btn:hover {
  border-color: var(--text-faint);
  color: var(--text);
}

.cr-toggle-btn.is-active {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(255, 157, 46, 0.06);
}

.cr-toggle-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* Mobile-only "Filters" toggle - same pattern as tutorials/marketplace:
   reuses .cr-toggle-btn's look, shown only under max-width:900px where
   .cr-sidebar collapses under the list instead of sitting beside it. */

.cr-filters-toggle {
  display: none;
}

.cr-filters-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.cr-posting-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.cr-catalog-body {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  align-items: start;
}

.cr-main {
  min-width: 0;
}

.cr-postings-list {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 240px;
  text-align: center;
}

.cr-empty-icon {
  width: 34px;
  height: 34px;
}

.cr-empty-text {
  font-size: 0.92rem;
  color: var(--text-faint);
  margin: 0;
}

/* posting card - a row, not a thumbnail tile: there's no image to show for
   a job opening, so this borrows the admin-row look (border/background,
   see admin/career/css/style.css) rather than the tutorials/marketplace
   card grid pattern. */

.cr-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px 26px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #0e0e12;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-premium), transform 0.5s var(--ease-premium), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
  /* Whole card opens the detail modal now (career/js/main.js's
     crCreateCard()) - cursor makes that discoverable instead of it only
     being obvious for the separate Apply button. */
  cursor: pointer;
}

.cr-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cr-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cr-card:hover {
  border-color: var(--accent-dim);
  background: #131318;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.7);
  transform: translateY(-3px);
}

.cr-card-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 220px;
  flex: 1;
}

.cr-card-title {
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.cr-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cr-card-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.cr-card-tag.is-accent {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: rgba(255, 157, 46, 0.06);
}

.cr-card-tag.is-new {
  color: var(--ok);
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
  font-weight: 700;
}

/* Apply modal (#crApplyOverlay) role-summary header - see the comment
   above it in career/index.html. A soft tapered glow line instead of a
   flat bar, same "premium" detail as /login's .login-visual-eyebrow. */
.cr-apply-eyebrow {
  display: block;
  width: 44px;
  height: 3px;
  margin: 2px 0 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(255, 157, 46, 0));
  box-shadow: 0 0 14px rgba(255, 157, 46, 0.5);
}

/* .auth-heading's shared nowrap is fine for a short "Welcome back!" but
   would truncate a longer posting title here - same fix as
   .cr-detail-title above. */
.cr-apply-heading {
  white-space: normal;
  margin-bottom: 10px;
}

/* Reuses .cr-card-tag as-is (crBuildTags() in career/js/main.js builds the
   same markup for the card, the detail modal and here) so a posting's
   discipline/collab type/experience/work type read identically everywhere
   on this page. */
.cr-apply-tags {
  margin: 0 0 18px;
}

.cr-apply-tags:empty {
  display: none;
}

.cr-apply-subcopy {
  margin-top: 0;
}

.cr-apply-divider {
  height: 1px;
  margin: 2px 0 20px;
  background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
}

.cr-card-desc {
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cr-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cr-card-posted {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-faint);
}

.cr-card-meta-dot {
  color: var(--text-faint);
  font-size: 0.74rem;
}

.cr-card-salary {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}

/* Detail modal (#crDetailOverlay) - reuses .cr-card-tag/.cr-card-posted/
   .cr-card-meta-dot/.auth-modal styling, the rest of these are new. */

/* Whole title in .auth-heading-accent's italic orange (the shared login/
   signup styling) read as too loud repeated for every single job title, so
   this modal gets its own plain, wrapping heading instead - white-space:
   normal overrides .auth-heading's nowrap, which is fine for a short
   "Welcome back!" but would truncate a longer posting title. */
.cr-detail-title {
  white-space: normal;
  font-style: normal;
}

.cr-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
}

.cr-detail-salary {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
}

.cr-detail-subhead {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin: 22px 0 8px;
}

/* 2026-10-02: now rendered from crRenderDescriptionMarkdown() (career/js/
   main.js) instead of dumped as raw textContent - **bold**, "## " headings
   and "- " bullets written into a posting's description now actually
   render, instead of showing as literal asterisks/hashes (see the Discord
   report that prompted this). Changed from a <p> to a <div> in
   career/index.html since its rendered output can include block-level
   children (<p>/<h3>/<ul>) a <p> can't legally contain. white-space:
   pre-line dropped - line breaks are now real <br>/<p> elements, not raw
   "\n" characters relying on CSS to show them. */
.cr-detail-desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-dim);
}

.cr-detail-desc p {
  margin: 0 0 14px;
}

.cr-detail-desc p:last-child {
  margin-bottom: 0;
}

.cr-detail-desc .cr-detail-list {
  margin: 0 0 14px;
}

.cr-detail-subheading {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  margin: 18px 0 8px;
}

.cr-detail-subheading:first-child {
  margin-top: 0;
}

/* Bold/bullet-list buttons shown above a posting's description/requirements
   textarea (career/js/main.js's crAttachFormatToolbar()) - same small
   outline button look used for the public board's own Edit button, just
   grouped in a row instead of styled from scratch. */
.cr-fmt-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.cr-fmt-btn {
  padding: 4px 12px;
  font-size: 0.78rem;
}

.cr-detail-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 22px 0;
}

/* Requirements list - was a single pre-line paragraph of "- " prefixed
   lines (career/js/main.js used to just dump the raw text in), which read
   as an unformatted wall of dashes. Real <li>s with an accent-colored
   marker instead. */
.cr-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cr-detail-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-dim);
}

.cr-detail-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.cr-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* Staff-only Edit button (crCreateCard() in career/js/main.js) - reuses
   .hero-btn.outline.small as-is, no extra rules needed beyond spacing it
   from Apply above. */

/* "+ Add Posting" tile - staff only, spliced into the first slot of
   .cr-postings-list (see crIsLimitedHub/crBuildAddTile() in
   career/js/main.js), same dashed-border "+Add X" tile convention as
   tutorials/marketplace, just laid out for a row-shaped list instead of a
   thumbnail grid. Has to come after the generic .cr-card rules above
   (same specificity, so source order decides) since it overrides their
   layout/border. */
.cr-add-tile {
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 88px;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  width: 100%;
}

.cr-add-tile:hover {
  border-color: var(--accent);
  background: rgba(255, 157, 46, 0.05);
}

.cr-add-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.cr-add-tile:hover .cr-add-tile-icon {
  border-color: var(--accent);
  transform: scale(1.08);
}

.cr-add-tile-label {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s var(--ease);
}

.cr-add-tile:hover .cr-add-tile-label {
  color: var(--text);
}

/* Add Posting modal (#crPostingFormModal) - wider than the standard
   .auth-modal (400px) since it packs the whole section-row builder below
   and felt cramped/narrow at that width. Scoped to its own modifier class
   rather than changing .auth-modal itself, since that class is shared with
   login/signup, "Start a Project", the freelancer application and the
   career application modal - none of those should get wider along with
   this one. */
.auth-modal--wide {
  max-width: 680px;
}

/* Discipline / Collaboration Type / Experience Level side by side now that
   the modal has room, same idea as the shared .auth-row (signup's First
   Name/Last Name) but 3 columns instead of 2. Each child wraps one
   label+select pair, same markup convention as .auth-row. */
.cr-posting-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 640px) {
  .cr-posting-row-3 {
    grid-template-columns: 1fr;
  }
}

/* Work Type / Salary side by side - same idea as .cr-posting-row-3 above,
   2 columns instead of 3 since a 3-column grid would leave an empty third
   cell here. */
.cr-posting-row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 640px) {
  .cr-posting-row-2 {
    grid-template-columns: 1fr;
  }
}

/* ================= Add Posting builder (#crPostingBuilder) - the
   pencil-icon-opens-a-small-modal, in-memory-draft-object pattern copied
   from marketplace/sell (Add Item/Edit Listing) and marketplace/author's
   own section editors (openSectionModal() etc. in career/js/main.js).
   Same class names on purpose (.ai-section/.ai-placeholder-btn/
   .au-section-edit-btn/.au-section-modal/...) - every page that uses this
   pattern keeps its own copy of this block, per the site's "own copy per
   page" convention, so mirror any change made here over there too. Unlike
   marketplace/sell this page has no photo/product-preview layout to
   reuse, so .cr-posting-builder is just a plain stacked column instead of
   .pd-layout's two-column grid. ================= */

.cr-posting-builder {
  margin-top: 18px;
}

.ai-section {
  margin-bottom: 22px;
}

.ai-section:last-of-type {
  margin-bottom: 0;
}

.ai-editable-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-section-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 8px;
  display: block;
}

.ai-required-dot {
  color: var(--accent);
}

.ai-placeholder-btn {
  /* flex:1 so every row's box stretches to the modal's full width, whether
     it's still an empty dashed placeholder or already filled in - see the
     matching comment in marketplace/sell/css/style.css. */
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 9px 14px;
  color: var(--text-faint);
  font-size: 0.85rem;
  font-family: var(--font-display);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.ai-placeholder-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(255, 157, 46, 0.08);
}

.ai-placeholder-btn .ai-plus {
  font-size: 1rem;
  line-height: 1;
  flex: none;
}

/* once a section has real content, it stops looking like a form field and
   starts looking like plain page copy - still the same clickable button
   underneath. */
.ai-placeholder-btn.ai-filled {
  display: block;
  border-style: solid;
  border-color: var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  white-space: normal;
  line-height: 1.5;
}

.ai-placeholder-btn.ai-filled:hover {
  border-color: var(--accent-dim);
  background: rgba(255, 157, 46, 0.06);
}

.ai-placeholder-btn.ai-filled-title {
  border: none;
  background: none;
  padding: 2px 0;
  font-weight: 900;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  color: var(--text);
}

.ai-placeholder-btn.ai-filled-title:hover {
  color: var(--accent);
  background: none;
}

.au-section-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border);
  color: var(--text-faint);
  background: transparent;
  flex: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.au-section-edit-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(255, 157, 46, 0.1);
}

/* Clicking a placeholder or pencil to open its modal blurs that trigger as
   soon as the modal opens (see openSectionModal() in career/js/main.js) so
   the browser's default focus ring doesn't show through the backdrop blur
   as a stray glowing outline - these rules keep a real focus ring for
   keyboard users (:focus-visible) while never showing the plain-click one. */
.ai-placeholder-btn:focus,
.au-section-edit-btn:focus {
  outline: none;
}

.ai-placeholder-btn:focus-visible,
.au-section-edit-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.au-section-edit-btn[hidden] {
  display: none;
}

.au-section-edit-btn svg {
  width: 13px;
  height: 13px;
}

.au-section-modal {
  /* focus() lands here on open (see openSectionModal()) so the trigger
     button isn't left focused behind the blur - the modal itself doesn't
     need its own visible ring for that. */
  outline: none;
  max-width: 620px;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  will-change: transform;
}

.au-section-modal-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 16px;
}

.au-section-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.au-section-modal-body .auth-label {
  margin-top: 4px;
}

.au-section-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
  font-family: var(--font-display);
}

.au-section-hint {
  font-size: 0.76rem;
  color: var(--text-faint);
  line-height: 1.5;
  margin: 6px 0 0;
}

.au-section-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- submit bar + progress, same shape as marketplace/sell's own
   .ai-submit-bar/.ai-progress-note. ---- */

.ai-submit-bar {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.ai-submit-bar .hero-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.ai-progress-note {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0;
}

.ai-progress-note strong {
  color: var(--accent);
}

.ai-progress-note.is-ready strong {
  color: var(--ok);
}

/* Custom-styled dropdown for Discipline / Collaboration Type / Experience
   Level (see crEnhanceSelect() in career/js/main.js). The real <select>
   (still populated by crFillSelect(), still what the submit handler reads
   .value from) gets visually hidden with `.cr-select-native` below and a
   fully custom trigger button + option list is laid on top, because a
   native <select>'s OPEN popup is OS/browser chrome - `color-scheme: dark`
   and the `select option` rule above only get us so far, the browser still
   paints its own blue highlight on the hovered/selected row and there is
   no CSS hook to change that. This way hover/selected uses our own accent
   color instead. */
.cr-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cr-select {
  position: relative;
}

.cr-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.cr-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-select-value--placeholder {
  color: var(--text-faint);
}

.cr-select-arrow {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--text-dim);
  border-bottom: 1px solid var(--text-dim);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.cr-select.is-open .cr-select-arrow {
  transform: rotate(-135deg) translateY(1px);
  border-color: var(--accent);
}

.cr-select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  background: #18181e;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
}

.cr-select-option {
  padding: 9px 10px;
  border-radius: 7px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
}

.cr-select-option:hover,
.cr-select-option.is-active {
  background: rgba(255, 157, 46, 0.14);
}

.cr-select-option[aria-selected='true'] {
  color: var(--accent);
  font-weight: 600;
}

/* sidebar */

.cr-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cr-filter-group {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.015);
}

.cr-filter-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 12px;
}

.cr-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cr-filter-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  text-align: left;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.cr-filter-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  transform: translateX(3px);
}

.cr-filter-btn.is-active {
  background: var(--accent);
  color: #1a1104;
}

.cr-filter-btn.is-active .cr-filter-count {
  color: #1a1104;
  opacity: 0.7;
}

.cr-filter-label {
  flex: 1;
}

.cr-filter-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
}

@media (max-width: 900px) {
  .cr-catalog-body {
    grid-template-columns: 1fr;
  }
  .cr-filters-toggle {
    display: inline-flex;
  }
  .cr-sidebar {
    order: -1;
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 8px;
  }
  .cr-sidebar.is-open {
    display: flex;
  }
  .cr-filter-group {
    flex: 1;
    min-width: 200px;
  }
}

@media (max-width: 560px) {
  .cr-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .cr-toolbar-right {
    justify-content: space-between;
  }
  .cr-search {
    max-width: none;
  }
  .cr-card {
    flex-direction: column;
    align-items: stretch;
  }
  .cr-card-actions {
    justify-content: flex-start;
  }
}

/* ---------- cookie consent banner (shared chrome, see
   partials/cookie-banner.html + js/cookie-consent.js - if you change one
   of those, mirror the change here too). ---------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  padding: 0 clamp(16px, 4vw, 32px) clamp(16px, 4vw, 32px);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.4s var(--ease-premium), opacity 0.3s var(--ease);
  pointer-events: none;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cookie-banner-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: #101014;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65);
}

.cookie-banner-text {
  flex: 1 1 320px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}

.cookie-banner-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-link:hover {
  color: var(--text);
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  flex-wrap: wrap;
}

.cookie-banner-btn {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), filter 0.2s var(--ease);
}

.cookie-banner-btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.cookie-banner-btn.ghost:hover {
  border-color: var(--text-faint);
  color: var(--text);
}

.cookie-banner-btn.primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #1a1104;
}

.cookie-banner-btn.primary:hover {
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}

@media (max-width: 640px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .cookie-banner-text {
    flex-basis: auto;
  }
  .cookie-banner-actions {
    justify-content: stretch;
  }
  .cookie-banner-btn {
    flex: 1 1 0;
    text-align: center;
  }
}

/* ---------- text selection highlight (site-wide) - see css/style.css's
   header comment for why there's no single shared stylesheet to add this
   to instead. ---------- */

::selection {
  background: rgba(255, 157, 46, 0.28);
  color: var(--text);
}

/* ---------- notification bell (js/notifications.js) - shown once
   signed in, a small red dot appears while there's at least one unread
   notification (a REAL one - see notifications_migration.sql - not a
   decorative reuse of some other count). The bell reuses .cart-btn/
   .cart-icon for identical sizing; the dropdown below it is the same
   visual language as .popover, just anchored to the bell itself (not the
   whole .nav-right) via .notif-wrap so it doesn't have to share
   .popover's own right:0 anchor. ---------- */

.notif-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6b5e;
  border: 2px solid #06070a;
}

.notif-dot[hidden] {
  display: none;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 420px;
  overflow-y: auto;
  background: #101014;
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  padding: 14px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
  z-index: 40;
}

.notif-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.notif-panel-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.notif-mark-all-btn {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent);
  transition: opacity 0.2s var(--ease);
}

.notif-mark-all-btn:hover {
  opacity: 0.8;
}

.notif-mark-all-btn[hidden] {
  display: none;
}

.notif-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notif-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.2s var(--ease);
}

.notif-item:hover {
  background-color: rgba(255, 255, 255, 0.045);
}

.notif-item.is-unread {
  background-color: rgba(255, 157, 46, 0.07);
}

.notif-item-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 3px;
}

.notif-item-body {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-dim);
  margin: 0 0 4px;
}

.notif-item-time {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-faint);
}

.notif-empty {
  font-size: 0.82rem;
  color: var(--text-faint);
  text-align: center;
  padding: 18px 6px;
  margin: 0;
}

.notif-empty[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .notif-panel {
    width: calc(100vw - 32px);
    right: -8px;
  }
}

/* ---------- tags: every type gets its own colour (Oct 2026) ----------
   Collab / level / work-type tags used to be grey-on-transparent and read
   as disabled. */
.cr-card-tag {
  color: var(--text-dim);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.cr-card-tag.is-collab {
  color: #e8e6ef;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.cr-card-tag.is-level {
  color: #9db7ff;
  border-color: rgba(120, 150, 255, 0.4);
  background: rgba(120, 150, 255, 0.1);
}

.cr-card-tag.is-work {
  color: #5eead4;
  border-color: rgba(45, 212, 191, 0.4);
  background: rgba(45, 212, 191, 0.1);
}

/* ---------- optional cover graphic ---------- */
.cr-card.has-cover {
  overflow: hidden;
}

.cr-card-cover {
  flex: 0 0 calc(100% + 52px);
  height: 140px;
  margin: -24px -26px 0;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border);
}

.cr-detail-cover {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 12px;
  margin: 4px 0 18px;
  border: 1px solid var(--border);
}

.cr-detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.cr-detail-fact {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.cr-detail-fact dt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.cr-detail-fact dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

/* editor: quick-fill chips + cover graphic */
.cp-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cp-preset {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  cursor: pointer;
}

.cp-preset:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.cp-image-filled {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-image-thumb {
  width: 80px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.cp-image-preview {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.cp-image-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cp-image-pick {
  cursor: pointer;
}

.cp-image-status {
  font-size: 0.8rem;
  color: var(--text-faint);
  margin: 10px 0 0;
}

/* Pay - last line of the role summary, just above the application form. */
.cr-detail-pay {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.cr-detail-pay[hidden] { display: none; }
.cr-detail-pay-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cr-detail-pay-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
  text-align: right;
}

/* Application form at the bottom of the detail modal. */
.cr-detail-apply {
  scroll-margin-top: 12px;
  padding-top: 4px;
}
.cr-detail-apply .cr-apply-heading {
  font-size: 1.35rem;
  margin-top: 6px;
}

/* ---- "Copy link" button (js/copy-link.js) ---- */
.lh-copy-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim, #b8b8c0);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.lh-copy-link:hover,
.lh-copy-link:focus-visible {
  color: var(--text, #fff);
  border-color: var(--accent, #ff9f2e);
}
.lh-copy-link.is-copied {
  color: #7be0a8;
  border-color: rgba(123, 224, 168, 0.5);
  background: rgba(123, 224, 168, 0.08);
}
.lh-copy-link-icon { display: inline-flex; width: 14px; height: 14px; }
.lh-copy-link-icon svg { width: 100%; height: 100%; }

.cr-detail-meta { flex-wrap: wrap; }
.cr-detail-share { margin-left: auto; }