/* ================================================================
   NOIR PLATFORM v2 — STYLESHEET
   Scoped to .noir-v2. Every layout property uses !important
   to defeat Stotage theme overrides. Tokens from _tokens.css.
   ================================================================ */

/* ──────── 0. ISOLATION RESET ──────── */
.noir-v2 {
  background: var(--noir-paper) !important;
  color: var(--noir-ink) !important;
  font-family: var(--noir-sans) !important;
  font-size: var(--t-body) !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.noir-v2 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Kill Stotage overrides on semantic tags */
.noir-v2 header,
.noir-v2 main,
.noir-v2 section,
.noir-v2 article,
.noir-v2 aside,
.noir-v2 footer,
.noir-v2 nav {
  background: transparent !important;
  color: inherit !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  position: static !important;
  display: block !important;
}
/* Kill Stotage form input overrides */
.noir-v2 input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not(.noir-admin-search-input),
.noir-v2 select,
.noir-v2 textarea {
  display: block !important;
  width: 100% !important;
  font-family: var(--noir-sans) !important;
  font-size: 15px !important;
  color: var(--noir-ink) !important;
  background: var(--noir-paper-2) !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-md) !important;
  padding: 12px 14px !important;
  outline: 0 !important;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) !important;
  -webkit-appearance: none;
  appearance: none;
}
.noir-v2 input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):focus,
.noir-v2 select:focus,
.noir-v2 textarea:focus {
  border-color: var(--noir-ink) !important;
  background: var(--noir-paper) !important;
  outline: 0 !important;
}
.noir-v2 textarea { min-height: 90px; resize: vertical; }
.noir-v2 img { max-width: 100%; display: block; }
.noir-v2 a { color: inherit; text-decoration: none; }
.noir-v2 button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.noir-v2 ul, .noir-v2 ol { list-style: none; }

/* ──────── 1. TYPOGRAPHY ──────── */
.noir-v2 h1, .noir-v2 h2, .noir-v2 h3, .noir-v2 h4, .noir-v2 h5 {
  font-family: var(--noir-serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--noir-ink);
}
.noir-v2 em { font-style: italic; }
.noir-v2 strong { font-weight: 600; }

/* ──────── 2. LAYOUT UTILITIES ──────── */
.noir-v2 .noir-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}
.noir-v2 .noir-wrap--narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 28px; }
.noir-v2 .noir-grid-2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
.noir-v2 .noir-grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.noir-v2 .noir-grid-4 { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.noir-v2 .noir-flex    { display: flex !important; }
.noir-v2 .noir-hidden  { display: none !important; }

/* ──────── 3. PRIMITIVES ──────── */
.noir-v2 .noir-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--noir-sans);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--noir-muted);
  font-weight: 500;
}
.noir-v2 .noir-eyebrow::before {
  content: "✦";
  color: var(--noir-orange);
  font-size: 13px;
}

.noir-v2 .noir-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--noir-paper-2);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--noir-ink-2);
}
.noir-v2 .noir-pill--pay  { background: #0F3D2E; color: #D5F2D5; }
.noir-v2 .noir-pill--warn { background: var(--noir-butter); color: #5C4513; }
.noir-v2 .noir-pill--info { background: #DCE8F4; color: #1d4ed8; }

/* Status pills */
.noir-v2 .noir-status {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--noir-sans);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 600;
}
.noir-v2 .noir-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.noir-v2 .noir-status--pending    { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.noir-v2 .noir-status--active,
.noir-v2 .noir-status--approved,
.noir-v2 .noir-status--hired,
.noir-v2 .noir-status--qualified  { background: var(--st-success-bg); color: var(--st-success-fg); }
.noir-v2 .noir-status--rejected,
.noir-v2 .noir-status--cancelled  { background: var(--st-danger-bg); color: var(--st-danger-fg); }
.noir-v2 .noir-status--sent,
.noir-v2 .noir-status--forwarded,
.noir-v2 .noir-status--reviewing  { background: var(--st-info-bg); color: var(--st-info-fg); }
.noir-v2 .noir-status--vetting,
.noir-v2 .noir-status--on_hold    { background: var(--st-vet-bg); color: var(--st-vet-fg); }
.noir-v2 .noir-status--draft,
.noir-v2 .noir-status--received,
.noir-v2 .noir-status--new        { background: var(--st-neutral-bg); color: var(--st-neutral-fg); }
.noir-v2 .noir-status--paid       { background: var(--st-paid-bg); color: var(--st-paid-fg); }

/* ──────── 4. BUTTONS ──────── */
.noir-v2 .noir-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  font-family: var(--noir-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--dur-med);
  text-decoration: none;
  white-space: nowrap;
}
.noir-v2 .noir-btn--primary   { background: var(--noir-orange); color: #fff; border-color: var(--noir-orange); }
.noir-v2 .noir-btn--primary:hover { background: var(--noir-ink); border-color: var(--noir-ink); }
.noir-v2 .noir-btn--ink       { background: var(--noir-ink); color: var(--noir-paper); }
.noir-v2 .noir-btn--ink:hover { background: var(--noir-orange); border-color: var(--noir-orange); }
.noir-v2 .noir-btn--ghost     { background: transparent; color: var(--noir-ink); border-color: var(--noir-ink); }
.noir-v2 .noir-btn--ghost:hover { background: var(--noir-ink); color: var(--noir-paper); }
.noir-v2 .noir-btn--danger    { background: var(--st-danger-bg); color: var(--st-danger-fg); }
.noir-v2 .noir-btn--danger:hover { background: var(--st-danger-fg); color: #fff; }
.noir-v2 .noir-btn--sm  { padding: 9px 16px; font-size: 12px; }
.noir-v2 .noir-btn--lg  { padding: 18px 28px; font-size: 15px; }
.noir-v2 .noir-btn--block { width: 100% !important; }
.noir-v2 .noir-btn[disabled] { opacity: .45; pointer-events: none; }

/* ──────── 5. ALERTS ──────── */
.noir-v2 .noir-alert {
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 18px;
  display: block !important;
}
.noir-v2 .noir-alert--success { background: var(--st-success-bg); color: var(--st-success-fg); }
.noir-v2 .noir-alert--error   { background: var(--st-danger-bg); color: var(--st-danger-fg); }
.noir-v2 .noir-alert--info    { background: var(--st-info-bg); color: var(--st-info-fg); }
.noir-v2 .noir-alert--warn    { background: var(--st-warn-bg); color: var(--st-warn-fg); }

/* ──────── 6. FORM FIELDS ──────── */
.noir-v2 .noir-field { margin-bottom: 16px; }
.noir-v2 .noir-field label {
  display: block !important;
  font-size: 13px;
  color: var(--noir-ink-2);
  margin-bottom: 6px;
  font-weight: 500;
}
.noir-v2 .noir-field label .req { color: var(--noir-orange); }
.noir-v2 .noir-field .noir-hint { font-size: 12px; color: var(--noir-muted); margin-top: 4px; display: block; }
.noir-v2 .noir-field--error   input,
.noir-v2 .noir-field--error   select,
.noir-v2 .noir-field--error   textarea { border-color: var(--st-danger-fg) !important; }
.noir-v2 .noir-field--success input,
.noir-v2 .noir-field--success select,
.noir-v2 .noir-field--success textarea { border-color: var(--st-success-fg) !important; }
.noir-v2 .noir-field__msg { font-size: 12px; margin-top: 4px; display: flex !important; align-items: center; gap: 4px; }
.noir-v2 .noir-field--error   .noir-field__msg { color: var(--st-danger-fg); }
.noir-v2 .noir-field--success .noir-field__msg { color: var(--st-success-fg); }

.noir-v2 .noir-row-2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
.noir-v2 .noir-row-3 { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* Dark-panel fields (used inside ink-bg forms like apply/review) */
.noir-v2 .noir-field--ink input,
.noir-v2 .noir-field--ink textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(244,240,232,.25) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  color: var(--noir-paper) !important;
  font-size: 16px !important;
}
.noir-v2 .noir-field--ink input:focus,
.noir-v2 .noir-field--ink textarea:focus { border-color: var(--noir-orange) !important; }
.noir-v2 .noir-field--ink input::placeholder,
.noir-v2 .noir-field--ink textarea::placeholder { color: rgba(244,240,232,.35); }
.noir-v2 .noir-field--ink label { opacity: .7; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; }

/* Auth-page bare inputs (underline style on white bg) */
.noir-v2 .noir-field--bare input {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1.5px solid var(--noir-ink) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  font-size: 17px !important;
}
.noir-v2 .noir-field--bare input:focus { border-color: var(--noir-orange) !important; }
.noir-v2 .noir-field--bare input::placeholder { color: var(--noir-muted); font-style: italic; }
.noir-v2 .noir-field--bare label {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  font-weight: 500;
}

/* Checkbox / radio list items */
.noir-v2 .noir-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--noir-paper-2);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.noir-v2 .noir-check input { display: inline-block !important; width: auto !important; accent-color: var(--noir-orange); }
.noir-v2 .noir-check:hover { border-color: var(--noir-ink); }
.noir-v2 .noir-check.is-checked { background: var(--noir-ink); color: var(--noir-paper); }

/* Day pills container */
.noir-v2 .noir-day-pills,
.noir-v2 .noir-su-days { display: flex !important; flex-wrap: wrap; gap: 6px; }

/* Day pill toggles */
.noir-v2 .noir-day-pill {
  padding: 10px 16px;
  background: var(--noir-paper-2);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--noir-sans);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: all var(--dur-fast);
  display: inline-block !important;
}
.noir-v2 .noir-day-pill:hover { border-color: var(--noir-ink); }
.noir-v2 .noir-day-pill.is-on { background: var(--noir-orange); color: #fff; border-color: var(--noir-orange); }

/* File upload zone */
.noir-v2 .noir-file-zone,
.noir-v2 .noir-upload {
  border: 1.5px dashed var(--noir-hair);
  border-radius: var(--r-md);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--dur-med);
  background: var(--noir-paper-2);
  display: block !important;
}
.noir-v2 .noir-file-zone:hover,
.noir-v2 .noir-upload:hover { border-color: var(--noir-ink); background: var(--noir-paper); }
.noir-v2 .noir-file-zone .ico,
.noir-v2 .noir-upload .ico { font-size: 28px; margin-bottom: 6px; display: block; }
.noir-v2 .noir-file-zone .t,
.noir-v2 .noir-upload .t   { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.noir-v2 .noir-file-zone .h,
.noir-v2 .noir-upload .h   { font-size: 12px; color: var(--noir-muted); }

/* ──────── 7. AUTH PAGE (login) ──────── */
/* Uses ID selector to guarantee win over any theme class */
#noir-auth,
.noir-v2 .noir-auth {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  min-height: 100vh !important;
  background: var(--noir-paper) !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
#noir-auth > .noir-auth__art,
.noir-v2 .noir-auth__art {
  background: var(--noir-ink) !important;
  color: var(--noir-paper) !important;
  padding: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 100vh !important;
  position: relative !important;
  overflow: hidden !important;
  float: none !important;
  width: auto !important;
}
#noir-auth > .noir-auth__form-wrap,
.noir-v2 .noir-auth__form-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 48px 28px !important;
  min-height: 100vh !important;
  background: var(--noir-paper) !important;
  float: none !important;
  width: auto !important;
}
.noir-v2 .noir-auth__art::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  background: radial-gradient(circle, var(--noir-orange) 0%, transparent 65%);
  opacity: .5;
  top: -180px;
  right: -220px;
  filter: blur(40px);
  pointer-events: none;
}
.noir-v2 .noir-auth__brand {
  font-family: var(--noir-serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.02em;
  position: relative;
}
.noir-v2 .noir-auth__brand .dot { color: var(--noir-orange); }
.noir-v2 .noir-auth__tag {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .12em;
  opacity: .6;
  margin-top: 6px;
  font-weight: 500;
}
.noir-v2 .noir-auth__quote { position: relative; max-width: 480px; }
.noir-v2 .noir-auth__quote .label {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--noir-orange);
  margin-bottom: 14px;
  font-weight: 600;
}
.noir-v2 .noir-auth__quote h2 {
  font-family: var(--noir-serif);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.noir-v2 .noir-auth__quote h2 em { font-style: normal; color: var(--noir-orange); font-weight: 600; }
.noir-v2 .noir-auth__stats {
  position: relative;
  display: flex !important;
  gap: 36px;
  border-top: 1px solid rgba(244,240,232,.18);
  padding-top: 24px;
  flex-wrap: wrap;
}
.noir-v2 .noir-auth__stat .num { font-family: var(--noir-serif); font-size: 42px; font-weight: 400; }
.noir-v2 .noir-auth__stat .lbl { text-transform: uppercase; font-size: 10px; letter-spacing: .1em; opacity: .6; font-weight: 500; }
.noir-v2 .noir-auth__form { width: 100%; max-width: 420px; }
.noir-v2 .noir-auth__field { margin-bottom: 18px; }
.noir-v2 .noir-auth__field label {
  display: block !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--noir-muted);
  margin-bottom: 8px;
}
.noir-v2 .noir-auth__form .noir-eyebrow { margin-bottom: 14px; }
.noir-v2 .noir-auth__form h1 {
  font-family: var(--noir-serif);
  font-weight: 300;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -.025em;
  margin-bottom: 36px;
}
.noir-v2 .noir-auth__form h1 em { font-style: normal; color: var(--noir-orange); font-weight: 600; }
.noir-v2 .noir-auth__aside {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0 28px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
}
.noir-v2 .noir-auth__aside a { color: var(--noir-muted); border-bottom: 1px solid var(--noir-hair); }
.noir-v2 .noir-auth__aside a:hover { color: var(--noir-orange); border-color: var(--noir-orange); }
.noir-v2 .noir-auth__aside label { display: flex !important; align-items: center; gap: 8px; cursor: pointer; }
.noir-v2 .noir-auth__aside input[type=checkbox] {
  display: inline-block !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  accent-color: var(--noir-orange);
}
.noir-v2 .noir-auth__divider {
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin: 36px 0 24px;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--noir-muted);
  font-weight: 500;
}
.noir-v2 .noir-auth__divider::before,
.noir-v2 .noir-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--noir-hair); }
.noir-v2 .noir-auth__roles { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.noir-v2 .noir-auth__role {
  padding: 18px;
  border: 1px solid var(--noir-ink);
  border-radius: var(--r-md);
  text-align: left;
  transition: all var(--dur-med);
  cursor: pointer;
  background: transparent;
  text-decoration: none;
  color: inherit;
  display: block !important;
}
.noir-v2 .noir-auth__role:hover { background: var(--noir-ink); color: var(--noir-paper); }
.noir-v2 .noir-auth__role .ico { font-size: 22px; margin-bottom: 8px; display: block; }
.noir-v2 .noir-auth__role .t  { font-family: var(--noir-serif); font-size: 18px; font-weight: 500; margin-bottom: 2px; }
.noir-v2 .noir-auth__role .s  { text-transform: uppercase; font-size: 10px; letter-spacing: .1em; opacity: .7; font-weight: 500; }

/* ──────── 8. SIGN UP PAGES ──────── */
.noir-v2 .noir-su-hero {
  padding: var(--s-8) 0 var(--s-6);
  text-align: center;
  border-bottom: 1px solid var(--noir-line);
}
.noir-v2 .noir-su-hero .noir-eyebrow { justify-content: center; }
.noir-v2 .noir-su-hero h1 {
  font-family: var(--noir-serif);
  font-weight: 300;
  font-size: clamp(48px, 7vw, 96px);
  line-height: .95;
  letter-spacing: -.03em;
  margin: 18px auto 14px;
  max-width: 800px;
}
.noir-v2 .noir-su-hero h1 em { font-style: normal; color: var(--noir-orange); font-weight: 600; }
.noir-v2 .noir-su-hero p { color: var(--noir-muted); font-size: 17px; max-width: 540px; margin: 0 auto; }

.noir-v2 .noir-su-switch {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 780px;
  margin: var(--s-7) auto 0;
  padding: 0 28px;
}
.noir-v2 .noir-su-switch__card {
  padding: 28px;
  background: var(--noir-paper);
  border: 1.5px solid var(--noir-hair);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: left;
  transition: all var(--dur-med);
  position: relative;
  overflow: hidden;
  display: block !important;
}
.noir-v2 .noir-su-switch__card:hover  { border-color: var(--noir-ink); transform: translateY(-2px); }
.noir-v2 .noir-su-switch__card.is-active { background: var(--noir-ink); color: var(--noir-paper); border-color: var(--noir-ink); }
.noir-v2 .noir-su-switch__card.is-active .desc { color: rgba(244,240,232,.65); }
.noir-v2 .noir-su-switch__card .ico  { font-size: 28px; margin-bottom: 14px; display: block; }
.noir-v2 .noir-su-switch__card .lbl  { font-family: var(--noir-serif); font-size: 24px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 6px; }
.noir-v2 .noir-su-switch__card .desc { font-size: 13.5px; color: var(--noir-muted); line-height: 1.5; }

.noir-v2 .noir-su-form {
  max-width: 780px;
  margin: var(--s-7) auto 80px;
  background: var(--noir-paper);
  border-radius: var(--r-lg);
  padding: 48px;
  border: 1px solid var(--noir-hair);
  display: block !important;
}
.noir-v2 .noir-su-form.is-hidden { display: none !important; }

.noir-v2 .noir-su-section { padding: var(--s-5) 0; border-bottom: 1px solid var(--noir-hair); }
.noir-v2 .noir-su-section:last-of-type { border-bottom: 0; }
.noir-v2 .noir-su-section__lbl {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--noir-muted);
  margin-bottom: 18px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.noir-v2 .noir-su-section__lbl .num {
  display: inline-grid !important;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--noir-ink);
  color: var(--noir-paper);
  font-size: 11px;
  font-weight: 600;
}

.noir-v2 .noir-su-skill-grid,
.noir-v2 .noir-skill-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}
.noir-v2 .noir-su-days { display: flex !important; flex-wrap: wrap; gap: 6px; }
.noir-v2 .noir-su-project {
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 14px;
  position: relative;
}
.noir-v2 .noir-su-project-num,
.noir-v2 .noir-su-project__num {
  position: absolute;
  top: -10px;
  left: 20px;
  background: var(--noir-ink);
  color: var(--noir-paper);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .1em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.noir-v2 .noir-su-submit-row,
.noir-v2 .noir-su-submit {
  padding-top: 24px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.noir-v2 .noir-su-submit-row .note,
.noir-v2 .noir-su-note { font-size: 13px; color: var(--noir-muted); }
.noir-v2 .noir-su-submit-row .note a,
.noir-v2 .noir-su-note a { color: var(--noir-orange); font-weight: 500; border-bottom: 1px solid var(--noir-orange); }

/* Inline label hint (e.g. "Select all that apply") */
.noir-v2 .hint { font-size: 11px; color: var(--noir-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ──────── MARQUEE ──────── */
@keyframes noir-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.noir-v2 .noir-marquee {
  overflow: hidden !important;
  background: var(--noir-ink);
  color: var(--noir-paper);
  padding: 14px 0;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.noir-v2 .noir-marquee__track {
  display: inline-flex !important;
  animation: noir-marquee 28s linear infinite;
  width: max-content;
}
.noir-v2 .noir-marquee__track span { padding: 0 8px; }
.noir-v2 .noir-marquee__track .star { color: var(--noir-orange); margin: 0 8px; }
.noir-v2 .noir-marquee:hover .noir-marquee__track { animation-play-state: paused; }

/* ──────── 9. PUBLIC PAGES ──────── */

/* Shared hero */
.noir-v2 .noir-hero {
  padding: 64px 0 48px;
  position: relative;
}
.noir-v2 .noir-hero h1 {
  font-family: var(--noir-serif);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 108px);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 18px 0 24px;
}
.noir-v2 .noir-hero h1 em { font-style: normal; color: var(--noir-orange); font-weight: 600; }
/* BEM: __meta wraps lead + actions */
.noir-v2 .noir-hero__meta {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  border-top: 1px solid var(--noir-line);
  padding-top: 24px;
  margin-top: 36px;
}
.noir-v2 .noir-hero__lead { max-width: 520px; font-size: 17px; color: var(--noir-ink-2); line-height: 1.4; }
.noir-v2 .noir-hero__actions { display: flex !important; gap: 10px; flex-wrap: wrap; }

/* Filter strip — flex lives on the form, not the wrapper div */
.noir-v2 .noir-filter-strip {
  border-top: 1px solid var(--noir-line);
  border-bottom: 1px solid var(--noir-line);
  padding: 18px 0;
  margin: 24px 0 32px;
  background: var(--noir-paper) !important;
}
.noir-v2 .noir-filter-strip form {
  display: flex !important;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.noir-v2 .noir-filter-search {
  flex: 1;
  min-width: 240px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  border-right: 1px solid var(--noir-line);
}
.noir-v2 .noir-filter-search svg { flex-shrink: 0; color: var(--noir-muted); }
.noir-v2 .noir-filter-search input {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-style: italic;
  width: 100% !important;
  color: var(--noir-ink) !important;
  padding: 0 !important;
  display: block !important;
}
.noir-v2 .noir-filter-search input::placeholder { color: var(--noir-muted); opacity: 1; }
.noir-v2 .noir-filter-pills {
  display: flex !important;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
/* select.noir-filter-pill — the select IS the pill */
.noir-v2 .noir-filter-pill {
  padding: 8px 16px !important;
  border: 1px solid var(--noir-line) !important;
  border-radius: var(--r-pill) !important;
  text-transform: uppercase;
  font-size: 10.5px !important;
  letter-spacing: .1em;
  background: transparent !important;
  color: var(--noir-ink) !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: background var(--dur-med), color var(--dur-med), border-color var(--dur-med);
  display: inline-block !important;
  width: auto !important;
  line-height: 1.4;
}
.noir-v2 .noir-filter-pill:hover,
.noir-v2 .noir-filter-pill:focus { background: var(--noir-ink) !important; color: var(--noir-paper) !important; border-color: var(--noir-ink) !important; outline: 0; }
.noir-v2 .noir-filter-clear { font-size: 13px; color: var(--noir-muted); white-space: nowrap; text-decoration: none; }
.noir-v2 .noir-filter-clear:hover { color: var(--noir-orange); }

/* Results bar */
.noir-v2 .noir-results,
.noir-v2 .noir-results-bar {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 24px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--noir-muted);
  font-weight: 500;
  flex-wrap: wrap;
  gap: 10px;
}
.noir-v2 .noir-results strong,
.noir-v2 .noir-results-bar strong {
  font-family: var(--noir-serif);
  font-size: 22px;
  color: var(--noir-orange);
  text-transform: none;
  letter-spacing: -.01em;
  margin-right: 4px;
  font-weight: 600;
}

/* View toggle (list / grid) */
.noir-v2 .noir-view-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--noir-ink);
  border-radius: var(--r-pill);
  padding: 3px;
  background: var(--noir-paper);
}
.noir-v2 .noir-view-toggle button {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--noir-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  transition: all var(--dur-fast);
  line-height: 1;
}
.noir-v2 .noir-view-toggle button.active { background: var(--noir-ink); color: var(--noir-paper); }
.noir-v2 .noir-view-toggle button:not(.active):hover { background: var(--noir-paper-2); }

/* Jobs board hero */
.noir-v2 .noir-jb-hero { padding: 64px 0 36px; }
.noir-v2 .noir-jb-hero h1 {
  font-family: var(--noir-serif);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 108px);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 18px 0 24px;
}
.noir-v2 .noir-jb-hero h1 em { font-style: normal; color: var(--noir-orange); font-weight: 600; }
.noir-v2 .noir-jb-hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  border-top: 1px solid var(--noir-line);
  padding-top: 24px;
  margin-top: 36px;
}
.noir-v2 .noir-jb-hero-meta p { max-width: 520px; font-size: 17px; color: var(--noir-ink-2); line-height: 1.4; margin: 0; }

/* Talent grid */
.noir-v2 .noir-talent-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px 22px;
  padding-bottom: 80px;
}
.noir-v2 .noir-talent-card {
  background: var(--noir-paper);
  border-radius: 18px;
  overflow: hidden;
  transition: transform var(--dur-med), box-shadow var(--dur-med);
  cursor: pointer;
  display: flex !important;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.noir-v2 .noir-talent-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* .noir-talent-card__cover — the photo area */
.noir-v2 .noir-talent-card__cover {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--noir-paper-2);
}
.noir-v2 .noir-talent-card__cover img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .6s ease; display: block !important; }
.noir-v2 .noir-talent-card:hover .noir-talent-card__cover img { transform: scale(1.04); }
.noir-v2 .noir-talent-card__cover-placeholder {
  width: 100%; height: 100%;
  display: grid !important;
  place-items: center;
  font-family: var(--noir-serif);
  font-size: 56px;
  font-weight: 600;
  color: var(--noir-muted);
  background: var(--noir-paper-2);
}
/* overlay bar at bottom of cover */
.noir-v2 .noir-talent-card__bar {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.noir-v2 .noir-talent-card__rating {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}
.noir-v2 .noir-talent-card__rating .star { color: var(--noir-orange); }
.noir-v2 .noir-talent-card__jobs {
  background: rgba(15,15,15,.72);
  color: #fff;
  backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
}
.noir-v2 .noir-talent-card__tag {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--noir-paper);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .1em;
}
.noir-v2 .noir-tc-like { display: inline-flex !important; align-items: center; gap: 4px; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; line-height: 1; }
.noir-v2 .noir-tc-like-ico { font-size: 14px; line-height: 1; }
.noir-v2 .noir-like-btn--active .noir-like-ico { color: #e11d48; }
/* card info section */
.noir-v2 .noir-talent-card__info { padding: 14px 4px 4px; }
.noir-v2 .noir-talent-card__name { font-family: var(--noir-serif); font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.noir-v2 .noir-talent-card__nick { font-style: italic; color: var(--noir-muted); font-size: 13.5px; margin-bottom: 8px; }
.noir-v2 .noir-talent-card__loc {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--noir-muted);
}
.noir-v2 .noir-talent-card__skills { display: flex !important; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.noir-v2 .noir-talent-card__skill { padding: 4px 10px; background: var(--noir-paper-2); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 500; color: var(--noir-ink-2); }
.noir-v2 .noir-talent-card__skill--exp { background: var(--noir-ink); color: var(--noir-paper); }
.noir-v2 .noir-talent-card__days { display: flex !important; gap: 3px; margin-top: 10px; }
.noir-v2 .noir-dc {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid !important;
  place-items: center;
  font-size: 9px;
  font-weight: 600;
}
.noir-v2 .noir-dc--on  { background: var(--noir-orange); color: #fff; }
.noir-v2 .noir-dc--off { background: var(--noir-paper-2); color: var(--noir-muted); }

/* ──────── MEMBER PROFILE PAGE (.noir-tp-*) ──────── */
.noir-v2 .noir-back-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  padding: 32px 0 20px;
}
.noir-v2 .noir-back-link:hover { color: var(--noir-orange); }

/* Two-column head: huge name left, tall portrait right */
.noir-v2 .noir-tp-head {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: end;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--noir-line);
}
.noir-v2 .noir-tp-headline { padding-bottom: 6px; }
.noir-v2 .noir-tp-headline .noir-eyebrow { margin-bottom: 14px; }
.noir-v2 .noir-tp-name {
  font-family: var(--noir-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(48px, 7vw, 92px) !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
}
.noir-v2 .noir-tp-name em { font-style: normal !important; color: var(--noir-orange); font-weight: 600 !important; }
.noir-v2 .noir-tp-nick {
  font-style: italic;
  color: var(--noir-muted);
  font-size: 18px;
  margin-top: 14px;
}
.noir-v2 .noir-tp-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  font-family: var(--noir-mono);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--noir-muted);
}
.noir-v2 .noir-tp-meta span { display: inline-flex !important; align-items: center; gap: 6px; }
.noir-v2 .noir-tp-exps { display: flex !important; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.noir-v2 .noir-tp-exp {
  padding: 5px 14px;
  background: var(--noir-paper-2);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--noir-ink);
}
.noir-v2 .noir-tp-exp--dark {
  background: var(--noir-ink);
  color: var(--noir-paper);
}

/* Tall portrait column */
.noir-v2 .noir-tp-photo {
  position: relative !important;
  aspect-ratio: 4/5;
  border-radius: 24px;
  overflow: hidden;
  background: var(--noir-paper-2);
}
.noir-v2 .noir-tp-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block !important;
}
.noir-v2 .noir-tp-photo-init {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center;
  font-family: var(--noir-serif);
  font-size: clamp(60px, 10vw, 120px);
  font-weight: 600;
}
.noir-v2 .noir-tp-rating {
  position: absolute !important;
  bottom: 18px;
  left: 18px;
  background: var(--noir-paper);
  padding: 14px 18px;
  border-radius: 14px;
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.noir-v2 .noir-tp-rating .num { font-family: var(--noir-serif); font-size: 32px; font-weight: 500; line-height: 1; }
.noir-v2 .noir-tp-rating .star { color: var(--noir-orange); font-size: 20px; }
.noir-v2 .noir-tp-rating .sub {
  font-family: var(--noir-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  max-width: 80px;
  line-height: 1.2;
}

/* Action buttons row */
.noir-v2 .noir-tp-actions {
  display: flex !important;
  gap: 10px;
  margin: 24px 0 48px;
  flex-wrap: wrap;
}
.noir-v2 .noir-tp-actions .noir-btn { display: inline-flex !important; align-items: center; gap: 7px; }
.noir-v2 .noir-save-btn--saved { border-color: var(--noir-orange) !important; color: var(--noir-orange) !important; }
.noir-v2 .noir-save-btn--saved .noir-save-ico { color: var(--noir-orange); }

/* Content grid sections (About, Skills, Availability) */
.noir-v2 .noir-tp-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  padding: 48px 0;
  border-bottom: 1px solid var(--noir-line);
}
.noir-v2 .noir-tp-grid h2 {
  font-family: var(--noir-mono) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: .12em;
  color: var(--noir-muted);
}
.noir-v2 .noir-tp-grid p { font-size: 18px; line-height: 1.55; color: var(--noir-ink-2); }

/* Skills chips */
.noir-v2 .noir-tp-skills { display: flex !important; flex-wrap: wrap; gap: 8px; }
.noir-v2 .noir-tp-skill {
  padding: 8px 14px;
  background: var(--noir-paper-2);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
}

/* Availability day chips */
.noir-v2 .noir-tp-days { display: flex !important; flex-wrap: wrap; gap: 8px; }
.noir-v2 .noir-dc-lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid !important;
  place-items: center;
  font-family: var(--noir-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.noir-v2 .noir-dc-lg.on { background: var(--noir-orange); color: #fff; }
.noir-v2 .noir-dc-lg.off { background: var(--noir-paper-2); color: var(--noir-muted); }

/* Featured projects */
.noir-v2 .noir-tp-projects { padding: 48px 0; }
.noir-v2 .noir-tp-projects-head {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
}
.noir-v2 .noir-tp-projects-head .title {
  font-family: var(--noir-serif);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -.02em;
}
.noir-v2 .noir-tp-projects-head .title em { font-style: normal !important; color: var(--noir-orange); font-weight: 600 !important; }
.noir-v2 .mono {
  font-family: var(--noir-mono);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
}
.noir-v2 .noir-proj-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.noir-v2 .noir-proj-card {
  border-radius: 18px;
  overflow: hidden;
  background: var(--noir-paper-2);
  position: relative !important;
  aspect-ratio: 4/3;
  display: block !important;
  color: inherit;
  text-decoration: none;
}
.noir-v2 .noir-proj-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block !important;
  transition: transform .6s ease;
}
.noir-v2 .noir-proj-card:hover img { transform: scale(1.03); }
.noir-v2 .noir-proj-card .meta {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(15,15,15,.85), transparent);
  color: #fff;
}
.noir-v2 .noir-proj-card .meta .t { font-family: var(--noir-serif); font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.noir-v2 .noir-proj-card .meta .d { font-size: 13px; opacity: .85; margin-top: 4px; }

/* Reviews */
.noir-v2 .noir-tp-reviews { padding: 48px 0; border-top: 1px solid var(--noir-line); }
.noir-v2 .noir-tp-reviews-head {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.noir-v2 .noir-tp-reviews-head > div:first-child {
  font-family: var(--noir-serif);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -.02em;
}
.noir-v2 .noir-tp-reviews-head > div:first-child em { font-style: normal !important; color: var(--noir-orange); font-weight: 600 !important; }
.noir-v2 .noir-review {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--noir-hair);
}
.noir-v2 .noir-review__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--noir-ink);
  color: var(--noir-paper);
  display: grid !important;
  place-items: center;
  font-family: var(--noir-serif);
  font-weight: 500;
  font-size: 18px;
  flex-shrink: 0;
}
.noir-v2 .noir-review__quote {
  font-family: var(--noir-serif);
  font-size: 21px;
  line-height: 1.4;
  color: var(--noir-ink-2);
  font-weight: 300;
}
.noir-v2 .noir-review__meta {
  font-family: var(--noir-mono);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  margin-top: 8px;
}
.noir-v2 .noir-review__stars { color: var(--noir-orange); font-size: 13px; letter-spacing: 1px; white-space: nowrap; }

/* Leave a review */
.noir-v2 .noir-tp-leave { padding: 48px 0 80px; }
.noir-v2 .noir-leave-review {
  background: var(--noir-ink);
  color: var(--noir-paper);
  border-radius: 24px;
  padding: 42px;
}
.noir-v2 .noir-leave-review .noir-eyebrow { color: var(--noir-orange-2); }
.noir-v2 .noir-leave-review h3 {
  font-family: var(--noir-serif);
  font-size: 36px;
  font-weight: 400;
  margin: 14px 0 24px;
  letter-spacing: -.02em;
}
.noir-v2 .noir-leave-review .noir-field { margin-bottom: 14px; }
.noir-v2 .noir-leave-review .noir-field label {
  display: block !important;
  font-family: var(--noir-mono);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .1em;
  margin-bottom: 8px;
  opacity: .7;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--noir-paper);
}
.noir-v2 .noir-leave-review input:not([type=radio]):not([type=checkbox]),
.noir-v2 .noir-leave-review textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(244,240,232,.25) !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  color: var(--noir-paper) !important;
  font-size: 16px !important;
}
.noir-v2 .noir-leave-review input:not([type=radio]):not([type=checkbox]):focus,
.noir-v2 .noir-leave-review textarea:focus {
  border-bottom-color: var(--noir-orange) !important;
  background: transparent !important;
}

/* Star rating input (RTL trick) */
.noir-v2 .noir-stars {
  display: inline-flex !important;
  direction: rtl;
  gap: 2px;
  font-size: 24px;
  color: var(--noir-paper-2);
}
.noir-v2 .noir-star-input { display: none !important; }
.noir-v2 .noir-stars label {
  cursor: pointer;
  color: rgba(244,240,232,.3);
  transition: color .15s;
  display: inline-block !important;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.noir-v2 .noir-stars label:hover,
.noir-v2 .noir-stars label:hover ~ label,
.noir-v2 .noir-stars input:checked ~ label { color: var(--noir-orange); }

/* Jobs board — list view */
.noir-v2 .noir-jobs-list { display: grid; gap: 14px; padding-bottom: 80px; }
.noir-v2 .noir-job-card {
  display: grid !important;
  grid-template-columns: 64px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 24px;
  background: var(--noir-paper);
  border: 1px solid var(--noir-hair);
  border-radius: 18px;
  transition: all var(--dur-med);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.noir-v2 .noir-job-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--noir-orange);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur-med);
}
.noir-v2 .noir-job-card:hover { border-color: var(--noir-ink); transform: translateY(-2px); }
.noir-v2 .noir-job-card:hover::before { transform: scaleY(1); }
.noir-v2 .noir-job-logo {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: var(--noir-paper-2);
  display: grid !important;
  place-items: center;
  font-family: var(--noir-serif);
  font-weight: 600;
  font-size: 22px;
  overflow: hidden;
  flex-shrink: 0;
}
.noir-v2 .noir-job-logo img { width: 100%; height: 100%; object-fit: cover; }
.noir-v2 .noir-job-main { min-width: 0; }
.noir-v2 .noir-job-row1 { display: flex !important; align-items: center; gap: 10px; margin-bottom: 6px; }
.noir-v2 .noir-job-title { font-family: var(--noir-serif); font-size: 24px; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.noir-v2 .noir-job-type {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .1em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--noir-paper-2);
  color: var(--noir-ink);
  font-weight: 600;
  white-space: nowrap;
  display: inline-block !important;
}
.noir-v2 .noir-job-type--full-time  { background: var(--noir-ink); color: var(--noir-paper); }
.noir-v2 .noir-job-type--part-time  { background: var(--noir-butter); color: var(--noir-ink); }
.noir-v2 .noir-job-type--gig,
.noir-v2 .noir-job-type--freelance  { background: var(--noir-orange); color: #fff; }
.noir-v2 .noir-job-type--contract   { background: var(--noir-lilac); color: var(--noir-ink); }
.noir-v2 .noir-job-type--internship { background: var(--noir-lime); color: var(--noir-ink); }
.noir-v2 .noir-job-company  { color: var(--noir-muted); font-size: 14px; margin-bottom: 10px; }
.noir-v2 .noir-job-pills { display: flex !important; flex-wrap: wrap; gap: 6px; }
.noir-v2 .noir-job-side {
  text-align: right;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.noir-v2 .noir-job-applicants {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  display: flex !important;
  align-items: center;
  gap: 5px;
}
.noir-v2 .noir-job-applicants strong {
  color: var(--noir-orange);
  font-family: var(--noir-serif);
  font-weight: 600;
  font-size: 17px;
  text-transform: none;
  margin-right: 3px;
}

/* Job pill tags (location, pay, bonus, etc.) */
.noir-v2 .noir-job-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--noir-paper-2);
  border-radius: var(--r-pill);
  font-size: 12px;
  color: var(--noir-ink-2);
  white-space: nowrap;
}
.noir-v2 .noir-job-pill--pay   { background: #0F3D2E; color: #D5F2D5; }
.noir-v2 .noir-job-pill--bonus { background: var(--noir-rose, #FFD9D2); color: #5C2A1B; }

/* Job time (posted ago) */
.noir-v2 .noir-job-time { font-size: 12px; color: var(--noir-muted); }

/* Jobs grid view */
.noir-v2 .noir-jobs-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding-bottom: 80px;
}
.noir-v2 .noir-job-card-grid {
  background: var(--noir-paper);
  border: 1px solid var(--noir-hair);
  border-radius: 18px;
  padding: 22px;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  transition: all var(--dur-med);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.noir-v2 .noir-job-card-grid::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  background: var(--noir-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med);
}
.noir-v2 .noir-job-card-grid:hover { border-color: var(--noir-ink); transform: translateY(-3px); }
.noir-v2 .noir-job-card-grid:hover::before { transform: scaleX(1); }
.noir-v2 .noir-jcg-head { display: flex !important; justify-content: space-between; align-items: flex-start; gap: 10px; }
.noir-v2 .noir-jcg-logo { width: 52px; height: 52px; border-radius: 12px; background: var(--noir-paper-2); display: grid !important; place-items: center; font-family: var(--noir-serif); font-weight: 600; font-size: 18px; overflow: hidden; flex-shrink: 0; }
.noir-v2 .noir-jcg-logo img { width: 100%; height: 100%; object-fit: cover; }
.noir-v2 .noir-jcg-title { font-family: var(--noir-serif); font-size: 20px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; color: var(--noir-ink); }
.noir-v2 .noir-jcg-company { color: var(--noir-muted); font-size: 13px; margin-top: -6px; }
.noir-v2 .noir-jcg-desc { font-size: 13px; color: var(--noir-ink-2); line-height: 1.5; border-top: 1px dashed var(--noir-hair); padding-top: 12px; margin-top: auto; }
.noir-v2 .noir-jcg-foot { display: flex !important; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; }
.noir-v2 .noir-jcg-app { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--noir-muted); }
.noir-v2 .noir-jcg-app b { color: var(--noir-ink); font-family: var(--noir-serif); font-weight: 600; font-size: 14px; text-transform: none; margin-right: 3px; }

/* Single job page */
.noir-v2 .noir-sj-wrap { max-width: 980px; margin: 0 auto; padding: 0 28px; }
.noir-v2 .noir-sj-head {
  display: grid !important;
  grid-template-columns: 88px 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px 0 32px;
  border-bottom: 1px solid var(--noir-line);
}
.noir-v2 .noir-sj-logo {
  width: 88px; height: 88px;
  border-radius: 18px;
  background: var(--noir-paper-2);
  display: grid !important;
  place-items: center;
  font-family: var(--noir-serif);
  font-weight: 600;
  font-size: 30px;
  overflow: hidden;
}
.noir-v2 .noir-sj-logo img { width: 100%; height: 100%; object-fit: cover; }
.noir-v2 .noir-sj-title { font-family: var(--noir-serif); font-size: clamp(36px, 5vw, 56px); font-weight: 400; letter-spacing: -.025em; line-height: 1.05; margin-bottom: 6px; }
.noir-v2 .noir-sj-company { text-transform: uppercase; font-size: 12px; letter-spacing: .12em; color: var(--noir-muted); }
.noir-v2 .noir-sj-pills { display: flex !important; flex-wrap: wrap; gap: 6px; padding: 24px 0; border-bottom: 1px solid var(--noir-hair); }
.noir-v2 .noir-sj-applicants { padding: 18px 0; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; color: var(--noir-muted); border-bottom: 1px solid var(--noir-hair); }
.noir-v2 .noir-sj-applicants strong { color: var(--noir-orange); font-family: var(--noir-serif); font-size: 20px; text-transform: none; margin-right: 4px; }
.noir-v2 .noir-sj-section { padding: 36px 0; border-bottom: 1px solid var(--noir-hair); }
.noir-v2 .noir-sj-section h3 { text-transform: uppercase; font-size: 11px; letter-spacing: .12em; color: var(--noir-muted); margin-bottom: 16px; font-family: var(--noir-sans); font-weight: 500; }
.noir-v2 .noir-sj-section p,
.noir-v2 .noir-sj-section li { font-size: 17px; line-height: 1.6; color: var(--noir-ink-2); margin-bottom: 10px; }
.noir-v2 .noir-sj-section ul { padding-left: 20px; list-style: disc; }
.noir-v2 .noir-sj-apply {
  background: var(--noir-ink);
  color: var(--noir-paper);
  border-radius: 24px;
  padding: 42px;
  margin: 32px 0 80px;
}
.noir-v2 .noir-sj-apply .noir-eyebrow { color: var(--noir-orange-2); }
.noir-v2 .noir-sj-apply h3 { font-family: var(--noir-serif); font-size: 36px; font-weight: 400; margin: 14px 0 28px; letter-spacing: -.02em; }
.noir-v2 .noir-cv-attached {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.06);
  padding: 14px;
  border-radius: 12px;
  font-size: 13px;
  margin: 14px 0;
}
.noir-v2 .noir-cv-attached .check {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--noir-lime);
  color: #2D3A0F;
  display: grid !important;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* ──────── 10. DASHBOARD SHELL ──────── */
/* ID selector guarantees win over any theme class */
#noir-dash-shell,
.noir-v2 .noir-dash-shell {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: var(--noir-paper) !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  position: relative !important;
}
#noir-dash-shell > aside,
#noir-dash-shell > div,
.noir-v2 .noir-dash-shell > aside,
.noir-v2 .noir-dash-shell > div {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  position: static !important;
  min-width: 0;
}

.noir-v2 .noir-dash-rail {
  background: var(--noir-ink) !important;
  color: var(--noir-paper) !important;
  padding: 28px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  height: 100dvh !important; /* dynamic viewport height — avoids iOS address-bar gap */
  overflow: hidden !important; /* nav scrolls internally; whole rail stays locked */
  width: 100% !important;
  box-sizing: border-box !important;
}
.noir-v2 .noir-dash-brand {
  font-family: var(--noir-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.noir-v2 .noir-dash-brand .dot { color: var(--noir-orange); }
.noir-v2 .noir-dash-role {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: .12em;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(244,240,232,.08);
  color: var(--noir-paper);
  width: max-content;
}
.noir-v2 .noir-dash-role .led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--noir-orange);
  box-shadow: 0 0 8px var(--noir-orange);
}
.noir-v2 .noir-dash-role--employer .led { background: var(--noir-lime); box-shadow: 0 0 8px var(--noir-lime); }
.noir-v2 .noir-dash-role--admin    .led { background: var(--noir-lilac); box-shadow: 0 0 8px var(--noir-lilac); }

.noir-v2 .noir-dash-me {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 0 16px;
  border-bottom: 1px solid rgba(244,240,232,.1);
}
.noir-v2 .noir-dash-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(244,240,232,.15);
  color: var(--noir-paper);
  display: grid !important;
  place-items: center;
  font-family: var(--noir-serif);
  font-weight: 600;
  font-size: 24px;
  overflow: hidden;
  flex-shrink: 0;
}
.noir-v2 .noir-dash-avatar--sq { border-radius: 14px; }
.noir-v2 .noir-dash-avatar img { width: 100%; height: 100%; object-fit: cover; }
.noir-v2 .noir-dash-name { font-family: var(--noir-serif); font-size: 18px; font-weight: 500; line-height: 1.1; margin-top: 8px; }
.noir-v2 .noir-dash-nick { font-style: italic; font-size: 12px; color: rgba(244,240,232,.55); }
.noir-v2 .noir-dash-status-pill {
  font-family: var(--noir-sans);
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: .12em;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  font-weight: 600;
  margin-top: 6px;
}
.noir-v2 .noir-dash-status-pill--pending  { background: rgba(244,220,138,.18); color: var(--noir-butter); }
.noir-v2 .noir-dash-status-pill--active,
.noir-v2 .noir-dash-status-pill--approved { background: rgba(214,227,106,.18); color: var(--noir-lime); }
.noir-v2 .noir-dash-status-pill--suspended,
.noir-v2 .noir-dash-status-pill--rejected { background: rgba(250,100,100,.18); color: #fa6464; }

.noir-v2 .noir-dash-nav {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;    /* nav section scrolls independently */
  min-height: 0;       /* crucial — lets flex child shrink below content size */
  scrollbar-width: thin;
  scrollbar-color: rgba(244,240,232,.15) transparent;
  padding-right: 2px;
}
.noir-v2 .noir-dash-nav::-webkit-scrollbar { width: 4px; }
.noir-v2 .noir-dash-nav::-webkit-scrollbar-track { background: transparent; }
.noir-v2 .noir-dash-nav::-webkit-scrollbar-thumb { background: rgba(244,240,232,.18); border-radius: 4px; }
.noir-v2 .noir-dash-nav-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(244,240,232,.6);
  cursor: pointer;
  transition: all var(--dur-fast);
  text-align: left;
  width: 100% !important;
  position: relative;
  background: transparent !important;
  border: 0;
  overflow: visible;
}
.noir-v2 .noir-dash-nav-item svg { flex-shrink: 0; opacity: .65; transition: opacity var(--dur-fast), color var(--dur-fast); }
.noir-v2 .noir-dash-nav-item:hover   { background: rgba(244,240,232,.06) !important; color: var(--noir-paper); }
.noir-v2 .noir-dash-nav-item:hover svg { opacity: 1; }
.noir-v2 .noir-dash-nav-item.is-active { background: rgba(255,255,255,.08) !important; color: var(--noir-paper); }
.noir-v2 .noir-dash-nav-item.is-active svg { opacity: 1; color: var(--noir-orange); }
.noir-v2 .noir-dash-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 8px; bottom: 8px;
  width: 3px;
  background: var(--noir-orange);
  border-radius: 0 3px 3px 0;
}
.noir-v2 .noir-dash-nav-item .count {
  margin-left: auto;
  background: var(--noir-orange);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  letter-spacing: .05em;
  flex-shrink: 0;
}

.noir-v2 .noir-dash-foot {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;            /* never compressed by nav growing */
  border-top: 1px solid rgba(244,240,232,.1);
  padding-top: 18px;
}
.noir-v2 .noir-dash-foot a {
  font-family: var(--noir-sans);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(244,240,232,.55);
  display: flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color var(--dur-fast);
}
.noir-v2 .noir-dash-foot a:hover { color: var(--noir-orange); }

/* Admin dashboard rail footer (same visual as .noir-dash-foot) */
.noir-v2 .noir-dash-rail-foot {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  border-top: 1px solid rgba(244,240,232,.1);
  padding-top: 18px;
}
.noir-v2 .noir-dash-rail-foot a {
  font-family: var(--noir-sans);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(244,240,232,.55);
  display: flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color var(--dur-fast);
}
.noir-v2 .noir-dash-rail-foot a:hover { color: var(--noir-orange); }

/* Switch-to button — override the foot's link colour rules (higher specificity needed) */
.noir-v2 .noir-dash-foot .noir-dash-switch-btn--admin,
.noir-v2 .noir-dash-foot .noir-dash-switch-btn--member,
.noir-v2 .noir-dash-rail-foot .noir-dash-switch-btn--admin,
.noir-v2 .noir-dash-rail-foot .noir-dash-switch-btn--member {
  background: var(--noir-orange) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(203,54,15,.40) !important;
  text-transform: none;
  letter-spacing: .03em;
  font-weight: 700;
  font-size: var(--t-sm);
  margin-bottom: 2px;
}
.noir-v2 .noir-dash-foot .noir-dash-switch-btn--admin:hover,
.noir-v2 .noir-dash-foot .noir-dash-switch-btn--member:hover,
.noir-v2 .noir-dash-rail-foot .noir-dash-switch-btn--admin:hover,
.noir-v2 .noir-dash-rail-foot .noir-dash-switch-btn--member:hover {
  background: #b83c0d !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(203,54,15,.55) !important;
}

/* Main content area */
.noir-v2 .noir-dash-main {
  padding: 36px 44px 80px !important;
  max-width: 1100px;
  width: 100% !important;
  min-width: 0;
  height: 100vh !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  background: var(--noir-paper) !important;
}
@media (max-width: 768px) {
  .noir-v2 .noir-dash-main {
    /* Fixed height on mobile — clip at viewport, no whole-page scroll */
    height: 100dvh !important;
    min-height: unset !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Padding ensures last content row clears the fixed tab bar */
    padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 100px) !important;
  }
}

/* Sections */
.noir-v2 .noir-section { display: block !important; }
.noir-v2 .noir-section-hidden { display: none !important; }
.noir-v2 .noir-dash-main h3 {
  font-family: var(--noir-serif) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  letter-spacing: -.015em !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid var(--noir-orange) !important;
}
.noir-v2 .noir-section-head {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--noir-orange);
}
.noir-v2 .noir-section-head h2 {
  font-family: var(--noir-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.015em;
}
.noir-v2 .noir-section-head h2 em { font-style: normal; color: var(--noir-orange); font-weight: 600; }
.noir-v2 .noir-section-label {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--noir-muted);
  margin-bottom: 14px;
  font-weight: 500;
  display: block;
}

/* Mobile bar */
.noir-v2 .noir-dash-mobilebar {
  display: none !important;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--noir-ink) !important;
  color: var(--noir-paper);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(244,240,232,.08);
}
.noir-v2 .noir-dash-mobilebar .brand { font-family: var(--noir-serif); font-size: 22px; font-weight: 600; }
.noir-v2 .noir-dash-burger {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(244,240,232,.1) !important;
  display: grid !important;
  place-items: center;
  cursor: pointer;
  border: 0;
  position: relative;
}
.noir-v2 .noir-dash-burger span,
.noir-v2 .noir-dash-burger span::before,
.noir-v2 .noir-dash-burger span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--noir-paper);
  position: absolute;
  transition: all var(--dur-med);
  border-radius: 2px;
}
.noir-v2 .noir-dash-burger span::before { content: ""; top: -5px; }
.noir-v2 .noir-dash-burger span::after  { content: ""; top: 5px; }
.noir-v2 .noir-dash-backdrop {
  display: block !important;
  position: fixed;
  inset: 0;
  background: rgba(15,15,15,.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.noir-v2 .noir-dash-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ──────── 11. DASHBOARD SECTIONS ──────── */

/* KPI strip */
.noir-v2 .noir-kpi-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.noir-v2 .noir-kpi {
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
.noir-v2 .noir-kpi-val {
  font-family: var(--noir-serif);
  font-size: 40px;
  font-weight: 600;
  color: var(--noir-orange);
  line-height: 1;
  letter-spacing: -.02em;
}
.noir-v2 .noir-kpi-label {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  font-weight: 500;
}

/* Impact strip (dashboard overview panel) */
.noir-v2 .noir-impact-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: var(--s-5);
  background: var(--noir-ink) !important;
  color: var(--noir-paper);
  border-radius: 18px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.noir-v2 .noir-impact-strip::after {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--noir-orange) 0%, transparent 70%);
  right: -80px; top: -100px;
  opacity: .35;
  filter: blur(20px);
  pointer-events: none;
}
.noir-v2 .noir-impact-strip__head {
  grid-column: 1 / -1;
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.noir-v2 .noir-impact-strip__head h4 { font-family: var(--noir-serif); font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.noir-v2 .noir-impact-strip__head h4 em { font-style: normal; color: var(--noir-orange); font-weight: 600; }
.noir-v2 .noir-impact-strip__head .meta { text-transform: uppercase; font-size: 10.5px; letter-spacing: .1em; color: rgba(244,240,232,.55); }
.noir-v2 .noir-impact-stat {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  position: relative;
  z-index: 1;
}
.noir-v2 .noir-impact-stat--lead { background: var(--noir-orange); }
.noir-v2 .noir-impact-stat .lbl {
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: rgba(244,240,232,.6);
  font-weight: 500;
}
.noir-v2 .noir-impact-stat--lead .lbl { color: rgba(255,255,255,.75); }
.noir-v2 .noir-impact-stat .num {
  font-family: var(--noir-serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--noir-paper);
}
.noir-v2 .noir-impact-stat--lead .num { color: #fff; }

/* Impact card (dark, overview) */
.noir-v2 .noir-impact-card {
  background: var(--noir-ink) !important;
  color: var(--noir-paper);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: var(--s-5);
  position: relative;
  overflow: hidden;
}
.noir-v2 .noir-impact-card::after {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--noir-orange) 0%, transparent 70%);
  right: -80px; top: -100px;
  opacity: .4;
  filter: blur(20px);
  pointer-events: none;
}
.noir-v2 .noir-impact-card-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  position: relative;
  flex-wrap: wrap;
}
.noir-v2 .noir-impact-card-head h4 { font-family: var(--noir-serif); font-size: 24px; font-weight: 500; letter-spacing: -.015em; }
.noir-v2 .noir-impact-card-head h4 em { font-style: normal; color: var(--noir-orange); font-weight: 600; }
.noir-v2 .noir-impact-card-head .sub { text-transform: uppercase; font-size: 10.5px; letter-spacing: .12em; color: rgba(244,240,232,.55); margin-top: 4px; }
.noir-v2 .noir-impact-grid {
  display: grid !important;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 14px;
  position: relative;
}
.noir-v2 .noir-impact-stat--featured { background: var(--noir-orange) !important; color: #fff; }
.noir-v2 .noir-impact-stat--featured .lbl { color: rgba(255,255,255,.75) !important; }
.noir-v2 .noir-impact-stat--featured .num { color: #fff !important; }
.noir-v2 .noir-impact-stat .pct { font-size: 11px; color: rgba(244,240,232,.65); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.noir-v2 .noir-impact-stat--featured .pct { color: rgba(255,255,255,.85); }
.noir-v2 .noir-impact-stat .num .of { font-size: 14px; color: rgba(244,240,232,.55); font-weight: 400; letter-spacing: .05em; margin-left: 4px; }
.noir-v2 .noir-impact-stat--featured .num .of { color: rgba(255,255,255,.65); }
.noir-v2 .noir-impact-stat .bar { margin-top: 4px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.noir-v2 .noir-impact-stat .bar .fill { height: 100%; background: var(--noir-lime); border-radius: 999px; }
.noir-v2 .noir-impact-stat--featured .bar { background: rgba(255,255,255,.25); }
.noir-v2 .noir-impact-stat--featured .bar .fill { background: #fff; }
.noir-v2 .noir-impact-card-foot { font-size: 12px; color: rgba(244,240,232,.55); margin-top: 14px; line-height: 1.5; position: relative; border-top: 1px solid rgba(244,240,232,.12); padding-top: 12px; }

/* SDG tags row inside impact card */
.noir-v2 .noir-impact-sdg-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; margin-bottom: 4px; }
.noir-v2 .noir-impact-sdg-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-sm); padding: 4px 10px 4px 4px; font-size: 11px; font-weight: 600; color: rgba(244,240,232,.85); cursor: default; transition: background var(--dur-fast) var(--ease); }
.noir-v2 .noir-impact-sdg-tag:hover { background: rgba(255,255,255,.15); }
.noir-v2 .noir-impact-sdg-tag .badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0; }

/* Overview blocks */
.noir-v2 .noir-overview-block {
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}
.noir-v2 .noir-overview-block--alert { border-left: 3px solid var(--noir-orange); }
.noir-v2 .noir-overview-block-title {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.noir-v2 .noir-overview-link {
  display: flex !important;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--noir-orange);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.noir-v2 .noir-overview-link:hover { color: var(--noir-ink); }

/* Data rows (engagement, invoice, assignment etc.) */
.noir-v2 .noir-eng-row,
.noir-v2 .noir-inv-row,
.noir-v2 .noir-pay-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--noir-hair);
  gap: 14px;
}
.noir-v2 .noir-eng-row:last-child,
.noir-v2 .noir-inv-row:last-child,
.noir-v2 .noir-pay-row:last-child { border-bottom: 0; }

/* Engagement / project card (list view) */
.noir-v2 .noir-eng-card {
  background: var(--noir-paper);
  border: 1px solid var(--noir-hair);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 10px;
  transition: all var(--dur-fast);
}
.noir-v2 .noir-eng-card:hover { border-color: var(--noir-ink); transform: translateY(-1px); }
.noir-v2 .noir-eng-card-header {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  border-bottom: 1px solid var(--noir-hair);
}
.noir-v2 .noir-eng-card-body { padding: var(--s-5); }

/* Invoice rows (admin + employer payments) */
.noir-v2 .noir-inv-card {
  background: var(--noir-paper-2);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--dur-fast);
  margin-bottom: 8px;
}
.noir-v2 .noir-inv-card:hover { border-color: var(--noir-ink); background: var(--noir-paper); }
.noir-v2 .noir-inv-card.is-open { border-color: var(--noir-orange); background: var(--noir-paper); box-shadow: 0 0 0 1px var(--noir-orange); }

/* Notification list */
.noir-v2 .noir-notif-list {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--noir-hair);
  border-radius: 14px;
  overflow: hidden;
}
.noir-v2 .noir-notif-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--noir-hair);
  background: var(--noir-paper);
  transition: background var(--dur-fast);
}
.noir-v2 .noir-notif-row:last-child { border-bottom: 0; }
.noir-v2 .noir-notif-row:hover { background: var(--noir-paper-2); }
.noir-v2 .noir-notif-row .nm { font-family: var(--noir-serif); font-size: 15px; font-weight: 500; letter-spacing: -.005em; }
.noir-v2 .noir-notif-row .desc { font-size: 12.5px; color: var(--noir-muted); margin-top: 3px; }
.noir-v2 .noir-notif-row .ch { display: flex !important; flex-direction: column; align-items: center; gap: 3px; }
.noir-v2 .noir-notif-row .ch .lbl { text-transform: uppercase; font-size: 9px; letter-spacing: .1em; color: var(--noir-muted); }

/* Toggle switch */
.noir-v2 .noir-toggle {
  position: relative;
  width: 38px; height: 22px;
  border-radius: var(--r-pill);
  background: var(--noir-paper-2);
  border: 1px solid var(--noir-hair);
  cursor: pointer;
  transition: all var(--dur-med);
  flex-shrink: 0;
  display: block !important;
}
.noir-v2 .noir-toggle::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 2px; left: 2px;
  transition: all var(--dur-med);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.noir-v2 .noir-toggle.is-on { background: var(--noir-orange); border-color: var(--noir-orange); }
.noir-v2 .noir-toggle.is-on::after { left: 18px; }

/* Profile completion */
.noir-v2 .noir-completion-bar {
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
}
.noir-v2 .noir-completion-header { display: flex !important; justify-content: space-between; align-items: center; margin-bottom: var(--s-3); }
.noir-v2 .noir-completion-title { font-family: var(--noir-serif); font-size: 18px; font-weight: 500; }
.noir-v2 .noir-completion-pct { font-family: var(--noir-serif); font-size: 28px; font-weight: 600; color: var(--noir-orange); }
.noir-v2 .noir-completion-track { height: 6px; background: var(--noir-hair); border-radius: var(--r-pill); overflow: hidden; margin-bottom: var(--s-4); }
.noir-v2 .noir-completion-fill { height: 100%; background: var(--noir-orange); border-radius: var(--r-pill); transition: width var(--dur-slow); }
.noir-v2 .noir-completion-items { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.noir-v2 .noir-completion-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.noir-v2 .noir-completion-item:hover { background: var(--noir-paper); }
.noir-v2 .noir-completion-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--noir-hair); }
.noir-v2 .noir-completion-item.done .dot { background: var(--noir-orange); }
.noir-v2 .noir-completion-item.done span { color: var(--noir-muted); text-decoration: line-through; }

/* Empty states */
.noir-v2 .noir-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  color: var(--noir-muted);
}
.noir-v2 .noir-empty .ico { font-size: 36px; margin-bottom: 12px; display: block; }
.noir-v2 .noir-empty h3 { font-family: var(--noir-serif); font-size: 22px; font-weight: 500; color: var(--noir-ink); margin-bottom: 6px; }
.noir-v2 .noir-empty p { font-size: 14px; max-width: 340px; margin: 0 auto 18px; }

/* Section tab bar (inside sections) */
.noir-v2 .noir-tab-bar {
  display: flex !important;
  gap: 4px;
  border-bottom: 1px solid var(--noir-hair);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.noir-v2 .noir-tab {
  padding: 12px 18px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--dur-fast);
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: transparent;
  font-weight: 500;
}
.noir-v2 .noir-tab:hover { color: var(--noir-ink); }
.noir-v2 .noir-tab.is-active { color: var(--noir-ink); border-bottom-color: var(--noir-orange); }
.noir-v2 .noir-tab .c {
  background: var(--noir-paper-2);
  color: var(--noir-ink-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
}
.noir-v2 .noir-tab.is-active .c { background: var(--noir-orange); color: #fff; }

/* Data table */
.noir-v2 .noir-table { width: 100%; border-collapse: collapse; }
.noir-v2 .noir-table thead th {
  text-align: left;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--noir-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--noir-hair);
  font-weight: 500;
  font-family: var(--noir-sans);
}
.noir-v2 .noir-table tbody td { padding: 14px; border-bottom: 1px solid var(--noir-hair); font-size: 14px; vertical-align: middle; }
.noir-v2 .noir-table tbody tr { transition: background var(--dur-fast); }
.noir-v2 .noir-table tbody tr:hover { background: var(--noir-paper-2); }

/* ──────── 11b. DASHBOARD COMPONENT CLASSES ──────── */

/* ── Profile completion card (template aliases) ── */
.noir-v2 .noir-completion-card {
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
}
.noir-v2 .noir-completion-label { font-family: var(--noir-serif); font-size: 18px; font-weight: 500; }
.noir-v2 .noir-completion-card .noir-completion-bar {
  height: 6px !important;
  background: var(--noir-hair) !important;
  border-radius: var(--r-pill) !important;
  overflow: hidden;
  margin-bottom: var(--s-4);
  padding: 0 !important;
}
.noir-v2 .noir-completion-missing { display: flex !important; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

/* ── Section subheading ── */
.noir-v2 .noir-section-subhead {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  font-weight: 600;
  padding: var(--s-4) 0 var(--s-3);
  border-bottom: 1px solid var(--noir-hair);
  margin-bottom: var(--s-4);
}

/* ── Lead badge ── */
.noir-v2 .noir-lead-badge {
  display: inline-flex !important;
  align-items: center;
  background: var(--noir-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
}

/* ── Misc utility ── */
.noir-v2 .noir-muted-sm { font-size: 12px; color: var(--noir-muted); }
.noir-v2 .noir-label-hint { font-size: 11px; color: var(--noir-muted); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.noir-v2 .noir-field-hint { font-size: 11.5px; color: var(--noir-muted); margin-top: 5px; }
.noir-v2 .dot-on { display: inline-block !important; width: 6px; height: 6px; border-radius: 50%; background: var(--noir-orange); vertical-align: middle; margin-left: 4px; }
.noir-v2 .noir-day-pill.selected { background: var(--noir-orange) !important; color: #fff !important; border-color: var(--noir-orange) !important; }
.noir-v2 .noir-exp-grid { grid-template-columns: repeat(3, 1fr) !important; }
.noir-v2 .noir-view-all-link {
  display: inline-block !important;
  margin-top: var(--s-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--noir-orange);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.noir-v2 .noir-view-all-link:hover { color: var(--noir-ink); }

/* ── Application rows ── */
.noir-v2 .noir-apps-list { display: flex !important; flex-direction: column; gap: 2px; }
.noir-v2 .noir-app-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4);
  background: var(--noir-paper-2);
  border-radius: var(--r-sm);
  gap: 14px;
  transition: background var(--dur-fast);
}
.noir-v2 .noir-app-row:hover { background: var(--noir-paper); }
.noir-v2 .noir-app-info { display: flex !important; flex-direction: column; gap: 3px; min-width: 0; }
.noir-v2 .noir-app-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.noir-v2 .noir-app-company { font-size: 12px; color: var(--noir-muted); }
.noir-v2 .noir-app-right { display: flex !important; align-items: center; gap: 10px; flex-shrink: 0; }
.noir-v2 .noir-app-date { font-size: 11.5px; color: var(--noir-muted); white-space: nowrap; }

/* ── Assignment components ── */
.noir-v2 .noir-assignment-group { margin-bottom: var(--s-5); }
.noir-v2 .noir-assignment-group-label {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.noir-v2 .noir-assignment-card {
  background: var(--noir-paper-2);
  border: 1px solid var(--noir-hair);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: 8px;
  transition: border-color var(--dur-fast);
}
.noir-v2 .noir-assignment-card:hover { border-color: var(--noir-ink); }
.noir-v2 .noir-assignment-offer { border-left: 3px solid var(--noir-orange) !important; }
.noir-v2 .noir-assignment-top {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}
.noir-v2 .noir-assignment-meta { display: flex !important; flex-direction: column; gap: 3px; }
.noir-v2 .noir-assignment-title { font-weight: 600; font-size: 15px; }
.noir-v2 .noir-assignment-company { font-size: 13px; color: var(--noir-muted); }
.noir-v2 .noir-assignment-date { font-size: 12px; color: var(--noir-muted); }
.noir-v2 .noir-assignment-payout { font-size: 13px; font-weight: 600; color: var(--noir-orange); }
.noir-v2 .noir-assignment-expiry { font-size: 11.5px; color: var(--noir-muted); font-style: italic; margin-bottom: var(--s-3); }
.noir-v2 .noir-assignment-details { display: flex !important; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--noir-ink-2); margin-bottom: var(--s-3); }
.noir-v2 .noir-assignment-actions { display: flex !important; gap: 10px; flex-wrap: wrap; }

/* ── Brief toggle (details/summary) ── */
.noir-v2 .noir-brief-toggle { margin-top: var(--s-3); border-top: 1px solid var(--noir-hair); padding-top: var(--s-3); }
.noir-v2 .noir-brief-toggle summary { font-size: 12px; font-weight: 600; color: var(--noir-orange); cursor: pointer; text-transform: uppercase; letter-spacing: .06em; }
.noir-v2 .noir-brief-toggle summary:hover { color: var(--noir-ink); }
.noir-v2 .noir-brief-body { font-size: 13.5px; line-height: 1.65; color: var(--noir-ink-2); margin-top: var(--s-3); white-space: pre-wrap; }

/* ── CV section ── */
.noir-v2 .noir-cv-current {
  display: flex !important;
  align-items: center;
  gap: var(--s-4);
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
}
.noir-v2 .noir-cv-icon { font-size: 36px; flex-shrink: 0; }
.noir-v2 .noir-cv-label { text-transform: uppercase; font-size: 10.5px; letter-spacing: .1em; color: var(--noir-muted); font-weight: 600; margin-bottom: 4px; }
.noir-v2 .noir-cv-link { font-size: 13px; font-weight: 600; color: var(--noir-orange); }
.noir-v2 .noir-cv-link:hover { color: var(--noir-ink); }
.noir-v2 .noir-cv-empty { text-align: center; padding: 2.5rem; background: var(--noir-paper-2); border-radius: var(--r-md); color: var(--noir-muted); margin-bottom: var(--s-5); }

/* ── Project box ── */
.noir-v2 .noir-project-box {
  background: var(--noir-paper-2);
  border: 1px solid var(--noir-hair);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}
.noir-v2 .noir-project-num {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  font-weight: 600;
  margin-bottom: var(--s-4);
}

/* ── Reviews (member dashboard) ── */
.noir-v2 .noir-rating-summary {
  display: flex !important;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
  padding: var(--s-5);
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
}
.noir-v2 .noir-rating-big { font-family: var(--noir-serif); font-size: 56px; font-weight: 600; color: var(--noir-orange); line-height: 1; }
.noir-v2 .noir-stars-row { display: flex !important; gap: 2px; font-size: 18px; margin-bottom: 4px; }
.noir-v2 .noir-star-on  { color: var(--noir-orange); }
.noir-v2 .noir-star-off { color: var(--noir-hair); }
.noir-v2 .noir-review-card {
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: 8px;
}
.noir-v2 .noir-review-top { display: flex !important; justify-content: space-between; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-3); }
.noir-v2 .noir-review-author { font-weight: 600; font-size: 13.5px; }
.noir-v2 .noir-review-text { font-size: 14px; line-height: 1.65; color: var(--noir-ink-2); }

/* ── Settings blocks ── */
.noir-v2 .noir-settings-block {
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.noir-v2 .noir-settings-block-title {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--noir-muted);
  margin-bottom: var(--s-4);
}

/* ── Notification preferences table ── */
.noir-v2 .noir-notify-table {
  border: 1px solid var(--noir-hair);
  border-radius: var(--r-md);
  overflow: hidden;
}
.noir-v2 .noir-notify-header {
  display: grid !important;
  grid-template-columns: 1fr 60px 60px;
  gap: var(--s-3);
  padding: 10px 16px;
  background: var(--noir-paper-2);
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--noir-hair);
}
.noir-v2 .noir-notify-row {
  display: grid !important;
  grid-template-columns: 1fr 60px 60px;
  gap: var(--s-3);
  padding: 12px 16px;
  align-items: center;
  border-bottom: 1px solid var(--noir-hair);
  font-size: 13px;
  transition: background var(--dur-fast);
}
.noir-v2 .noir-notify-row:last-child { border-bottom: 0; }
.noir-v2 .noir-notify-row:hover { background: var(--noir-paper-2); }
.noir-v2 .noir-notify-header span:not(:first-child),
.noir-v2 .noir-notify-row span:not(:first-child) { text-align: center; }

/* ── Hire-for-impact switcher (employer) ── */
.noir-v2 .noir-hire-type-wrap { max-width: 480px; margin-bottom: var(--s-5); }
.noir-v2 .noir-hire-badge {
  display: inline-flex !important;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--noir-line);
  color: var(--noir-muted);
  white-space: nowrap;
  align-self: center;
}
.noir-v2 .noir-hire-panel { animation: fadeIn var(--dur-med); }
.noir-v2 .noir-hire-infobox {
  display: flex !important;
  align-items: flex-start;
  gap: var(--s-3);
  background: rgba(209,78,44,.06);
  border: 1px solid var(--noir-orange);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
}
.noir-v2 .noir-hire-infobox-ico {
  color: var(--noir-orange);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.noir-v2 .noir-hire-infobox strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--noir-orange);
  display: block;
  margin-bottom: 5px;
}
.noir-v2 .noir-hire-infobox p { font-size: 13px; color: var(--noir-ink-2); line-height: 1.6; margin: 0; }
.noir-v2 .noir-hire-step-header {
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--noir-muted);
  margin: 28px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--noir-hair);
}
.noir-v2 .noir-hire-step-header:first-child { margin-top: 0; }
.noir-v2 .noir-hire-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--noir-ink);
  color: var(--noir-paper);
  display: grid !important;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--noir-serif);
  flex-shrink: 0;
}
.noir-v2 .noir-form-hint { font-size: 12px; color: var(--noir-muted); margin-top: var(--s-3); }
.noir-v2 .noir-allowance-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

/* ── Engagement card details ── */
.noir-v2 .noir-eng-card-title { font-weight: 600; font-size: 15px; }
.noir-v2 .noir-eng-card-ref { font-size: 12px; color: var(--noir-muted); margin-top: 2px; font-family: var(--noir-sans); }
.noir-v2 .noir-eng-card-meta { display: flex !important; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--noir-ink-2); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--noir-hair); }
.noir-v2 .noir-eng-drawer { border-top: 1px solid var(--noir-hair); }
.noir-v2 .noir-eng-drawer > summary {
  padding: var(--s-3) var(--s-5);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--noir-orange);
  cursor: pointer;
  user-select: none;
}
.noir-v2 .noir-eng-drawer > summary:hover { color: var(--noir-ink); }
.noir-v2 .noir-eng-tabs { padding: 0 var(--s-5) var(--s-5); display: flex !important; flex-direction: column; gap: var(--s-4); }
.noir-v2 .noir-eng-tab-section { }
.noir-v2 .noir-eng-tab-label {
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  font-weight: 600;
  margin-bottom: var(--s-3);
}

/* ── Engagement / invoice row sub-elements ── */
.noir-v2 .noir-eng-title { font-weight: 600; font-size: 14px; }
.noir-v2 .noir-eng-ref { font-size: 12px; color: var(--noir-muted); font-family: var(--noir-sans); }
.noir-v2 .noir-eng-status { font-size: 12px; font-weight: 600; color: var(--noir-orange); }
.noir-v2 .noir-inv-number { font-family: var(--noir-sans); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; }
.noir-v2 .noir-inv-meta { font-size: 12px; color: var(--noir-muted); margin-top: 2px; }
.noir-v2 .noir-inv-total { font-family: var(--noir-serif); font-size: 16px; font-weight: 700; }

/* ── Invoice card internals ── */
.noir-v2 .noir-inv-card-header {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  gap: var(--s-4);
}
.noir-v2 .noir-inv-card-number { font-family: var(--noir-sans); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.noir-v2 .noir-inv-card-project { font-size: 12px; color: var(--noir-muted); margin-top: 2px; }
.noir-v2 .noir-inv-card-total { font-family: var(--noir-serif); font-size: 20px; font-weight: 700; }
.noir-v2 .noir-inv-details { border-top: 1px solid var(--noir-hair); }
.noir-v2 .noir-inv-details > summary {
  padding: var(--s-3) var(--s-5);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--noir-orange);
  cursor: pointer;
}
.noir-v2 .noir-inv-details > summary:hover { color: var(--noir-ink); }
.noir-v2 .noir-inv-items { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--noir-hair); }
.noir-v2 .noir-inv-items-head {
  display: grid !important;
  grid-template-columns: 1fr 60px 90px 90px;
  gap: var(--s-3);
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: .1em;
  color: var(--noir-muted);
  font-weight: 600;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--noir-hair);
  margin-bottom: var(--s-2);
}
.noir-v2 .noir-inv-item-row {
  display: grid !important;
  grid-template-columns: 1fr 60px 90px 90px;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: 13px;
  border-bottom: 1px solid var(--noir-hair);
}
.noir-v2 .noir-inv-item-row:last-of-type { border-bottom: 0; }
/* .noir-inv-totals and .noir-inv-actions for the new inline panel are defined below (line ~5360) */

/* ── Crew list ── */
.noir-v2 .noir-crew-list { display: flex !important; flex-direction: column; gap: 6px; }
.noir-v2 .noir-crew-row {
  display: flex !important;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--noir-paper-2);
  border-radius: var(--r-sm);
}
.noir-v2 .noir-crew-name { font-weight: 600; font-size: 13.5px; display: flex !important; align-items: center; gap: 6px; }
.noir-v2 .noir-crew-skills { font-size: 12px; color: var(--noir-muted); margin-top: 2px; }

/* ── Asset list ── */
.noir-v2 .noir-asset-list { display: flex !important; flex-direction: column; gap: 4px; }
.noir-v2 .noir-asset-row {
  display: flex !important;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--noir-paper-2);
  border-radius: var(--r-sm);
  text-decoration: none !important;
  color: var(--noir-ink) !important;
  transition: background var(--dur-fast);
}
.noir-v2 .noir-asset-row:hover { background: var(--noir-paper); }
.noir-v2 .noir-asset-icon { flex-shrink: 0; }
.noir-v2 .noir-asset-name { flex: 1; font-size: 13px; font-weight: 500; }
.noir-v2 .noir-asset-size { font-size: 11px; color: var(--noir-muted); white-space: nowrap; }

/* ── Booking row ── */
.noir-v2 .noir-booking-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4) var(--s-5);
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  margin-bottom: 6px;
  gap: var(--s-4);
  transition: background var(--dur-fast);
}
.noir-v2 .noir-booking-row:hover { background: var(--noir-paper); }
.noir-v2 .noir-booking-title { font-weight: 600; font-size: 14px; }
.noir-v2 .noir-booking-meta { font-size: 12px; color: var(--noir-muted); margin-top: 2px; }
.noir-v2 .noir-booking-inv { font-size: 12px; color: var(--noir-orange); font-weight: 500; }

/* ── Receipt row ── */
.noir-v2 .noir-receipt-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4);
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  margin-bottom: 6px;
  gap: var(--s-4);
}
.noir-v2 .noir-receipt-number { font-family: var(--noir-sans); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.noir-v2 .noir-receipt-meta { font-size: 12px; color: var(--noir-muted); margin-top: 2px; }

/* ── Listing row ── */
.noir-v2 .noir-listing-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4);
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  margin-bottom: 6px;
  gap: var(--s-4);
  transition: background var(--dur-fast);
}
.noir-v2 .noir-listing-row:hover { background: var(--noir-paper); }
.noir-v2 .noir-listing-main { display: flex !important; flex-direction: column; gap: 3px; min-width: 0; }
.noir-v2 .noir-listing-title { font-weight: 600; font-size: 14.5px; }
.noir-v2 .noir-listing-meta { font-size: 12px; color: var(--noir-muted); }
.noir-v2 .noir-listing-side { display: flex !important; align-items: center; gap: var(--s-3); flex-shrink: 0; }

/* ──────── 12. TOAST PRIMITIVES ──────── */
.noir-v2-toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}
.noir-v2-toast {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--noir-ink);
  color: var(--noir-paper);
  box-shadow: var(--shadow-md);
  pointer-events: all;
  transition: opacity var(--dur-fast);
}
.noir-v2-toast__ico { width: 20px; height: 20px; border-radius: 50%; display: grid !important; place-items: center; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.noir-v2-toast--success .noir-v2-toast__ico { background: var(--st-success-bg); color: var(--st-success-fg); }
.noir-v2-toast--error   .noir-v2-toast__ico { background: var(--st-danger-bg); color: var(--st-danger-fg); }
.noir-v2-toast--warn    .noir-v2-toast__ico { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.noir-v2-toast--info    .noir-v2-toast__ico { background: var(--st-info-bg); color: var(--st-info-fg); }
.noir-v2-toast__title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.noir-v2-toast__msg   { font-size: 13px; color: rgba(244,240,232,.75); }
.noir-v2-toast__close { color: rgba(244,240,232,.5); font-size: 14px; cursor: pointer; padding: 0; line-height: 1; background: none; border: 0; }
.noir-v2-toast__close:hover { color: var(--noir-paper); }

.noir-v2-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,15,15,.6);
  z-index: 9998;
  display: grid !important;
  place-items: center;
  padding: 24px;
}
.noir-v2-dialog {
  background: var(--noir-paper);
  border-radius: var(--r-lg);
  padding: 36px;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.noir-v2-dialog__head { display: flex !important; align-items: center; gap: 12px; margin-bottom: 14px; }
.noir-v2-dialog__ico { width: 36px; height: 36px; border-radius: 50%; background: var(--st-warn-bg); color: var(--st-warn-fg); display: grid !important; place-items: center; font-weight: 700; }
.noir-v2-dialog--danger .noir-v2-dialog__ico { background: var(--st-danger-bg); color: var(--st-danger-fg); }
.noir-v2-dialog__title { font-family: var(--noir-serif); font-size: 24px; font-weight: 500; margin-bottom: 10px; letter-spacing: -.01em; }
.noir-v2-dialog__body  { font-size: 14px; color: var(--noir-ink-2); line-height: 1.55; margin-bottom: 24px; }
.noir-v2-dialog__actions { display: flex !important; gap: 10px; justify-content: flex-end; }

/* ──────── 13. DASHBOARD PAGE THEME OVERRIDE ──────── */
/* Hide WP theme header + footer on dashboard pages so the app fills the viewport */
body.page-noir-member-dashboard header,
body.page-noir-member-dashboard .site-header,
body.page-noir-member-dashboard #masthead,
body.page-noir-member-dashboard .et_header_style_left,
body.page-noir-member-dashboard .et_header_style_centered,
body.page-noir-member-dashboard .et_fixed_nav,
body.page-noir-member-dashboard .main-nav,
body.page-noir-member-dashboard .main-navigation,
body.page-noir-employer-dashboard header,
body.page-noir-employer-dashboard .site-header,
body.page-noir-employer-dashboard #masthead,
body.page-noir-employer-dashboard .et_header_style_left,
body.page-noir-employer-dashboard .et_header_style_centered,
body.page-noir-employer-dashboard .et_fixed_nav,
body.page-noir-employer-dashboard .main-nav,
body.page-noir-employer-dashboard .main-navigation { display: none !important; }

body.page-noir-member-dashboard footer,
body.page-noir-member-dashboard .site-footer,
body.page-noir-member-dashboard #colophon,
body.page-noir-member-dashboard .et_pb_footer_columns_wrapper,
body.page-noir-member-dashboard .footer-widget,
body.page-noir-employer-dashboard footer,
body.page-noir-employer-dashboard .site-footer,
body.page-noir-employer-dashboard #colophon,
body.page-noir-employer-dashboard .et_pb_footer_columns_wrapper,
body.page-noir-employer-dashboard .footer-widget { display: none !important; }

/* Remove body/page top padding that themes add for fixed headers */
body.page-noir-member-dashboard,
body.page-noir-employer-dashboard {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.page-noir-member-dashboard .site-content,
body.page-noir-member-dashboard #content,
body.page-noir-member-dashboard .entry-content,
body.page-noir-employer-dashboard .site-content,
body.page-noir-employer-dashboard #content,
body.page-noir-employer-dashboard .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Dashboard full-screen overrides ─────────────────────────────────────────
   Suppress all theme chrome on dashboard pages so the plugin fills the
   full viewport — no header, no footer, no injected padding/margin. */

/* 1. Kill body padding-top that themes add for their fixed/sticky header. */
body.page-noir-member-dashboard,
body.page-noir-employer-dashboard,
body.page-noir-trainee-dashboard {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 2. Generic WP theme headers — covers OceanWP, Astra, GeneratePress, Hello,
      Elementor Canvas, Divi, Kadence, Storefront, Neve, and most others.
      The <header> rule catches anything we missed. */
body.page-noir-member-dashboard header,
body.page-noir-member-dashboard .site-header,
body.page-noir-member-dashboard #masthead,
body.page-noir-member-dashboard #site-navigation,
body.page-noir-member-dashboard .elementor-location-header,
body.page-noir-member-dashboard .header-bar,
body.page-noir-member-dashboard .main-navigation,
body.page-noir-member-dashboard .et_header_style_centered,
body.page-noir-member-dashboard .page-title-section,
body.page-noir-member-dashboard .breadcrumbs,
body.page-noir-member-dashboard footer.site-footer,
body.page-noir-member-dashboard .site-footer,
body.page-noir-employer-dashboard header,
body.page-noir-employer-dashboard .site-header,
body.page-noir-employer-dashboard #masthead,
body.page-noir-employer-dashboard #site-navigation,
body.page-noir-employer-dashboard .elementor-location-header,
body.page-noir-employer-dashboard .header-bar,
body.page-noir-employer-dashboard .main-navigation,
body.page-noir-employer-dashboard .et_header_style_centered,
body.page-noir-employer-dashboard .page-title-section,
body.page-noir-employer-dashboard .breadcrumbs,
body.page-noir-employer-dashboard footer.site-footer,
body.page-noir-employer-dashboard .site-footer,
body.page-noir-trainee-dashboard header,
body.page-noir-trainee-dashboard .site-header,
body.page-noir-trainee-dashboard #masthead,
body.page-noir-trainee-dashboard #site-navigation,
body.page-noir-trainee-dashboard .elementor-location-header,
body.page-noir-trainee-dashboard .header-bar,
body.page-noir-trainee-dashboard .main-navigation,
body.page-noir-trainee-dashboard .et_header_style_centered,
body.page-noir-trainee-dashboard .page-title-section,
body.page-noir-trainee-dashboard .breadcrumbs,
body.page-noir-trainee-dashboard footer.site-footer,
body.page-noir-trainee-dashboard .site-footer {
  display: none !important;
}

/* 3. Remove theme-injected padding/margin on every content wrapper. */
body.page-noir-member-dashboard .site-content,
body.page-noir-member-dashboard .site-main,
body.page-noir-member-dashboard main,
body.page-noir-member-dashboard .entry-content,
body.page-noir-member-dashboard .page-content,
body.page-noir-member-dashboard article,
body.page-noir-member-dashboard .hfeed,
body.page-noir-employer-dashboard .site-content,
body.page-noir-employer-dashboard .site-main,
body.page-noir-employer-dashboard main,
body.page-noir-employer-dashboard .entry-content,
body.page-noir-employer-dashboard .page-content,
body.page-noir-employer-dashboard article,
body.page-noir-employer-dashboard .hfeed,
body.page-noir-trainee-dashboard .site-content,
body.page-noir-trainee-dashboard .site-main,
body.page-noir-trainee-dashboard main,
body.page-noir-trainee-dashboard .entry-content,
body.page-noir-trainee-dashboard .page-content,
body.page-noir-trainee-dashboard article,
body.page-noir-trainee-dashboard .hfeed {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* 4. iOS Safari: overflow-x/y:hidden on body/html creates a stacking context that
   clips position:fixed children — they stop being viewport-fixed and become relative
   to the overflow container instead. Many themes (including Stotage) add overflow-x:hidden
   to body for mobile horizontal scroll prevention. We must override this on dashboard pages
   so our .is-convo shell (a direct child of body via the portal pattern) stays viewport-fixed.
   Using overflow-x:clip instead of visible on the x-axis — clip blocks overflow WITHOUT
   creating a scroll container (no iOS fixed breakage), but has limited iOS support, so
   we pair it with visible as a safe fallback order that degrades correctly. */
body.page-noir-member-dashboard,
body.page-noir-employer-dashboard,
body.page-noir-trainee-dashboard {
  overflow-x: visible !important;
  overflow-y: visible !important;
}
html:has(body.page-noir-member-dashboard),
html:has(body.page-noir-employer-dashboard),
html:has(body.page-noir-trainee-dashboard) {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* 5. Shell fills full viewport now that header is gone. */
body.page-noir-member-dashboard .noir-v2,
body.page-noir-employer-dashboard .noir-v2 {
  min-height: 100vh !important;
}
body.page-noir-member-dashboard #noir-dash-shell,
body.page-noir-member-dashboard .noir-dash-shell,
body.page-noir-employer-dashboard #noir-dash-shell,
body.page-noir-employer-dashboard .noir-dash-shell {
  min-height: 100vh !important;
}
body.page-noir-member-dashboard .noir-dash-rail,
body.page-noir-employer-dashboard .noir-dash-rail {
  top: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

/* ──────── 14. DASHBOARD v2 COMPONENTS ──────── */
/* Matches design-previews/index.html §7 Creative Dashboard exactly.
   .noir-dash-main has background:var(--noir-paper) — ink tones for text.
   Only the featured KPI card is dark (ink bg) and uses paper/orange text. */

/* ── Topbar ── */
.noir-v2 .noir-dash-topbar {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--noir-hair);
}
.noir-v2 .noir-dash-greet {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: var(--noir-serif) !important;
  font-size: clamp(28px, 4.5vw, 52px) !important;
  font-weight: 300 !important;
  letter-spacing: -.025em !important;
  line-height: 1 !important;
  color: var(--noir-ink) !important;
  margin: 0 !important;
}
/* Orange emphasis word — NOT italic, just bold + orange (matches design) */
.noir-v2 .noir-dash-greet em {
  font-style: normal;
  font-weight: 600;
  color: var(--noir-orange);
}
.noir-v2 .noir-dash-sub {
  font-family: var(--noir-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--noir-muted);
  margin: 8px 0 0;
}
.noir-v2 .noir-dash-topbar-actions {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── KPI grid — 4-col desktop ── */
.noir-v2 .noir-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}
.noir-v2 .noir-kpi {
  background: var(--noir-paper);
  border: 1px solid var(--noir-hair);
  border-radius: 18px;
  padding: 22px;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
  position: relative;
  overflow: hidden;
}
.noir-v2 .noir-kpi:hover {
  border-color: var(--noir-ink);
  transform: translateY(-2px);
}
.noir-v2 .noir-kpi--featured {
  background: var(--noir-ink);
  border-color: var(--noir-ink);
  color: var(--noir-paper);
}
.noir-v2 .noir-kpi--featured:hover { border-color: var(--noir-ink); }
.noir-v2 .noir-kpi .lbl {
  font-family: var(--noir-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--noir-muted);
}
.noir-v2 .noir-kpi--featured .lbl { color: rgba(244,240,232,.55); }
.noir-v2 .noir-kpi .num {
  font-family: var(--noir-serif);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--noir-ink);
}
.noir-v2 .noir-kpi--featured .num { color: var(--noir-orange); }
.noir-v2 .noir-kpi .delta {
  font-size: 12px;
  color: var(--noir-muted);
  display: flex !important;
  align-items: center;
  gap: 5px;
}
.noir-v2 .noir-kpi--featured .delta { color: rgba(244,240,232,.55); }

/* ── Dashboard panel ── */
.noir-v2 .noir-dash-panel {
  background: var(--noir-paper);
  border: 1px solid var(--noir-hair);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
}
.noir-v2 .noir-dash-panel-head {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--noir-hair);
  margin-bottom: 24px;
}
/* Override the global .noir-dash-main h3 orange underline rule inside panels */
.noir-v2 .noir-dash-panel-head h3 {
  font-family: var(--noir-serif) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: -.015em !important;
  color: var(--noir-ink) !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: none !important;
  padding: 0 !important;
}
/* Orange word — NOT italic, bold orange (matches design em treatment) */
.noir-v2 .noir-dash-panel-head h3 em {
  font-style: normal;
  font-weight: 600;
  color: var(--noir-orange);
}
.noir-v2 .noir-dash-panel-head .meta {
  font-family: var(--noir-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--noir-muted);
  white-space: nowrap;
}

/* ── App rows — card style with paper-2 bg, serif title, grid layout ── */
.noir-v2 .noir-apps-list,
.noir-v2 .noir-app-list { display: flex !important; flex-direction: column; gap: 8px; }
.noir-v2 .noir-dash-panel > .noir-app-row + .noir-app-row { margin-top: 8px; }
.noir-v2 .noir-app-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  background: var(--noir-paper-2);
  border-radius: 12px;
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
  cursor: default;
}
.noir-v2 .noir-app-row:hover {
  background: var(--noir-paper);
  box-shadow: inset 0 0 0 1px var(--noir-ink);
}
.noir-v2 .noir-app-info { min-width: 0; }
.noir-v2 .noir-app-title {
  font-family: var(--noir-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--noir-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.noir-v2 .noir-app-company {
  font-size: 13px;
  color: var(--noir-muted);
  margin-top: 2px;
}
.noir-v2 .noir-app-date {
  font-family: var(--noir-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--noir-muted);
  white-space: nowrap;
}

/* View all link */
.noir-v2 .noir-view-all-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--noir-orange);
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.noir-v2 .noir-view-all-link:hover { opacity: .7; }

/* ── Profile completion checklist — simple 2-col grid, matches design ── */
.noir-v2 .noir-completion-checklist {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  font-size: 14px;
}
.noir-v2 .noir-completion-check {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: var(--noir-ink-2);
  cursor: default;
}
.noir-v2 .noir-completion-check:not(.done) { cursor: pointer; }
.noir-v2 .noir-completion-check:not(.done):hover { color: var(--noir-ink); }
.noir-v2 .noir-completion-check .ico {
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.noir-v2 .noir-completion-check.done .ico  { color: var(--noir-lime); }
.noir-v2 .noir-completion-check:not(.done) .ico { color: var(--noir-orange); }

/* Notification toggle list */
.noir-v2 .noir-notif-list {
  border: 1px solid var(--noir-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.noir-v2 .noir-notif-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--noir-hair);
  background: #fff;
  transition: background var(--dur-fast);
}
.noir-v2 .noir-notif-row:last-child { border-bottom: none; }
.noir-v2 .noir-notif-row:hover { background: var(--noir-paper); }
.noir-v2 .noir-notif-nm {
  font-size: 14px;
  font-weight: 500;
  color: var(--noir-ink);
}
.noir-v2 .noir-notif-desc {
  font-size: 12px;
  color: var(--noir-muted);
  margin-top: 2px;
  line-height: 1.45;
}
.noir-v2 .noir-notif-ch {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.noir-v2 .noir-notif-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--noir-muted);
}

/* CSS toggle switch */
.noir-v2 .noir-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--noir-paper-2, #e8e4dc);
  border: 1px solid var(--noir-line);
  cursor: pointer;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.noir-v2 .noir-toggle::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: left .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.noir-v2 .noir-toggle.on {
  background: var(--noir-orange);
  border-color: var(--noir-orange);
}
.noir-v2 .noir-toggle.on::after { left: 18px; }

/* Google Calendar status block */
.noir-v2 .noir-gcal-status {
  display: grid !important;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--noir-line);
  background: var(--noir-paper);
}
.noir-v2 .noir-gcal-status--connected { border-color: rgba(60,170,90,.3); background: rgba(60,170,90,.04); }
.noir-v2 .noir-gcal-status--disconnected { border-color: var(--noir-line); }
.noir-v2 .noir-gcal-status .ico { font-size: 18px; line-height: 1.4; }
.noir-v2 .noir-gcal-status--connected .ico    { color: #3aaa5a; }
.noir-v2 .noir-gcal-status--disconnected .ico { color: var(--noir-muted); }
.noir-v2 .noir-gcal-status strong {
  display: block;
  font-size: 14px;
  color: var(--noir-ink);
  margin-bottom: 4px;
}
.noir-v2 .noir-gcal-status p {
  font-size: 12px;
  color: var(--noir-muted);
  margin: 0;
  line-height: 1.5;
}

/* ──────── 15. RESPONSIVE ──────── */
@media (max-width: 1024px) {
  .noir-v2 .noir-dash-main { padding: 28px 32px 80px !important; }
  .noir-v2 .noir-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .noir-v2 .noir-impact-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .noir-v2 .noir-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 900px) {
  .noir-v2 .noir-impact-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .noir-v2 .noir-tp-head { grid-template-columns: 1fr !important; }
  .noir-v2 .noir-tp-grid { grid-template-columns: 1fr !important; }
  .noir-v2 .noir-job-card { grid-template-columns: 48px 1fr !important; }
  .noir-v2 .noir-job-side { grid-column: 1 / -1; flex-direction: row !important; justify-content: space-between !important; }
  .noir-v2 .noir-auth__art { display: none !important; }
  #noir-auth,
  .noir-v2 .noir-auth { grid-template-columns: 1fr !important; }
  .noir-v2 .noir-auth__form-wrap { min-height: 100vh !important; }
  /* Two-column form rows stack on tablet */
  .noir-row-2 {
    grid-template-columns: 1fr !important;
  }
  /* Admin table actions: smaller */
  .noir-admin-act-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 768px) {
  #noir-dash-shell,
  .noir-v2 .noir-dash-shell {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  /* Rail: always fixed off-screen left, slides in via transform — animatable */
  .noir-v2 .noir-dash-shell > .noir-dash-rail,
  #noir-dash-shell > .noir-dash-rail {
    display: flex !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 95 !important;
    transform: translateX(-110%) !important;
    /* spring open, snappy close */
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.38s ease,
                visibility 0s linear 0.38s !important;
    visibility: hidden !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    will-change: transform;
  }
  .noir-v2 .noir-dash-shell.is-open > .noir-dash-rail,
  #noir-dash-shell.is-open > .noir-dash-rail {
    transform: translateX(0) !important;
    box-shadow: 8px 0 48px rgba(0,0,0,.65) !important;
    visibility: visible !important;
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.38s ease,
                visibility 0s linear 0s !important;
  }
  /* On mobile, nav doesn't need its own scroll — the drawer handles it */
  .noir-v2 .noir-dash-shell.is-open > .noir-dash-rail .noir-dash-nav {
    overflow-y: visible !important;
    flex: none !important;
    min-height: auto !important;
  }
  .noir-v2 .noir-dash-mobilebar { display: flex !important; }
  .noir-v2 .noir-dash-main { padding: 24px 20px 60px !important; }
  .noir-v2 .noir-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .noir-v2 .noir-impact-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .noir-v2 .noir-dash-topbar { flex-direction: column; gap: 12px; }
  .noir-v2 .noir-dash-topbar-actions { justify-content: flex-start; }
  .noir-v2 .noir-dash-greet { font-size: 22px; }
  .noir-v2 .noir-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .noir-v2 .noir-completion-checklist { grid-template-columns: repeat(2, 1fr) !important; }
  .noir-v2 .noir-completion-checklist { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Admin dashboard mobile responsiveness ────────── */
@media (max-width: 768px) {
  /* Tables: horizontal scroll */
  .noir-admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .noir-admin-table thead,
  .noir-admin-table tbody,
  .noir-admin-table tr,
  .noir-admin-table th,
  .noir-admin-table td {
    white-space: nowrap;
  }

  /* Panel head: stack on mobile */
  .noir-dash-panel-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }

  /* Topbar: stack heading + action */
  .noir-dash-topbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
  }

  /* Status tabs: horizontal scroll */
  .noir-admin-status-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }

  /* KPI grids: always 2-col on mobile, compact sizing */
  .noir-admin-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .noir-admin-kpi {
    padding: 12px 12px 10px !important;
    gap: 2px !important;
    border-radius: var(--r-sm) !important;
  }
  .noir-admin-kpi-num {
    font-size: 22px !important;
    margin: 1px 0 !important;
  }
  .noir-admin-kpi-lbl {
    font-size: 9px !important;
    letter-spacing: .06em !important;
  }
  .noir-admin-kpi-delta {
    font-size: 10px !important;
  }

  /* Charts row: single column */
  .noir-charts-row {
    grid-template-columns: 1fr !important;
  }

  /* Activity row: single column */
  .noir-activity-row {
    grid-template-columns: 1fr !important;
  }

  /* Admin actions: wrap */
  .noir-admin-actions {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Who cell: shrink */
  .noir-admin-who {
    min-width: 0;
  }
  .noir-admin-who .nm {
    font-size: 13px;
  }
}

@media (max-width: 520px) {
  .noir-v2 .noir-impact-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .noir-v2 .noir-su-switch { grid-template-columns: 1fr !important; }
  .noir-v2 .noir-row-2 { grid-template-columns: 1fr !important; }
  .noir-v2 .noir-row-3 { grid-template-columns: 1fr !important; }
  .noir-v2 .noir-grid-2 { grid-template-columns: 1fr !important; }
  .noir-v2 .noir-grid-3 { grid-template-columns: 1fr !important; }
  .noir-v2 .noir-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .noir-v2 .noir-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .noir-v2 .noir-impact-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .noir-v2 .noir-auth__roles { grid-template-columns: 1fr !important; }
  .noir-v2 .noir-completion-items { grid-template-columns: 1fr !important; }
  .noir-v2 .noir-sj-head { grid-template-columns: 64px 1fr !important; }
  .noir-v2 .noir-su-form { padding: 28px 20px; }
  .noir-v2 .noir-proj-grid { grid-template-columns: 1fr !important; }
  .noir-v2 .noir-review { grid-template-columns: auto 1fr !important; }
  .noir-v2 .noir-review__stars { grid-column: 1 / -1; }
  .noir-v2 .noir-leave-review { padding: 28px 20px !important; }
}

/* ── Toasts ──────────────────────────────────────────────────────────── */
#noir-toast-wrap {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 40px));
}
.nt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-md, 14px);
  background: #1a1a1a;
  color: #f4f0e8;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  pointer-events: all;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .28s ease, transform .28s ease;
  will-change: transform, opacity;
}
.nt.nt-in  { opacity: 1; transform: translateX(0); }
.nt.nt-out { opacity: 0; transform: translateX(24px); }
.nt--success { background: #14532d; color: #dcfce7; }
.nt--success .nt-icon { color: #4ade80; }
.nt--error   { background: #7f1d1d; color: #fee2e2; }
.nt--error   .nt-icon { color: #f87171; }
.nt--info    { background: #1e3a5f; color: #dbeafe; }
.nt--info    .nt-icon { color: #60a5fa; }
.nt-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  margin-top: 1px;
}
.nt-msg  { flex: 1; line-height: 1.45; }
.nt-x {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 0 0 4px;
  margin-top: -1px;
  transition: opacity .15s;
}
.nt-x:hover { opacity: 1; }
@media (max-width: 480px) {
  #noir-toast-wrap { top: auto; bottom: 20px; right: 12px; left: 12px; max-width: 100%; }
  .nt { transform: translateY(16px); }
  .nt.nt-in { transform: translateY(0); }
  .nt.nt-out { transform: translateY(16px); }
}

@media (max-width: 480px) {
  .noir-admin-kpi-grid {
    grid-template-columns: repeat(2,1fr) !important;
    gap: 8px !important;
  }
  .noir-admin-impact-grid {
    grid-template-columns: 1fr !important;
  }
  /* Main padding */
  .noir-v2 .noir-dash-main {
    padding: 16px 14px 60px !important;
  }
}

/* ── Confirm Dialog ──────────────────────────────────────────────────── */
#noir-dialog-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  z-index: 99998;
  animation: nd-fade-in .2s ease forwards;
}
#noir-dialog-overlay.nd-open { display: block; }
@keyframes nd-fade-in { from { opacity:0 } to { opacity:1 } }
#noir-dialog {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  z-index: 99999;
  width: min(420px, calc(100vw - 32px));
  background: var(--noir-paper, #f4f0e8);
  border-radius: var(--r-lg, 20px);
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
  overflow: hidden;
  animation: nd-slide-in .22s ease forwards;
}
#noir-dialog.nd-open { display: block; }
@keyframes nd-slide-in { from { transform: translate(-50%,-42%); opacity:0 } to { transform: translate(-50%,-50%); opacity:1 } }
.nd-header { padding: 24px 24px 0; }
.nd-title  { font-family: var(--noir-serif); font-size: 20px; font-weight: 400; margin: 0 0 8px; color: var(--noir-ink); }
.nd-body   { padding: 0 24px 20px; }
.nd-msg    { font-size: 14px; color: var(--noir-muted); margin: 0; line-height: 1.55; }
.nd-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--noir-line);
  background: var(--noir-paper-2, #ebe7df);
}
.noir-btn--danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.noir-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }
.nd-scroll-lock { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════
   ADMIN DASHBOARD v2  — standalone frontend admin
   ═══════════════════════════════════════════════════════════════ */

/* KPI grid */
.noir-admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .noir-admin-kpi-grid { grid-template-columns: repeat(2,1fr); } }
/* Keep 2 columns all the way down to phone — prevents list layout */
@media (max-width: 540px) {
  .noir-admin-kpi-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .noir-admin-kpi { padding: 12px 12px 10px; gap: 2px; }
  .noir-admin-kpi-num { font-size: 22px; margin: 1px 0; }
  .noir-admin-kpi-lbl { font-size: 9px; }
  .noir-admin-kpi-delta { font-size: 10px; }
}

.noir-admin-kpi {
  background: rgba(28,23,18,0.05);
  border: 1px solid rgba(28,23,18,0.1);
  border-radius: var(--r-md);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  text-align: left;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.7);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.noir-admin-kpi:hover {
  border-color: rgba(203,54,15,.4);
  background: rgba(203,54,15,.07);
  box-shadow: 0 4px 18px rgba(203,54,15,.12), inset 0 1px 0 rgba(255,255,255,.7);
}
.noir-admin-kpi--featured {
  background: rgba(203,54,15,.1);
  border-color: rgba(203,54,15,.3);
  box-shadow: 0 4px 20px rgba(203,54,15,.14), inset 0 1px 0 rgba(255,255,255,.5);
}
.noir-admin-kpi--featured:hover {
  background: rgba(203,54,15,.16);
  border-color: rgba(203,54,15,.5);
}
.noir-admin-kpi-lbl {
  font-family: var(--noir-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(28,23,18,.45);
}
.noir-admin-kpi--featured .noir-admin-kpi-lbl { color: rgba(28,23,18,.55); }
.noir-admin-kpi-num {
  font-family: var(--noir-serif);
  font-size: clamp(28px,4vw,40px);
  font-weight: 500;
  line-height: 1;
  color: var(--noir-ink);
  margin: 4px 0;
}
.noir-admin-kpi--featured .noir-admin-kpi-num { color: var(--noir-orange); }
.noir-admin-kpi-delta {
  font-size: 12px;
  color: rgba(28,23,18,.38);
}
.noir-admin-kpi--featured .noir-admin-kpi-delta { color: rgba(28,23,18,.48); }

/* Impact card */
.noir-admin-impact {
  background: var(--noir-ink);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  margin-top: 28px;
  color: var(--noir-paper);
}
.noir-admin-impact-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}
.noir-admin-impact-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3,1fr);
  gap: 20px;
}
@media (max-width: 800px) { .noir-admin-impact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .noir-admin-impact-grid { grid-template-columns: 1fr; } }

.noir-admin-impact-stat {
  display: flex; flex-direction: column; gap: 3px;
}
.noir-admin-impact-stat .lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(244,240,232,.45);
}
.noir-admin-impact-stat .num {
  font-family: var(--noir-serif);
  font-size: clamp(24px,3vw,34px);
  font-weight: 500;
  color: #fff;
  line-height: 1;
  margin: 4px 0 2px;
}
.noir-admin-impact-stat .num .of {
  font-size: 14px;
  color: rgba(244,240,232,.35);
  font-weight: 400;
}
.noir-admin-impact-stat .pct {
  font-size: 12px;
  color: rgba(244,240,232,.45);
}
.noir-admin-impact-stat .bar {
  height: 3px;
  background: rgba(244,240,232,.12);
  border-radius: 999px;
  margin-top: 8px;
}
.noir-admin-impact-stat .bar .fill {
  height: 100%;
  background: var(--noir-orange);
  border-radius: 999px;
}

/* Chart head inside chart-card */
.noir-admin-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.noir-admin-chart-head .t {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--noir-muted);
}
.noir-admin-chart-head .v {
  font-family: var(--noir-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--noir-ink);
  line-height: 1;
  margin-top: 4px;
}

/* Admin table */
.noir-admin-table {
  width: 100%;
  border-collapse: collapse;
}
.noir-admin-table thead th {
  text-align: left;
  font-family: var(--noir-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--noir-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--noir-hair);
}
.noir-admin-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--noir-hair);
  font-size: 13.5px;
  vertical-align: middle;
}
.noir-admin-table tbody tr:last-child td { border-bottom: none; }
.noir-admin-table tbody tr:hover { background: var(--noir-paper-2); }
.noir-admin-muted { color: var(--noir-muted); font-size: 12px; }

/* Who block */
.noir-admin-who {
  display: flex;
  align-items: center;
  gap: 10px;
}
.noir-admin-who .nm {
  font-family: var(--noir-serif);
  font-size: 14px;
  font-weight: 500;
}
.noir-admin-who .em {
  font-size: 11px;
  color: var(--noir-muted);
  margin-top: 1px;
}

/* Action buttons */
.noir-admin-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.noir-admin-act-btn {
  font-family: var(--noir-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 6px 11px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  display: inline-block;
}
.noir-admin-act-btn--view    { background: var(--noir-paper-2); color: var(--noir-ink); }
.noir-admin-act-btn--view:hover { background: var(--noir-ink); color: var(--noir-paper); }
.noir-admin-act-btn--approve { background: #d9f0c4; color: #2D3A0F; }
.noir-admin-act-btn--approve:hover { background: #b8e094; }
.noir-admin-act-btn--reject  { background: #fde8e6; color: #7A1F12; }
.noir-admin-act-btn--reject:hover  { background: #f8c4bf; }

/* Status tabs */
.noir-admin-status-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--noir-hair);
  margin-bottom: 16px;
}
.noir-admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--noir-sans);
  color: var(--noir-muted);
  background: var(--noir-paper-2);
  text-decoration: none;
  border: 1px solid transparent;
  transition: all .15s;
  cursor: pointer;
}
.noir-admin-tab:hover { color: var(--noir-ink); }
.noir-admin-tab.is-active {
  background: var(--noir-ink);
  color: var(--noir-paper);
  border-color: var(--noir-ink);
}
.noir-admin-tab .c {
  background: rgba(255,255,255,.18);
  color: inherit;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 700;
}
.noir-admin-tab.is-active .c { background: rgba(255,255,255,.2); }

/* ── Admin list toolbar (search + status tabs) ── */
.noir-admin-list-toolbar {
  padding: 20px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.noir-admin-list-toolbar .noir-admin-status-tabs {
  padding-bottom: 16px;
  margin-bottom: 0;
}

/* Search bar — icon is a flex sibling, not inside the input's padding */
.noir-admin-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--noir-paper-2);
  border: 1px solid var(--noir-line);
  border-radius: var(--r-pill);
  padding: 0 16px;
  height: 42px;
  transition: border-color .15s ease;
}
.noir-admin-search:focus-within {
  border-color: var(--noir-orange);
}
.noir-admin-search-ico {
  color: var(--noir-muted);
  flex-shrink: 0;
}
.noir-admin-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: var(--noir-sans) !important;
  font-size: 14px !important;
  color: var(--noir-ink) !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
}
.noir-admin-search-input::placeholder { color: var(--noir-muted); }
.noir-admin-search-input:focus { border-color: var(--noir-orange); }

/* Clickable table rows */
.noir-admin-row-link {
  cursor: pointer;
  transition: background .12s ease;
}
.noir-admin-row-link:hover { background: var(--noir-paper-2); }
.noir-admin-row-link:hover .nm { color: var(--noir-orange); }

/* Hide on mobile helper */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .noir-admin-list-toolbar { padding: 14px 14px 0; }
  .noir-admin-search-input { font-size: 16px; } /* prevent iOS zoom */
  .noir-admin-members-table td:first-child { width: 60%; }
  .noir-admin-members-table td:last-child { width: 40%; }
}

/* Activity 2-up row */
.noir-activity-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 700px) { .noir-activity-row { grid-template-columns: 1fr; } }

/* ── Dashboard switcher button + team badge ───────────────────────────── */
.noir-dash-team-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .75;
  text-transform: uppercase;
}

.noir-dash-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  width: 100%;
  justify-content: center;
  margin-bottom: 6px;
  white-space: nowrap;
}
.noir-dash-switch-btn svg {
  flex-shrink: 0;
}

/* Admin dash → Creative View (dark sidebar → member dash) */
.noir-dash-switch-btn--member {
  background: var(--noir-orange);
  color: #fff;
  border: none;
  box-shadow: 0 2px 10px rgba(203,54,15,.40);
}
.noir-dash-switch-btn--member:hover {
  background: #b83c0d;
  color: #fff;
  box-shadow: 0 4px 16px rgba(203,54,15,.55);
}

/* Member/Employer dash → Admin (dark sidebar → admin dash) */
.noir-dash-switch-btn--admin {
  background: var(--noir-orange);
  color: #fff;
  border: none;
  box-shadow: 0 2px 10px rgba(203,54,15,.40);
}
.noir-dash-switch-btn--admin:hover {
  background: #b83c0d;
  color: #fff;
  box-shadow: 0 4px 16px rgba(203,54,15,.55);
}

/* ── Pending / suspended account banner ──────────────────────────── */
.noir-pending-banner {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  background: #fff8ed;
  border: 1px solid #f5d58a;
  border-left: 4px solid var(--noir-orange);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) var(--s-5) 0;
  font-size: var(--t-sm);
  line-height: 1.55;
}
.noir-pending-banner--warn {
  background: #fef2f2;
  border-color: #fca5a5;
  border-left-color: #ef4444;
}
.noir-pending-banner strong {
  display: block;
  font-size: var(--t-body);
  font-weight: 700;
  margin-bottom: 3px;
}
.noir-pending-banner p {
  margin: 0;
  color: var(--noir-ink-2);
}
.noir-pending-banner a {
  color: var(--noir-orange);
  text-decoration: underline;
}
.noir-pending-banner-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Verification badge ────────────────────────────────────── */
.noir-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  color: #16a34a;
  border: 1px solid #86efac;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  margin-top: 10px;
}
.noir-tc-verified {
  display: inline-flex;
  align-items: center;
  color: #16a34a;
  margin-left: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ================================================================
   INBOX STYLES
   ================================================================ */

.noir-inbox-list {
  display: flex !important;
  flex-direction: column !important;
}

.noir-inbox-item {
  border-bottom: 1px solid var(--noir-hair) !important;
}
.noir-inbox-item:last-child {
  border-bottom: none !important;
}
.noir-inbox-item--unread .noir-inbox-item__subject {
  font-weight: 600 !important;
  color: var(--noir-ink) !important;
}
.noir-inbox-item--unread {
  border-left: 3px solid var(--noir-orange) !important;
  padding-left: 12px !important;
}
.noir-inbox-item__subject {
  font-size: 14px !important;
  margin-bottom: 2px !important;
}
.noir-inbox-item__meta {
  font-size: 12px !important;
  color: var(--noir-muted) !important;
}
.noir-inbox-body {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--noir-ink-2) !important;
}
.noir-inbox-body p { margin-bottom: 12px !important; }
.noir-inbox-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  border-radius: var(--r-pill) !important;
  background: var(--noir-orange) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 0 6px !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
}

/* ================================================================
   TRAINING PROGRAM CARDS
   ================================================================ */

.noir-training-card {
  border-bottom: 1px solid var(--noir-hair) !important;
}
.noir-training-card:last-child {
  border-bottom: none !important;
}
.noir-training-card__fees {
  display: flex !important;
  gap: 16px !important;
  margin-top: 8px !important;
  font-size: 13px !important;
}
.noir-training-card__apply {
  flex-shrink: 0 !important;
}
.noir-apply-form {
  border-top: 1px solid var(--noir-line) !important;
  padding-top: 20px !important;
}
.noir-form-field {
  margin-bottom: 16px !important;
}
.noir-form-field label {
  font-size: 13px !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* ================================================================
   TRAINEE UPGRADE CTA
   ================================================================ */

.noir-trainee-upgrade-cta {
  background: linear-gradient(135deg, rgba(232,78,27,.08), rgba(232,78,27,.04)) !important;
  border: 1px solid rgba(232,78,27,.2) !important;
  border-radius: var(--r-md) !important;
  padding: var(--s-4) !important;
  margin: var(--s-5) var(--s-4) var(--s-3) !important;
  font-size: 12px !important;
}
.noir-trainee-upgrade-cta p {
  color: rgba(244,240,232,.7) !important;
  margin-bottom: 6px !important;
  line-height: 1.5 !important;
}
.noir-trainee-upgrade-cta strong {
  color: var(--noir-paper) !important;
  font-size: 13px !important;
}
.noir-trainee-upgrade-cta .noir-btn {
  margin-top: 10px !important;
}

/* ================================================================
   AUTH SHELL (trainee register)
   ================================================================ */

.noir-auth-shell {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--s-7) var(--s-4) !important;
  background: var(--noir-paper) !important;
}
.noir-auth-brand {
  font-family: var(--noir-serif) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--noir-ink) !important;
  margin-bottom: var(--s-5) !important;
  letter-spacing: -.02em !important;
}
.noir-auth-brand .dot { color: var(--noir-orange) !important; }
.noir-auth-card {
  background: var(--noir-paper-2) !important;
  border: 1px solid var(--noir-line) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--s-6) !important;
  width: 100% !important;
}
.noir-auth-head h1 {
  font-family: var(--noir-serif) !important;
  font-weight: 300 !important;
  font-size: clamp(24px,4vw,36px) !important;
  letter-spacing: -.02em !important;
  margin-bottom: 6px !important;
}
.noir-auth-head p {
  font-size: 14px !important;
  color: var(--noir-muted) !important;
  margin-bottom: 24px !important;
}

/* ================================================================
   MOBILE HYBRID NAV — Option A bottom tab bar (member)
                     + refined drawer (admin/employer)
   ================================================================ */

/* ── Mobilebar refinements ── */

/* Admin mobilebar: hamburger left, brand centre, info right */
.noir-v2 .noir-mobilebar--admin,
.noir-admin-v2 .noir-mobilebar--admin {
  justify-content: space-between !important;
}

/* Hamburger: 3 bars (admin/employer style) */
.noir-dash-burger span {
  display: block;
  height: 2px;
  background: rgba(244,240,232,.75);
  border-radius: 99px;
  transition: all .2s;
  pointer-events: none;
}
.noir-dash-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: rgba(244,240,232,.08) !important;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  padding: 0 10px;
}
.noir-dash-burger span:first-child  { width: 18px; }
.noir-dash-burger span:nth-child(2) { width: 14px; }
.noir-dash-burger span:nth-child(3) { width: 10px; }
.noir-dash-shell.is-open .noir-dash-burger span:first-child  { width: 16px; transform: rotate(45deg) translate(5px, 5px); }
.noir-dash-shell.is-open .noir-dash-burger span:nth-child(2) { opacity: 0; }
.noir-dash-shell.is-open .noir-dash-burger span:nth-child(3) { width: 16px; transform: rotate(-45deg) translate(4px, -4px); }

/* Notification bell in member mobilebar */
.noir-mobilebar-bell {
  position: relative;
  width: 36px; height: 36px;
  background: rgba(244,240,232,.08);
  border: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: rgba(244,240,232,.7);
}
.noir-mobilebar-bell-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 7px; height: 7px;
  background: var(--noir-orange);
  border-radius: 50%;
  border: 2px solid var(--noir-ink);
}

/* Member tab-mode: no burger needed — hide old one if present */
.noir-mobilebar--tabmode .noir-dash-burger { display: none !important; }

/* ── Member dashboard — mobile shell ── */
@media (max-width: 768px) {

  /* Member: hide the brand+bell top bar — redundant now that brand is in
     the rail drawer and inbox is in the tab bar */
  body.page-noir-member-dashboard .noir-mobilebar--tabmode {
    display: none !important;
  }

  /* Member rail: let the generic slide-in drawer rules (~line 3223) handle
     visibility. DO NOT hide it here — .noir-dash-shell.is-open triggers the
     slide-in via the shared rule. */

  /* Member: backdrop handled by generic rule (~line 1800) — not hidden here */

  /* Member rail: extra bottom padding so scroll content clears the pill */
  body.page-noir-member-dashboard .noir-dash-rail {
    padding-bottom: 120px !important;
  }

  /* Member shell: single column */
  body.page-noir-member-dashboard #noir-dash-shell,
  body.page-noir-member-dashboard .noir-dash-shell {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM TAB BAR — Option A "Ember" style
   Always sits above browser chrome (address bar / home bar).
   ═══════════════════════════════════════════════════════════ */

/* Hidden on desktop — shown via media query or page-class override */
.noir-mobile-tabbar {
  display: none !important;
}

@media (max-width: 768px) {
  .noir-mobile-tabbar {
    display: flex !important;
    position: fixed;
    /* Push above browser chrome on BOTH iOS (home bar) and Android (nav bar).
       We add a generous calc so the bar never hides behind the browser UI.
       env(safe-area-inset-bottom) = home indicator height on iPhone X+.
       Fall back to 0 when not supported (Chrome Android handles its own space). */
    bottom: 0;
    left: 0;
    right: 0;
    /* Let padding drive height — icon area + label + safe inset */
    padding-top: 8px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    min-height: 56px;
    /* Option A warm-dark background — slightly warmer than --noir-ink */
    background: #221c17;
    border-top: 1px solid rgba(244,240,232,.14);
    /* Above any drawer/backdrop (z 200) AND any WP adminbar (z 99999 on desktop only) */
    z-index: 9999;
    box-shadow: 0 -4px 24px rgba(0,0,0,.45);
    /* Prevent content shift on Chrome Android when address bar hides */
    will-change: transform;
    overflow: hidden;
    /* Spring transition for collapse animation */
    transition: left .32s cubic-bezier(.34,1.1,.64,1),
                bottom .32s cubic-bezier(.34,1.1,.64,1),
                width .32s cubic-bezier(.34,1.1,.64,1),
                height .32s cubic-bezier(.34,1.1,.64,1),
                border-radius .32s cubic-bezier(.34,1.1,.64,1),
                padding .32s cubic-bezier(.34,1.1,.64,1);
  }

}

/* ── Tab item ── */
.noir-mtab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0 4px;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
  position: relative; /* badge positioning */
}

/* Icon wrapper */
.noir-mtab-ico {
  position: relative;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Inactive icon — muted */
.noir-mtab-ico svg {
  opacity: .35;
  color: #f4f0e8;
  flex-shrink: 0;
  transition: opacity .18s ease, color .18s ease;
}

/* Active icon — full orange stroke (Option A style) */
.noir-mtab.is-active .noir-mtab-ico svg {
  opacity: 1;
}
.noir-mtab.is-active .noir-mtab-ico svg path,
.noir-mtab.is-active .noir-mtab-ico svg rect,
.noir-mtab.is-active .noir-mtab-ico svg circle,
.noir-mtab.is-active .noir-mtab-ico svg polyline,
.noir-mtab.is-active .noir-mtab-ico svg polygon,
.noir-mtab.is-active .noir-mtab-ico svg line,
.noir-mtab.is-active .noir-mtab-ico svg ellipse {
  stroke: #cb360f;
}

/* Tab label */
.noir-mtab-lbl {
  font-family: var(--noir-sans, 'Inter', system-ui, sans-serif);
  font-size: 9px;
  font-weight: 500;
  color: #6b615a; /* Option A --dim */
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
  transition: color .18s ease, font-weight .18s ease;
}
.noir-mtab.is-active .noir-mtab-lbl {
  color: #cb360f;
  font-weight: 700;
}

/* Tab notification badge */
.noir-mtab-badge {
  position: absolute;
  top: -2px; right: -4px;
  min-width: 15px; height: 15px;
  background: #cb360f;
  border-radius: 99px;
  border: 2px solid #221c17; /* match tab bar bg */
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* ── Admin mobile: flex-column layout so floatbar is always screen-bottom ── */
/* Using flex layout instead of position:fixed so it works inside CSS-transform
   mobile simulators AND on real phones equally. */
@media (max-width: 768px) {

  /* Page root: full viewport height, flex column */
  body.page-noir-admin .noir-v2.noir-admin-v2 {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important; /* dynamic viewport — accounts for browser chrome */
    overflow: hidden !important;
  }

  /* Shell (sidebar + main) fills the remaining space and scrolls internally */
  body.page-noir-admin .noir-dash-shell {
    flex: 1 !important;
    min-height: 0 !important; /* critical: allows flex child to shrink + scroll */
    overflow: hidden !important;
  }

  /* Main content area scrolls */
  body.page-noir-admin .noir-dash-main {
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 24px !important; /* no extra bottom padding — nav is beside, not over */
  }

  /* Floatbar: static in flow (flex child), always at screen bottom */
  body.page-noir-admin .noir-mobile-tabbar {
    display: flex !important;
    position: static !important; /* not fixed — flex layout handles it */
    flex-shrink: 0 !important;
    width: 100% !important;
    /* Keep the bottom safe-area padding for notched phones */
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px) !important;
  }

  /* Shell is the positioning context for the drawer overlay */
  body.page-noir-admin .noir-dash-shell {
    position: relative !important;
  }

  /* Backdrop: always in DOM, fades in/out via opacity so CSS transition works.
     pointer-events:none when invisible so it doesn't block taps. */
  body.page-noir-admin .noir-dash-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,15,15,.55) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 94 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
  }
  body.page-noir-admin .noir-dash-backdrop.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Rail: always fixed + always in DOM — hidden via translateX so transitions work.
     display:none (from general mobile rule) is overridden here.
     padding-bottom keeps scroll content clear of the floating pill nav bar. */
  body.page-noir-admin .noir-dash-rail {
    display: flex !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    height: 100dvh !important;
    width: 280px !important;
    z-index: 95 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 100px !important; /* clears the floating pill nav */
    transform: translateX(-110%) !important;
    /* spring open, snappy close */
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.38s ease,
                visibility 0s linear 0.38s !important;
    visibility: hidden !important;
    box-shadow: none !important;
    will-change: transform !important;
  }
  /* Slide in when shell has .is-open */
  body.page-noir-admin .noir-dash-shell.is-open > .noir-dash-rail {
    transform: translateX(0) !important;
    box-shadow: 8px 0 48px rgba(0,0,0,.65) !important;
    visibility: visible !important;
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.38s ease,
                visibility 0s linear 0s !important;
  }

  /* Nav pill sits above the rail overlay */
  body.page-noir-admin .noir-mobile-tabbar--admin {
    position: relative !important;
    z-index: 98 !important;
  }

  /* Hide the OLD top mobilebar on admin mobile */
  body.page-noir-admin .noir-dash-mobilebar {
    display: none !important;
  }

  /* Hide the desktop topbar heading — inline heading in content replaces it */
  body.page-noir-admin .noir-dash-topbar {
    display: none !important;
  }

  /* Member main padding (member still uses position:fixed tab bar) */
  body.page-noir-member-dashboard .noir-dash-main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
  }
}

/* ── Admin mobile inline heading (shown when topbar is hidden) ── */
.noir-admin-mobile-heading {
  display: none; /* desktop: heading is in the topbar */
}
@media (max-width: 768px) {
  .noir-admin-mobile-heading {
    display: block;
    padding: 20px 20px 8px;
  }
  .noir-admin-mobile-heading h1 {
    font-family: var(--noir-serif);
    font-size: 26px;
    font-weight: 400;
    color: var(--noir-paper);
    line-height: 1.15;
    margin: 0 0 4px;
  }
  .noir-admin-mobile-heading h1 em {
    font-style: normal;
    color: var(--noir-orange);
  }
  .noir-admin-mobile-heading .sub {
    font-size: 12px;
    color: rgba(244,240,232,.5);
  }
}

/* ── Admin floatbar: badge + burger + tabs ── */

/* Admin badge pill (left of floatbar) */
.noir-admin-floatbadge {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px 0 8px;
  flex-shrink: 0;
}
.noir-admin-floatbadge-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 6px #c084fc;
  flex-shrink: 0;
}
.noir-admin-floatbadge span:last-child {
  font-size: 10px;
  font-weight: 700;
  color: #c084fc;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Burger tab inside floatbar */
.noir-mtab--burger {
  flex-shrink: 0;
  width: 48px;
  border-right: 1px solid rgba(244,240,232,.08);
  padding-right: 10px;
  margin-right: 2px;
}
.noir-mtab-ico--burger {
  flex-direction: column !important;
  gap: 4px !important;
  width: 20px !important;
  height: 20px !important;
  align-items: flex-start !important;
}
.noir-mtab-ico--burger span {
  display: block;
  height: 2px;
  background: rgba(244,240,232,.55);
  border-radius: 99px;
  transition: all .2s;
}
.noir-mtab-ico--burger span:nth-child(1) { width: 16px; }
.noir-mtab-ico--burger span:nth-child(2) { width: 12px; }
.noir-mtab-ico--burger span:nth-child(3) { width: 8px; }

/* When drawer is open — animate burger to X */
.noir-dash-shell.is-open .noir-mtab-ico--burger span:nth-child(1) { width: 14px; transform: rotate(45deg) translate(4px, 4px); }
.noir-dash-shell.is-open .noir-mtab-ico--burger span:nth-child(2) { opacity: 0; }
.noir-dash-shell.is-open .noir-mtab-ico--burger span:nth-child(3) { width: 14px; transform: rotate(-45deg) translate(3px, -4px); }

/* Admin-specific floatbar tweaks */
.noir-mobile-tabbar--admin {
  align-items: center;
  gap: 0;
}

/* ── Admin floatbar: glassy pill ── */
@media (max-width: 768px) {
  body.page-noir-admin .noir-mobile-tabbar--admin {
    /* Float it above the page edge with margin */
    margin: 0 10px 10px !important;
    border-radius: 20px !important;
    /* Kill the flat bar look from the base tabbar */
    background: rgba(14, 11, 8, 0.82) !important;
    border-top: none !important;
    border: 1px solid rgba(244,240,232,.1) !important;
    box-shadow:
      0 8px 32px rgba(0,0,0,.6),
      0 2px 8px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    /* Padding: top comfortable, bottom safe area */
    padding: 6px 6px calc(max(env(safe-area-inset-bottom, 0px), 2px) + 6px) !important;
    /* Width auto so margin applies */
    width: auto !important;
  }

  /* Tab items — use Grid so flex-direction overrides from theme cannot break it */
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 22px auto !important;
    justify-items: center !important;
    align-content: center !important;
    row-gap: 3px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 6px 6px 5px !important;
    min-width: 52px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background .15s ease !important;
    box-shadow: none !important;
    outline: none !important;
  }
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab:active {
    background: rgba(244,240,232,.07) !important;
  }
  /* Icon: pinned to grid row 1, centered */
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab .noir-mtab-ico {
    grid-row: 1 !important;
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    position: relative !important;
  }
  /* Label: pinned to grid row 2, centered */
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab .noir-mtab-lbl {
    grid-row: 2 !important;
    grid-column: 1 !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Inactive icon: muted warm white */
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab .noir-mtab-ico svg {
    opacity: 1;
    color: rgba(244,240,232,.38);
  }

  /* Active icon: orange — override stroke on all SVG child elements */
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab.is-active .noir-mtab-ico svg {
    opacity: 1;
    color: var(--noir-orange, #cb360f);
  }
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab.is-active .noir-mtab-ico svg path,
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab.is-active .noir-mtab-ico svg rect,
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab.is-active .noir-mtab-ico svg circle,
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab.is-active .noir-mtab-ico svg polyline,
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab.is-active .noir-mtab-ico svg polygon,
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab.is-active .noir-mtab-ico svg line,
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab.is-active .noir-mtab-ico svg ellipse {
    stroke: var(--noir-orange, #cb360f) !important;
  }

  /* Inactive label colour (layout already set in grid rule above) */
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab .noir-mtab-lbl {
    color: rgba(244,240,232,.38) !important;
    font-size: 9px !important;
    font-family: var(--noir-sans, system-ui, sans-serif) !important;
    font-weight: 500 !important;
    letter-spacing: .03em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Active label: orange + bold */
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab.is-active .noir-mtab-lbl {
    color: var(--noir-orange, #cb360f);
    font-weight: 700;
  }

  /* Badge dot: orange dot only, no number */
  body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab-badge {
    width: 6px !important;
    height: 6px !important;
    min-width: 0 !important;
    background: var(--noir-orange, #cb360f) !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(14,11,8,.9) !important;
    padding: 0 !important;
    font-size: 0 !important;
    top: -1px !important;
    right: -3px !important;
  }

  /* Menu tab (data-noir-burger) icon colour */
  body.page-noir-admin .noir-mobile-tabbar--admin [data-noir-burger] .noir-mtab-ico svg {
    color: rgba(244,240,232,.38);
  }
  body.page-noir-admin .noir-mobile-tabbar--admin [data-noir-burger].is-active .noir-mtab-ico svg {
    color: var(--noir-orange, #cb360f);
  }
}

/* ── Refined drawer touch targets ── */
@media (max-width: 768px) {
  /* Make drawer nav items taller for thumbs */
  .noir-v2 .noir-dash-nav-item,
  .noir-admin-v2 .noir-dash-nav-item {
    padding: 13px 12px !important;
    font-size: 12px !important;
  }

  /* Drawer section header labels */
  .noir-v2 .noir-dash-shell.is-open > .noir-dash-rail [style*="10px"][style*="uppercase"],
  .noir-admin-v2 .noir-dash-shell.is-open > .noir-dash-rail [style*="10px"][style*="uppercase"] {
    padding: 10px 14px 4px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MICRO-ANIMATIONS — youth vibes, minimal
   ═══════════════════════════════════════════════════════════ */

/* ── Section enter: fade-up with subtle spring ── */
@keyframes noir-section-in {
  from { opacity: 0; transform: translateY(18px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.noir-v2 .noir-section-entering,
.noir-admin-v2 .noir-section-entering {
  animation: noir-section-in 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

/* ── Nav active indicator: spring in on selection ── */
@keyframes noir-nav-indicator {
  from { transform: scaleY(0); opacity: 0; }
  60%  { transform: scaleY(1.2); opacity: 1; }
  to   { transform: scaleY(1);   opacity: 1; }
}
.noir-v2 .noir-dash-nav-item.is-active::before {
  animation: noir-nav-indicator 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

/* ── Nav item: micro-pop when activated ── */
@keyframes noir-nav-pop {
  0%   { transform: scale(1) translateX(0); }
  40%  { transform: scale(0.97) translateX(-2px); }
  70%  { transform: scale(1.01) translateX(1px); }
  100% { transform: scale(1) translateX(0); }
}
.noir-v2 .noir-dash-nav-item.is-active {
  animation: noir-nav-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Bottom tab icon: bounce on activate ── */
@keyframes noir-tab-bounce {
  0%   { transform: scale(1)    translateY(0); }
  30%  { transform: scale(0.82) translateY(3px); }
  60%  { transform: scale(1.18) translateY(-5px); }
  80%  { transform: scale(0.94) translateY(1px); }
  100% { transform: scale(1)    translateY(0); }
}
.noir-mtab.is-active .noir-mtab-ico {
  animation: noir-tab-bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.page-noir-admin .noir-mobile-tabbar--admin .noir-mtab.is-active .noir-mtab-ico {
  animation: noir-tab-bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ── KPI tile: lift + spring scale on hover ── */
.noir-admin-kpi {
  transition: border-color .2s ease, background .2s ease,
              box-shadow .2s ease, transform .28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.noir-admin-kpi:hover {
  transform: translateY(-4px) scale(1.025) !important;
}
.noir-admin-kpi--featured:hover {
  transform: translateY(-4px) scale(1.025) !important;
}

/* ── Gig Assignment Panel ──────────────────────────────────── */
.noir-fa-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px 12px; flex-wrap: wrap;
}
.noir-fa-jobpicker {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.noir-fa-jobpicker label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--noir-muted); font-weight: 600; white-space: nowrap;
}
.noir-fa-jobpicker select {
  flex: 1; padding: 8px 12px; border: 1px solid var(--noir-line);
  border-radius: var(--r-sm); font-size: 13px; background: var(--noir-paper);
  color: var(--noir-ink); min-width: 0;
}
/* Brief card (dark) */
.noir-fa-brief {
  margin: 0 24px 20px;
  background: var(--noir-ink); color: var(--noir-paper);
  border-radius: var(--r-md); padding: 20px 22px;
  display: grid; grid-template-columns: 52px 1fr auto;
  gap: 16px; align-items: start;
}
.noir-fa-brief-logo {
  width: 52px; height: 52px; border-radius: 10px;
  background: var(--noir-orange); color: #fff;
  display: grid; place-items: center;
  font-family: var(--noir-serif); font-weight: 600; font-size: 17px;
}
.noir-fa-brief-title {
  font-family: var(--noir-serif); font-size: 20px; font-weight: 600;
  margin-bottom: 3px;
}
.noir-fa-brief-co {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(244,240,232,.6); margin-bottom: 10px;
}
.noir-fa-brief-reqs { display: flex; flex-wrap: wrap; gap: 6px; }
.noir-fa-brief-req {
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.09); font-size: 12px;
  display: inline-flex; align-items: center; gap: 5px;
}
.noir-fa-brief-req-lbl {
  opacity: .5; font-size: 9px; text-transform: uppercase;
  letter-spacing: .1em;
}
.noir-fa-brief-ask {
  text-align: right; display: flex; flex-direction: column; gap: 5px;
  align-items: flex-end; white-space: nowrap;
}
.noir-fa-brief-inv {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--noir-orange-2, #f97316); font-weight: 600;
}
.noir-fa-brief-due { font-size: 12px; color: rgba(244,240,232,.6); }
/* Two-column grid */
.noir-fa-grid {
  display: grid; grid-template-columns: 1fr 320px;
  gap: 20px; padding: 0 24px 24px; align-items: start;
}
@media (max-width: 860px) {
  .noir-fa-grid { grid-template-columns: 1fr; }
  .noir-fa-assigned { position: static !important; }
}
/* Matches panel */
.noir-fa-matches-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.noir-fa-matches-head h4 {
  font-family: var(--noir-serif); font-size: 18px; font-weight: 500;
  margin: 0;
}
.noir-fa-matches-head h4 em { font-style: normal; color: var(--noir-orange); }
/* Candidate card */
.noir-fa-cands { display: flex; flex-direction: column; gap: 8px; }
.noir-fa-cand {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  gap: 12px; padding: 14px 16px;
  background: var(--noir-paper); border: 1px solid var(--noir-hair);
  border-radius: var(--r-md); align-items: center;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.noir-fa-cand:hover { border-color: var(--noir-ink); transform: translateY(-1px); }
.noir-fa-cand--unavailable { opacity: .55; pointer-events: none; }
.noir-fa-cand-av {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--noir-ink); color: var(--noir-paper);
  display: grid; place-items: center;
  font-family: var(--noir-serif); font-weight: 600; font-size: 15px;
  overflow: hidden; flex-shrink: 0;
}
.noir-fa-cand-nm {
  font-weight: 600; font-size: 14px; margin-bottom: 2px;
}
.noir-fa-cand-star { color: var(--noir-orange); font-size: 12px; }
.noir-fa-cand-meta { font-size: 12px; color: var(--noir-muted); margin-bottom: 4px; }
.noir-fa-cand-skills {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.noir-fa-cand-skills span {
  padding: 2px 8px; border-radius: 999px; font-size: 11px;
  background: var(--noir-paper-2); color: var(--noir-ink);
}
/* Workload bar */
.noir-fa-cand-workload { text-align: center; min-width: 80px; }
.noir-fa-wl-bar {
  display: flex; gap: 3px; justify-content: center; margin-bottom: 4px;
}
.noir-fa-wl-seg {
  width: 14px; height: 6px; border-radius: 3px;
  background: var(--noir-hair);
}
.noir-fa-wl-seg.is-active { background: var(--noir-orange); }
.noir-fa-wl-seg.is-upcoming { background: var(--noir-butter, #fde68a); }
.noir-fa-wl-lbl {
  font-size: 10px; color: var(--noir-muted); display: flex; gap: 6px;
  justify-content: center;
}
/* Assign button */
.noir-fa-cand-actions {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  min-width: 90px;
}
.noir-btn-assign {
  padding: 6px 14px; border-radius: var(--r-sm); font-size: 12px;
  font-weight: 600; cursor: pointer; border: 1.5px solid var(--noir-ink);
  background: var(--noir-ink); color: var(--noir-paper);
  transition: all var(--dur-fast); white-space: nowrap;
}
.noir-btn-assign:hover { background: var(--noir-orange); border-color: var(--noir-orange); }
.noir-btn-assign--assigned {
  background: transparent; color: var(--st-success-fg, #166534);
  border-color: var(--st-success-fg, #166534); cursor: default;
}
.noir-btn-assign--full {
  background: transparent; color: var(--noir-muted);
  border-color: var(--noir-hair); cursor: default;
}
.noir-fa-cand-profile {
  font-size: 11px; color: var(--noir-muted); text-decoration: none;
}
.noir-fa-cand-profile:hover { color: var(--noir-orange); }

/* Inline offer form (shown when .noir-fa-offer-open on card) */
.noir-fa-offer-form {
  display: none; grid-column: 1 / -1;
  padding: 10px 14px 12px; border-top: 1px solid var(--noir-hair);
  background: var(--noir-paper-2); border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.noir-fa-cand.noir-fa-offer-open .noir-fa-offer-form { display: block; }
.noir-fa-offer-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.noir-fa-offer-label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--noir-muted);
}
.noir-fa-offer-input {
  padding: 6px 10px; border: 1.5px solid var(--noir-line); border-radius: var(--r-sm);
  font-size: 13px; width: 110px; background: #fff;
  font-family: var(--noir-sans);
}
.noir-fa-offer-input:focus { outline: none; border-color: var(--noir-orange); }
.noir-fa-offer-role { width: 150px; }
.noir-fa-offer-lead-label {
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  cursor: pointer; color: var(--noir-ink-2);
  padding: 2px 0; user-select: none;
}
.noir-fa-offer-lead-label input[type=checkbox] { accent-color: var(--noir-orange); width: 15px; height: 15px; }
.noir-fa-offer-send {
  padding: 7px 18px; background: var(--noir-orange); color: #fff;
  border: none; border-radius: var(--r-pill); font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; margin-left: auto;
  transition: background var(--dur-fast);
}
.noir-fa-offer-send:hover { background: #b8300b; }

/* Assigned panel */
.noir-fa-assigned {
  background: var(--noir-paper); border: 1px solid var(--noir-hair);
  border-radius: var(--r-md); padding: 20px; position: sticky; top: 80px;
}
.noir-fa-assigned h4 {
  font-family: var(--noir-serif); font-size: 20px; font-weight: 500;
  margin: 0 0 14px;
}
.noir-fa-assigned h4 em { font-style: normal; color: var(--noir-orange); font-weight: 600; }
.noir-fa-assigned-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.noir-fa-assigned-row {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 10px; padding: 10px 12px;
  background: var(--noir-paper-2); border-radius: 10px; align-items: center;
}
.noir-fa-assigned-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--noir-ink); color: var(--noir-paper);
  display: grid; place-items: center;
  font-family: var(--noir-serif); font-size: 12px; font-weight: 500;
  overflow: hidden; flex-shrink: 0;
}
.noir-fa-assigned-nm { font-weight: 600; font-size: 14px; }
.noir-fa-lead-pill {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: var(--noir-orange); color: #fff; font-size: 10px;
  font-weight: 600; margin-left: 5px; vertical-align: middle;
}
.noir-fa-role-pill {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  background: var(--noir-paper-2); color: var(--noir-ink-2); font-size: 10px;
  font-weight: 600; margin-left: 5px; vertical-align: middle;
  border: 1px solid var(--noir-line);
}
.noir-fa-assigned-when {
  font-size: 11px; color: var(--noir-muted); text-transform: uppercase;
  letter-spacing: .06em; margin-top: 1px;
}
.noir-fa-assigned-x {
  background: none; border: none; cursor: pointer; color: var(--noir-muted);
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  transition: all var(--dur-fast); font-size: 13px; padding: 0;
}
.noir-fa-assigned-x:hover { background: #F5C2BD; color: #7A1F12; }
.noir-fa-confirm {
  font-size: 12px; color: var(--noir-muted); line-height: 1.55;
  border-top: 1px dashed var(--noir-hair); padding-top: 12px; margin-top: 4px;
}
.noir-fa-confirm strong { color: var(--noir-ink); display: block; margin-bottom: 4px; font-size: 13px; }
.noir-btn-send-offers {
  display: block; width: 100%; margin-top: 10px;
  padding: 10px 16px; background: var(--noir-orange); color: #fff;
  border: none; border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
  text-align: center; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast);
}
.noir-btn-send-offers:hover { background: #b8300b; color: #fff; }
.noir-fa-assigned-empty {
  padding: 20px; text-align: center;
  background: var(--noir-paper-2); border-radius: 10px;
  color: var(--noir-muted); font-size: 13px; line-height: 1.55;
}

/* ── Brief docs & notes panel ─────────────────────────────── */
.noir-fa-docs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 24px 20px;
  padding: 20px;
  background: var(--noir-paper-2);
  border-radius: var(--r-md);
  border: 1px solid var(--noir-hair);
}
@media (max-width: 680px) { .noir-fa-docs { grid-template-columns: 1fr; } }
.noir-fa-docs-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--noir-muted); margin-bottom: 10px;
}
.noir-fa-docs-head svg { flex-shrink: 0; }
.noir-fa-docs-textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; font-size: 13px; line-height: 1.6;
  background: var(--noir-paper); color: var(--noir-ink);
  border: 1px solid var(--noir-line); border-radius: var(--r-sm);
  resize: vertical; font-family: var(--noir-sans);
  transition: border-color var(--dur-fast);
}
.noir-fa-docs-textarea:focus { outline: none; border-color: var(--noir-orange); }
.noir-fa-docs-save {
  margin-top: 8px;
  padding: 7px 16px; font-size: 12px; font-weight: 600;
  background: var(--noir-ink); color: var(--noir-paper);
  border: none; border-radius: var(--r-sm); cursor: pointer;
  transition: opacity var(--dur-fast);
}
.noir-fa-docs-save:hover { opacity: .78; }

/* File list */
.noir-fa-file-list {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.noir-fa-file-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--noir-paper); border: 1px solid var(--noir-hair);
  border-radius: var(--r-sm); padding: 7px 10px;
  font-size: 12px;
}
.noir-fa-file-name {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--noir-ink); text-decoration: none;
}
.noir-fa-file-name:hover { color: var(--noir-orange); text-decoration: underline; }
.noir-fa-file-size { color: var(--noir-muted); font-size: 11px; flex-shrink: 0; }
.noir-fa-file-del {
  background: none; border: none; color: var(--noir-muted);
  cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 4px;
  flex-shrink: 0; line-height: 1; transition: color var(--dur-fast), background var(--dur-fast);
}
.noir-fa-file-del:hover { color: #d33; background: #fee2e2; }

/* Upload zone */
.noir-fa-upload-form { display: flex; gap: 8px; align-items: stretch; }
.noir-fa-upload-zone {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1.5px dashed var(--noir-line);
  border-radius: var(--r-sm); cursor: pointer; font-size: 12px;
  color: var(--noir-muted); background: var(--noir-paper);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.noir-fa-upload-zone:hover,
.noir-fa-upload-zone.is-dragover {
  border-color: var(--noir-orange); color: var(--noir-orange);
}
.noir-fa-upload-zone svg { flex-shrink: 0; }
.noir-fa-upload-btn {
  padding: 0 14px; font-size: 12px; font-weight: 600;
  background: var(--noir-orange); color: #fff;
  border: none; border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--dur-fast); white-space: nowrap;
}
.noir-fa-upload-btn:disabled { background: var(--noir-hair); color: var(--noir-muted); cursor: default; }
.noir-fa-upload-btn:not(:disabled):hover { background: #b8300b; }

/* ── Creative search + filter chips ───────────────────────── */
.noir-fa-filter-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0 8px;
}
.noir-fa-search-input {
  flex: 1; min-width: 160px;
  padding: 8px 12px; font-size: 13px;
  background: var(--noir-paper); color: var(--noir-ink);
  border: 1px solid var(--noir-line); border-radius: var(--r-pill);
  outline: none; transition: border-color var(--dur-fast);
}
.noir-fa-search-input:focus { border-color: var(--noir-orange); }
.noir-fa-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.noir-fa-chip {
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--noir-line); border-radius: var(--r-pill);
  background: var(--noir-paper); color: var(--noir-muted);
  cursor: pointer; transition: all var(--dur-fast);
}
.noir-fa-chip:hover { border-color: var(--noir-ink); color: var(--noir-ink); }
.noir-fa-chip.is-active {
  background: var(--noir-ink); border-color: var(--noir-ink);
  color: var(--noir-paper);
}

/* ── Gig Assignment — Mobile ──────────────────────────────── */
@media (max-width: 600px) {

  /* Panel padding: tighter on small screens */
  #noir-section-gig-assignment .noir-dash-panel-head { padding: 16px 16px 12px; }

  /* Brief picker toolbar: full-width stacked */
  .noir-fa-toolbar { padding: 12px 16px 8px; gap: 10px; }
  .noir-fa-jobpicker { flex-direction: column; align-items: stretch; gap: 6px; }
  .noir-fa-jobpicker label { font-size: 10px; }
  .noir-fa-jobpicker select { width: 100%; }
  #noir-section-gig-assignment > .noir-dash-panel > p { padding: 0 16px; margin-bottom: 12px; }

  /* Brief card: collapse 3-col → stacked */
  .noir-fa-brief {
    margin: 0 16px 16px;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    padding: 16px;
    gap: 10px 12px;
  }
  .noir-fa-brief-logo { width: 40px; height: 40px; font-size: 14px; border-radius: 8px; }
  .noir-fa-brief-body { grid-column: 2; }
  .noir-fa-brief-ask {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center;
    text-align: left; gap: 10px; flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; margin-top: 2px;
  }
  .noir-fa-brief-title { font-size: 17px; }

  /* Docs panel: full-width, tighter padding, single column already at 680 */
  .noir-fa-docs { margin: 0 16px 16px; padding: 14px; gap: 14px; }
  .noir-fa-upload-form { flex-direction: column; gap: 8px; }
  .noir-fa-upload-zone { width: 100%; box-sizing: border-box; }
  .noir-fa-upload-btn { width: 100%; padding: 10px; }

  /* Grid: already stacks at 860px — just fix padding */
  .noir-fa-grid { padding: 0 16px 20px; gap: 16px; }

  /* Filter row: search full-width, chips scroll horizontal */
  .noir-fa-filter-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 0; }
  .noir-fa-search-input { width: 100%; box-sizing: border-box; }
  .noir-fa-filter-chips {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; scrollbar-width: none;
  }
  .noir-fa-filter-chips::-webkit-scrollbar { display: none; }
  .noir-fa-chip { white-space: nowrap; flex-shrink: 0; }

  /* Candidate cards: avatar+name top row, workload+actions full-width below */
  .noir-fa-cand {
    grid-template-columns: 40px 1fr;
    gap: 8px 12px;
    padding: 12px 14px;
  }
  .noir-fa-cand-av { width: 40px; height: 40px; font-size: 13px; }
  .noir-fa-cand-workload {
    grid-column: 1 / -1;
    min-width: 0; text-align: left;
    display: flex; align-items: center; gap: 10px;
  }
  .noir-fa-cand-workload .noir-fa-wl-bar { margin-bottom: 0; flex-shrink: 0; }
  .noir-fa-cand-workload .noir-fa-wl-lbl { justify-content: flex-start; }
  .noir-fa-cand-actions {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center; justify-content: flex-start;
    min-width: 0; gap: 8px;
  }
  .noir-btn-assign { flex: 1; text-align: center; padding: 8px 12px; font-size: 13px; }
  .noir-fa-cand-profile { font-size: 12px; }

  /* Assigned panel: tighter on mobile */
  .noir-fa-assigned { padding: 14px; }
  .noir-fa-assigned h4 { font-size: 18px; margin-bottom: 10px; }
  .noir-fa-assigned-row { padding: 8px 10px; gap: 8px; }
  .noir-fa-assigned-nm { font-size: 13px; }
  .noir-fa-confirm { font-size: 12px; }

  /* Success notices: tighter margin */
  #noir-section-gig-assignment .noir-dash-panel > div[style*="success"] { margin: 0 16px 10px; }
}

/* Tablet: brief card 3→2 col, keep brief-ask visible */
@media (min-width: 601px) and (max-width: 860px) {
  .noir-fa-brief {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 14px;
  }
  .noir-fa-brief-ask {
    grid-column: 1 / -1;
    flex-direction: row; text-align: left; gap: 12px;
    border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; margin-top: 4px;
  }
  .noir-fa-grid { padding: 0 20px 20px; }
  .noir-fa-docs  { margin: 0 20px 16px; }
  /* Candidate cards at tablet: drop workload+actions to full-width rows */
  .noir-fa-cand {
    grid-template-columns: 44px 1fr;
    gap: 8px 12px;
  }
  .noir-fa-cand-workload {
    grid-column: 1 / -1; min-width: 0; text-align: left;
    display: flex; align-items: center; gap: 10px;
  }
  .noir-fa-cand-workload .noir-fa-wl-bar { margin-bottom: 0; flex-shrink: 0; }
  .noir-fa-cand-workload .noir-fa-wl-lbl { justify-content: flex-start; }
  .noir-fa-cand-actions {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center; justify-content: flex-start;
    min-width: 0; gap: 8px;
  }
  .noir-btn-assign { flex: 1; text-align: center; }
}
.noir-fa-hint {
  font-size: 12px; color: var(--noir-muted);
  margin: 0 24px 16px; line-height: 1.55;
}
@media (max-width: 600px) { .noir-fa-hint { margin: 0 16px 12px; } }

/* ── Invoicing section redesign ──────────────────────────── */
.noir-inv-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0; flex-wrap: wrap; gap: 12px;
}
.noir-inv-title { font-family: var(--noir-serif); font-size: 26px; font-weight: 500; margin: 0; }
.noir-inv-title em { font-style: normal; color: var(--noir-orange); }
.noir-inv-tabs { display: flex; gap: 0; }
.noir-inv-tab {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--noir-muted); text-decoration: none; padding: 6px 14px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.noir-inv-tab.is-active { color: var(--noir-ink); border-bottom-color: var(--noir-ink); }
.noir-inv-tab:hover:not(.is-active) { color: var(--noir-ink-2); }

/* Workflow steps */
.noir-inv-workflow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  padding: 14px 24px; background: var(--noir-paper-2);
  border-top: 1px solid var(--noir-hair); border-bottom: 1px solid var(--noir-hair);
  margin-top: 16px;
}
.noir-inv-step {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--noir-muted); font-weight: 600;
}
.noir-inv-step-arrow { color: var(--noir-hair); font-size: 12px; }

/* Stage tabs with counts */
.noir-inv-stage-tabs {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid var(--noir-hair); padding: 0 24px;
}
.noir-inv-stab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--noir-muted);
  text-decoration: none; padding: 12px 14px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.noir-inv-stab.is-active { color: var(--noir-ink); border-bottom-color: var(--noir-orange); }
.noir-inv-stab:hover:not(.is-active) { color: var(--noir-ink-2); }
.noir-inv-stab-count {
  background: var(--noir-orange); color: #fff;
  border-radius: 999px; font-size: 10px; padding: 1px 6px;
  font-weight: 700; line-height: 1.4;
}

/* Booking list */
.noir-inv-list { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 0; }
.noir-inv-row {
  display: grid;
  grid-template-columns: 100px 1fr auto auto auto;
  gap: 12px; padding: 14px 16px;
  align-items: center; text-decoration: none; color: var(--noir-ink);
  border: 1px solid transparent; border-radius: var(--r-md); margin-top: 6px;
  background: var(--noir-paper); transition: border-color var(--dur-fast), background var(--dur-fast);
}
.noir-inv-row:hover { border-color: var(--noir-line); background: var(--noir-paper-2); }
.noir-inv-row.is-selected { border-color: var(--noir-orange); background: #fff8f6; }
.noir-inv-ref {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--noir-muted); font-weight: 600; font-family: var(--noir-sans);
}
.noir-inv-info { min-width: 0; }
.noir-inv-info strong { display: block; font-size: 14px; font-weight: 600; }
.noir-inv-info span { font-size: 12px; color: var(--noir-muted); }
.noir-inv-amount { text-align: right; }
.noir-inv-amount-lbl { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; color: var(--noir-muted); margin-bottom: 2px; }
.noir-inv-amount strong { font-size: 16px; font-weight: 700; }
.noir-inv-ago { font-size: 10px; color: var(--noir-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }

/* Inline invoice panel */
.noir-inv-panel {
  margin: -2px 0 8px; padding: 24px;
  border: 1px solid var(--noir-orange); border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--noir-paper);
}
.noir-inv-panel-head { margin-bottom: 20px; }
.noir-inv-panel-title {
  font-family: var(--noir-serif); font-size: 22px; font-weight: 500; margin-bottom: 4px;
}
.noir-inv-panel-title em { font-style: normal; color: var(--noir-orange); }
.noir-inv-panel-meta {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--noir-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.noir-inv-panel-empty {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.noir-inv-panel-empty-info .noir-inv-panel-title { font-size: 18px; }

/* BILL TO / PROJECT columns */
.noir-inv-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 20px;
  padding-bottom: 20px; border-bottom: 1px solid var(--noir-hair);
}
.noir-inv-form-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--noir-muted); font-weight: 700; margin-bottom: 8px;
}
.noir-inv-form-val { font-size: 13px; line-height: 1.6; }
.noir-inv-form-dates {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  font-size: 13px; line-height: 1.8; margin-bottom: 20px;
  padding-bottom: 20px; border-bottom: 1px solid var(--noir-hair);
}

/* Line items table */
.noir-inv-items-table {
  width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 0;
}
.noir-inv-items-table thead th {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--noir-muted); font-weight: 700; padding: 8px 12px;
  border-bottom: 1px solid var(--noir-hair); text-align: left;
}
.noir-inv-items-table thead th:nth-child(2),
.noir-inv-items-table thead th:nth-child(3),
.noir-inv-items-table thead th:nth-child(4) { text-align: right; }
.noir-inv-items-table tbody tr { border-bottom: 1px solid var(--noir-hair); }
.noir-inv-items-table tbody td { padding: 12px; vertical-align: middle; }
.noir-inv-items-table tbody td:nth-child(2),
.noir-inv-items-table tbody td:nth-child(3),
.noir-inv-items-table tbody td:nth-child(4) { text-align: right; }
.noir-inv-item-del {
  background: none; border: none; color: var(--noir-muted);
  cursor: pointer; font-size: 12px; padding: 4px 6px;
  border-radius: 4px; transition: all var(--dur-fast);
}
.noir-inv-item-del:hover { color: #d33; background: #fee2e2; }

/* Add line item */
.noir-inv-add-wrap { padding: 12px 12px; border-bottom: 1px solid var(--noir-hair); }
.noir-inv-add-toggle {
  background: none; border: none; color: var(--noir-orange); font-size: 13px;
  font-weight: 600; cursor: pointer; padding: 0;
}
.noir-inv-add-toggle:hover { text-decoration: underline; }
.noir-inv-add-form {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px;
}
.noir-inv-add-input {
  padding: 8px 10px; border: 1px solid var(--noir-line); border-radius: var(--r-sm);
  font-size: 13px; background: var(--noir-paper); color: var(--noir-ink);
}
.noir-inv-add-desc { flex: 1; min-width: 180px; }
.noir-inv-add-qty { width: 60px; }
.noir-inv-add-price { width: 110px; }
.noir-inv-btn-sm {
  padding: 8px 16px; background: var(--noir-ink); color: var(--noir-paper);
  border: none; border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}

/* Totals */
.noir-inv-totals {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 16px 12px; gap: 4px;
}
.noir-inv-totals-row {
  display: flex; justify-content: space-between; width: 280px;
  font-size: 12px; color: var(--noir-muted);
}
.noir-inv-totals-row span:first-child { color: var(--noir-muted); }
.noir-inv-totals-row span:last-child { text-align: right; min-width: 80px; }
.noir-inv-totals-total {
  display: flex; justify-content: space-between; width: 280px;
  font-size: 20px; font-weight: 700; color: var(--noir-ink);
  border-top: 1px solid var(--noir-line); padding-top: 10px; margin-top: 6px;
}
.noir-inv-totals-total span:first-child { font-family: var(--noir-serif); }
.noir-inv-totals-total span:last-child { text-align: right; min-width: 100px; }

/* Booking brief block */
.noir-inv-brief {
  border: 1px solid var(--noir-hair); border-radius: var(--r-sm);
  padding: 14px 16px; margin: 16px 0; background: var(--noir-paper-2);
}
.noir-inv-brief-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--noir-muted); margin-bottom: 10px;
}
.noir-inv-brief-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
}
.noir-inv-brief-item { font-size: 12px; line-height: 1.5; }
.noir-inv-brief-item strong { display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--noir-muted); font-weight: 600; margin-bottom: 1px; }
.noir-inv-brief-desc {
  grid-column: 1 / -1; font-size: 13px; line-height: 1.6;
  color: var(--noir-ink-2); border-top: 1px solid var(--noir-hair);
  padding-top: 10px; margin-top: 6px; white-space: pre-wrap;
}

/* Action buttons */
.noir-inv-actions {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--noir-hair); margin-top: 8px;
}
.noir-inv-actions form { display: contents; }
.noir-inv-btn-primary {
  padding: 10px 20px; background: var(--noir-orange); color: #fff;
  border: none; border-radius: var(--r-pill); font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: background var(--dur-fast);
  white-space: nowrap;
}
.noir-inv-btn-primary:hover { background: #b8300b; }
.noir-inv-btn-outline {
  padding: 10px 20px; background: transparent; color: var(--noir-ink);
  border: 1.5px solid var(--noir-line); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: border-color var(--dur-fast); white-space: nowrap;
}
.noir-inv-btn-outline:hover { border-color: var(--noir-ink); }
.noir-inv-btn-danger {
  padding: 10px 20px; background: transparent; color: #c0392b;
  border: 1.5px solid #fca5a5; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: all var(--dur-fast);
}
.noir-inv-btn-danger:hover { background: #fee2e2; border-color: #c0392b; }

/* Activity log */
.noir-inv-activity {
  padding: 16px 0; border-top: 1px solid var(--noir-hair); margin-top: 8px;
}
.noir-inv-activity-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--noir-muted); font-weight: 700; margin-bottom: 12px;
}
.noir-inv-activity-row {
  display: flex; gap: 12px; align-items: flex-start; padding: 8px 0;
  border-bottom: 1px solid var(--noir-hair);
}
.noir-inv-activity-row:last-child { border-bottom: none; }
.noir-inv-activity-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--noir-orange); flex-shrink: 0; margin-top: 5px;
}
.noir-inv-activity-title { font-size: 13px; font-weight: 500; }
.noir-inv-activity-meta { font-size: 11px; color: var(--noir-muted); margin-top: 1px; }

/* Mobile */
@media (max-width: 600px) {
  .noir-inv-head { padding: 16px 16px 0; }
  .noir-inv-tabs { gap: 0; overflow-x: auto; flex-wrap: nowrap; }
  .noir-inv-tab { padding: 6px 10px; font-size: 10px; }
  .noir-inv-stage-tabs { padding: 0 12px; overflow-x: auto; flex-wrap: nowrap; }
  .noir-inv-list { padding: 0 12px 16px; }
  .noir-inv-row { grid-template-columns: 80px 1fr; gap: 8px; padding: 12px; }
  .noir-inv-amount, .noir-inv-ago, .noir-inv-row > .noir-pill { display: none; }
  .noir-inv-panel { padding: 16px; }
  .noir-inv-form-grid, .noir-inv-form-dates { grid-template-columns: 1fr; gap: 12px; }
  .noir-inv-actions { gap: 8px; }
  .noir-inv-btn-primary, .noir-inv-btn-outline, .noir-inv-btn-danger { padding: 8px 14px; font-size: 12px; }
}

/* ── Projects list redesign ── */
.noir-proj-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 24px 24px 0; margin-bottom: 20px;
}
.noir-proj-title {
  font-family: var(--noir-serif); font-size: 28px; font-weight: 500; margin: 0;
}
.noir-proj-title em { font-style: normal; color: var(--noir-orange); }
.noir-proj-head-sub {
  font-size: 10px; letter-spacing: .12em; font-weight: 700;
  color: var(--noir-muted); text-transform: uppercase;
}

/* KPI cards */
.noir-proj-kpis {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
  padding: 0 24px 20px;
}
.noir-proj-kpi {
  background: var(--noir-paper); border: 1px solid var(--noir-hair);
  border-radius: var(--r-md); padding: 18px 20px;
}
.noir-proj-kpi-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--noir-muted); margin-bottom: 6px;
}
.noir-proj-kpi-num {
  font-family: var(--noir-serif); font-size: 32px; font-weight: 500;
  line-height: 1; margin-bottom: 4px;
}
.noir-proj-kpi-sub { font-size: 11px; color: var(--noir-muted); }

/* Filter tabs */
.noir-proj-filter-tabs {
  display: flex; gap: 0; padding: 0 24px;
  border-bottom: 1px solid var(--noir-hair); margin-bottom: 8px;
}
.noir-proj-ftab {
  padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--noir-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.noir-proj-ftab.is-active { color: var(--noir-ink); border-bottom-color: var(--noir-ink); }
.noir-proj-ftab:hover:not(.is-active) { color: var(--noir-ink-2); }
.noir-proj-ftab-count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--noir-orange);
  color: #fff; font-size: 9px; font-weight: 700; margin-left: 5px;
}

/* Project list */
.noir-proj-list { display: flex; flex-direction: column; gap: 0; }

.noir-proj-row {
  border-bottom: 1px solid var(--noir-hair);
  border-left: 3px solid transparent;
  padding: 18px 24px; cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.noir-proj-row:hover { background: var(--noir-paper-2); }
.noir-proj-row--freelance { border-left-color: var(--noir-orange); }
.noir-proj-row--contract  { border-left-color: var(--noir-plum); }
.noir-proj-row--booking   { border-left-color: var(--noir-sky); }

/* Row top: badges + title + meta */
.noir-proj-row-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.noir-proj-ref {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--noir-muted); font-family: var(--noir-sans);
}
.noir-proj-type-badge {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: var(--r-pill); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid;
}
.noir-proj-type-badge--freelance { color: var(--noir-orange); border-color: var(--noir-orange); background: transparent; }
.noir-proj-type-badge--contract  { color: var(--noir-plum);   border-color: var(--noir-plum);   background: transparent; }
.noir-proj-type-badge--booking   { color: var(--noir-sky);    border-color: var(--noir-sky);    background: transparent; }
.noir-proj-row-name {
  font-family: var(--noir-serif); font-size: 18px; font-weight: 500;
  margin-bottom: 3px; color: var(--noir-ink);
}
.noir-proj-row-meta { font-size: 12px; color: var(--noir-muted); margin-bottom: 14px; }

/* Row bottom: crew + controls */
.noir-proj-row-bottom {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

/* Crew section */
.noir-proj-crew { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.noir-proj-crew-lead { display: flex; align-items: center; gap: 8px; }
.noir-proj-av {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--noir-ink); color: var(--noir-paper);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  font-family: var(--noir-serif); flex-shrink: 0; overflow: hidden;
}
.noir-proj-av--sm { width: 26px; height: 26px; font-size: 9px; border: 2px solid var(--noir-paper); margin-left: -8px; }
.noir-proj-lead-name { font-size: 13px; font-weight: 600; }
.noir-proj-lead-badge {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  background: var(--noir-orange); color: #fff; font-size: 9px; font-weight: 700;
  letter-spacing: .05em; vertical-align: middle;
}
.noir-proj-role-lbl {
  font-size: 11px; color: var(--noir-muted); font-style: italic;
}
.noir-proj-crew-extra { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.noir-proj-crew-more { font-size: 11px; color: var(--noir-muted); }
.noir-proj-crew-count { font-size: 12px; color: var(--noir-muted); margin-left: 4px; }
.noir-proj-no-crew { font-size: 12px; color: var(--noir-muted); flex: 1; }

/* Status select dropdowns */
.noir-proj-status-form { display: inline-block; }
.noir-proj-status-sel {
  appearance: none; -webkit-appearance: none;
  padding: 6px 28px 6px 12px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; border: none; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff' opacity='.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  font-family: var(--noir-sans);
}
/* Project status colors */
.noir-proj-status-sel--planning    { background-color: #d4d0c8; color: #3d3a30; }
.noir-proj-status-sel--in_progress { background-color: #c0392b; color: #fff; }
.noir-proj-status-sel--completed   { background-color: #2d6a4f; color: #fff; }
.noir-proj-status-sel--cancelled   { background-color: var(--noir-muted); color: #fff; }
/* Payment status colors */
.noir-proj-pay-sel--pending-payment { background-color: #e8a87c; color: #4a2800; }
.noir-proj-pay-sel--pending-balance { background-color: #e8c97c; color: #4a3000; }
.noir-proj-pay-sel--paid            { background-color: #2d6a4f; color: #fff; }
.noir-proj-pay-sel--cancelled       { background-color: var(--noir-muted); color: #fff; }

/* Amount + progress */
.noir-proj-amount { min-width: 140px; }
.noir-proj-amount-nums { display: flex; align-items: baseline; gap: 2px; margin-bottom: 5px; }
.noir-proj-paid { font-size: 14px; font-weight: 700; font-family: var(--noir-serif); }
.noir-proj-total { font-size: 11px; color: var(--noir-muted); }
.noir-proj-bar {
  height: 4px; background: var(--noir-hair); border-radius: 2px; overflow: hidden;
}
.noir-proj-bar-fill {
  height: 100%; background: var(--noir-orange); border-radius: 2px;
  transition: width var(--dur-med);
}

/* Mobile */
@media (max-width: 860px) {
  .noir-proj-kpis { grid-template-columns: repeat(2,1fr); }
  .noir-proj-row-bottom { gap: 10px; }
}
@media (max-width: 600px) {
  .noir-proj-kpis { grid-template-columns: 1fr 1fr; }
  .noir-proj-head { padding: 16px 16px 0; }
  .noir-proj-filter-tabs { padding: 0 12px; overflow-x: auto; }
  .noir-proj-row { padding: 14px 16px; }
  .noir-proj-row-bottom { flex-direction: column; align-items: flex-start; }
  .noir-proj-status-sel { font-size: 10px; padding: 5px 24px 5px 10px; }
}

/* ══════════════════════════════════════════════════════════════════
   MEMBER DASHBOARD — MOBILE POLISH
   Scoped to body.page-noir-member-dashboard so nothing leaks.
   Three breakpoints:
     768px — tablet: already handled above (rail hidden, tab bar shown)
     600px — small tablet / large phone: start compressing content
     480px — phone: full single-column treatment
   ══════════════════════════════════════════════════════════════════ */

/* ── 600px: small tablet / large phone ─────────────────────────── */
@media (max-width: 600px) {
  /* Main content padding — give it more room, less side gutters */
  body.page-noir-member-dashboard .noir-dash-main {
    padding: 16px 14px 90px !important;
  }

  /* Top bar: stack greeting + action buttons neatly */
  body.page-noir-member-dashboard .noir-dash-topbar {
    flex-direction: column !important;
    gap: 10px !important;
  }
  body.page-noir-member-dashboard .noir-dash-greet {
    font-size: 24px !important;
  }
  body.page-noir-member-dashboard .noir-dash-sub {
    font-size: 13px !important;
  }
  body.page-noir-member-dashboard .noir-dash-topbar-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  /* Panel headings */
  body.page-noir-member-dashboard .noir-dash-main h3 {
    font-size: 20px !important;
  }

  /* KPI grid: 2-col is fine, shrink padding */
  body.page-noir-member-dashboard .noir-kpi-grid {
    gap: 8px !important;
  }
  body.page-noir-member-dashboard .noir-kpi {
    padding: 14px 14px 12px !important;
  }
  body.page-noir-member-dashboard .noir-kpi .num {
    font-size: 30px !important;
  }
  body.page-noir-member-dashboard .noir-kpi .lbl,
  body.page-noir-member-dashboard .noir-kpi .delta {
    font-size: 11px !important;
  }

  /* Profile completion checklist: 2-col minimum */
  body.page-noir-member-dashboard .noir-completion-checklist {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  body.page-noir-member-dashboard .noir-completion-check {
    font-size: 12px !important;
    padding: 7px 8px !important;
  }

  /* Assignment cards: ensure actions wrap properly */
  body.page-noir-member-dashboard .noir-assignment-card {
    padding: 14px !important;
  }
  body.page-noir-member-dashboard .noir-assignment-top {
    flex-direction: column !important;
    gap: 8px !important;
  }
  body.page-noir-member-dashboard .noir-assignment-actions {
    gap: 8px !important;
  }
  body.page-noir-member-dashboard .noir-assignment-actions .noir-btn {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* App row (recent activity): ensure text doesn't overflow */
  body.page-noir-member-dashboard .noir-app-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body.page-noir-member-dashboard .noir-app-info {
    flex: 1 !important;
    min-width: 0 !important;
  }
  body.page-noir-member-dashboard .noir-app-title {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Panels: tighter padding */
  body.page-noir-member-dashboard .noir-dash-panel {
    padding: 16px !important;
  }
  body.page-noir-member-dashboard .noir-dash-panel-head {
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 14px !important;
  }

  /* Skills grid: wrap nicely */
  body.page-noir-member-dashboard .noir-skill-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* Day pills: fit on one line on most phones */
  body.page-noir-member-dashboard .noir-day-pills {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  body.page-noir-member-dashboard .noir-day-pill {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 11px !important;
  }

  /* Pending banner: tighter */
  body.page-noir-member-dashboard .noir-pending-banner {
    margin: 0 0 14px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
    font-size: 13px !important;
  }

  /* Bills section table: horizontal scroll */
  body.page-noir-member-dashboard .noir-bill-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }
}

/* ── 480px: phone-first ─────────────────────────────────────────── */
@media (max-width: 480px) {
  body.page-noir-member-dashboard .noir-dash-main {
    padding: 12px 12px 88px !important;
  }

  /* Greeting shrinks further */
  body.page-noir-member-dashboard .noir-dash-greet {
    font-size: 21px !important;
  }

  /* KPI: 1-col on tiny screens to prevent number truncation */
  body.page-noir-member-dashboard .noir-kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  body.page-noir-member-dashboard .noir-kpi--featured {
    grid-column: 1 / -1 !important;
  }

  /* Section headings */
  body.page-noir-member-dashboard .noir-dash-main h3 {
    font-size: 18px !important;
    margin-bottom: 16px !important;
  }

  /* Profile form: all rows single-column */
  body.page-noir-member-dashboard .noir-row-2 {
    grid-template-columns: 1fr !important;
  }

  /* Skills / experience checkbox grid: 2-col is still readable */
  body.page-noir-member-dashboard .noir-skill-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.page-noir-member-dashboard .noir-check {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  /* Profile completion: 1-col on tiny phones */
  body.page-noir-member-dashboard .noir-completion-checklist {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Action buttons in header: full-width stacked */
  body.page-noir-member-dashboard .noir-dash-topbar-actions .noir-btn {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    padding: 9px 12px !important;
  }

  /* Field tap targets: ensure 44px minimum height */
  body.page-noir-member-dashboard .noir-field input,
  body.page-noir-member-dashboard .noir-field select,
  body.page-noir-member-dashboard .noir-field textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    min-height: 44px !important;
  }
  body.page-noir-member-dashboard .noir-field textarea {
    min-height: 100px !important;
  }

  /* Buttons full-width in profile/cv/settings forms */
  body.page-noir-member-dashboard #noir-section-profile .noir-btn--primary,
  body.page-noir-member-dashboard #noir-section-cv .noir-btn--primary,
  body.page-noir-member-dashboard #noir-section-settings .noir-btn--primary {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Mobile topbar: tighter brand + bell */
  body.page-noir-member-dashboard .noir-dash-mobilebar {
    padding: 0 14px !important;
    height: 50px !important;
  }

  /* Assignment cards */
  body.page-noir-member-dashboard .noir-assignment-card {
    padding: 12px !important;
  }
  body.page-noir-member-dashboard .noir-assignment-title {
    font-size: 14px !important;
  }

  /* Inbox items */
  body.page-noir-member-dashboard .noir-inbox-item {
    padding: 10px 0 !important;
  }

  /* CV current panel */
  body.page-noir-member-dashboard .noir-cv-current {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Projects grid: single column */
  body.page-noir-member-dashboard .noir-proj-grid {
    grid-template-columns: 1fr !important;
  }

  /* Status filter tabs: horizontal scroll */
  body.page-noir-member-dashboard .noir-admin-status-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
    gap: 6px !important;
  }
  body.page-noir-member-dashboard .noir-admin-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
  }

  /* Panel head h3 + meta inline wrap */
  body.page-noir-member-dashboard .noir-dash-panel-head h3 {
    font-size: 16px !important;
  }
  body.page-noir-member-dashboard .noir-dash-panel-head .meta {
    font-size: 11px !important;
  }

  /* Overview pending offers: expiry text wrap */
  body.page-noir-member-dashboard .noir-assignment-expiry {
    font-size: 11px !important;
  }

  /* Day pills: ensure they don't overflow on very small screens */
  body.page-noir-member-dashboard .noir-day-pills {
    gap: 5px !important;
  }
  body.page-noir-member-dashboard .noir-day-pill {
    min-width: 38px !important;
    height: 38px !important;
    font-size: 11px !important;
  }

  /* Google Calendar card */
  body.page-noir-member-dashboard .noir-gcal-status {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   GLASS PILL FLOATING TAB BAR — Member / Employer / Trainee
   Uses position:fixed so it floats over the page content,
   inset 10px from each side to create the floating pill look.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Main content: pad bottom to clear the floating pill */
  body.page-noir-member-dashboard .noir-dash-main,
  body.page-noir-employer-dashboard .noir-dash-main,
  body.page-noir-trainee-dashboard .noir-dash-main {
    padding-bottom: calc(max(env(safe-area-inset-bottom, 0px), 0px) + 100px) !important;
  }

  /* ── Member ── */
  body.page-noir-member-dashboard .noir-mobile-tabbar--member {
    position: fixed !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    border-radius: 20px !important;
    background: rgba(14, 11, 8, 0.82) !important;
    border-top: none !important;
    border: 1px solid rgba(244,240,232,.1) !important;
    box-shadow:
      0 8px 32px rgba(0,0,0,.6),
      0 2px 8px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    padding: 6px 6px calc(max(env(safe-area-inset-bottom, 0px), 2px) + 6px) !important;
    width: auto !important;
    overflow: hidden !important;
    transition: left .32s cubic-bezier(.34,1.1,.64,1),
                bottom .32s cubic-bezier(.34,1.1,.64,1),
                width .32s cubic-bezier(.34,1.1,.64,1),
                height .32s cubic-bezier(.34,1.1,.64,1),
                border-radius .32s cubic-bezier(.34,1.1,.64,1),
                padding .32s cubic-bezier(.34,1.1,.64,1);
  }
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab {
    flex: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 22px auto !important;
    justify-items: center !important;
    align-content: center !important;
    row-gap: 3px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 6px 4px 5px !important;
    min-width: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background .15s ease !important;
    box-shadow: none !important;
    outline: none !important;
  }
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab:active {
    background: rgba(244,240,232,.07) !important;
  }
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab .noir-mtab-ico {
    grid-row: 1 !important;
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    position: relative !important;
  }
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab .noir-mtab-lbl {
    grid-row: 2 !important;
    grid-column: 1 !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    color: rgba(244,240,232,.38) !important;
    font-size: 9px !important;
    font-family: var(--noir-sans, system-ui, sans-serif) !important;
    font-weight: 500 !important;
    letter-spacing: .03em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab .noir-mtab-ico svg {
    opacity: 1;
    color: rgba(244,240,232,.38);
  }
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab.is-active .noir-mtab-ico svg {
    opacity: 1;
    color: var(--noir-orange, #cb360f);
  }
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab.is-active .noir-mtab-ico svg path,
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab.is-active .noir-mtab-ico svg rect,
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab.is-active .noir-mtab-ico svg circle,
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab.is-active .noir-mtab-ico svg polyline,
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab.is-active .noir-mtab-ico svg polygon,
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab.is-active .noir-mtab-ico svg line,
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab.is-active .noir-mtab-ico svg ellipse {
    stroke: var(--noir-orange, #cb360f) !important;
  }
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab.is-active .noir-mtab-lbl {
    color: var(--noir-orange, #cb360f);
    font-weight: 700;
  }
  body.page-noir-member-dashboard .noir-mobile-tabbar--member .noir-mtab-badge {
    width: 6px !important;
    height: 6px !important;
    min-width: 0 !important;
    background: var(--noir-orange, #cb360f) !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(14,11,8,.9) !important;
    padding: 0 !important;
    font-size: 0 !important;
    top: -1px !important;
    right: -3px !important;
  }
  body.page-noir-member-dashboard .noir-mobile-tabbar--member [data-noir-burger] .noir-mtab-ico svg {
    color: rgba(244,240,232,.38);
  }
  body.page-noir-member-dashboard .noir-mobile-tabbar--member [data-noir-burger].is-active .noir-mtab-ico svg {
    color: var(--noir-orange, #cb360f);
  }

  /* ── Employer ── */
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer {
    position: fixed !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    border-radius: 20px !important;
    background: rgba(14, 11, 8, 0.82) !important;
    border-top: none !important;
    border: 1px solid rgba(244,240,232,.1) !important;
    box-shadow:
      0 8px 32px rgba(0,0,0,.6),
      0 2px 8px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    padding: 6px 6px calc(max(env(safe-area-inset-bottom, 0px), 2px) + 6px) !important;
    width: auto !important;
  }
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab {
    flex: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 22px auto !important;
    justify-items: center !important;
    align-content: center !important;
    row-gap: 3px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 6px 4px 5px !important;
    min-width: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background .15s ease !important;
    box-shadow: none !important;
    outline: none !important;
  }
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab:active {
    background: rgba(244,240,232,.07) !important;
  }
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab .noir-mtab-ico {
    grid-row: 1 !important;
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    position: relative !important;
  }
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab .noir-mtab-lbl {
    grid-row: 2 !important;
    grid-column: 1 !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    color: rgba(244,240,232,.38) !important;
    font-size: 9px !important;
    font-family: var(--noir-sans, system-ui, sans-serif) !important;
    font-weight: 500 !important;
    letter-spacing: .03em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab .noir-mtab-ico svg {
    opacity: 1;
    color: rgba(244,240,232,.38);
  }
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab.is-active .noir-mtab-ico svg {
    opacity: 1;
    color: var(--noir-orange, #cb360f);
  }
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab.is-active .noir-mtab-ico svg path,
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab.is-active .noir-mtab-ico svg rect,
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab.is-active .noir-mtab-ico svg circle,
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab.is-active .noir-mtab-ico svg polyline,
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab.is-active .noir-mtab-ico svg polygon,
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab.is-active .noir-mtab-ico svg line,
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab.is-active .noir-mtab-ico svg ellipse {
    stroke: var(--noir-orange, #cb360f) !important;
  }
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab.is-active .noir-mtab-lbl {
    color: var(--noir-orange, #cb360f);
    font-weight: 700;
  }
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer .noir-mtab-badge {
    width: 6px !important;
    height: 6px !important;
    min-width: 0 !important;
    background: var(--noir-orange, #cb360f) !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(14,11,8,.9) !important;
    padding: 0 !important;
    font-size: 0 !important;
    top: -1px !important;
    right: -3px !important;
  }
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer [data-noir-burger] .noir-mtab-ico svg {
    color: rgba(244,240,232,.38);
  }
  body.page-noir-employer-dashboard .noir-mobile-tabbar--employer [data-noir-burger].is-active .noir-mtab-ico svg {
    color: var(--noir-orange, #cb360f);
  }

  /* ── Trainee ── */
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee {
    position: fixed !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    border-radius: 20px !important;
    background: rgba(14, 11, 8, 0.82) !important;
    border-top: none !important;
    border: 1px solid rgba(244,240,232,.1) !important;
    box-shadow:
      0 8px 32px rgba(0,0,0,.6),
      0 2px 8px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    padding: 6px 6px calc(max(env(safe-area-inset-bottom, 0px), 2px) + 6px) !important;
    width: auto !important;
    overflow: hidden !important;
    transition: left .32s cubic-bezier(.34,1.1,.64,1),
                bottom .32s cubic-bezier(.34,1.1,.64,1),
                width .32s cubic-bezier(.34,1.1,.64,1),
                height .32s cubic-bezier(.34,1.1,.64,1),
                border-radius .32s cubic-bezier(.34,1.1,.64,1),
                padding .32s cubic-bezier(.34,1.1,.64,1);
  }
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab {
    flex: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 22px auto !important;
    justify-items: center !important;
    align-content: center !important;
    row-gap: 3px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 6px 4px 5px !important;
    min-width: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background .15s ease !important;
    box-shadow: none !important;
    outline: none !important;
  }
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab:active {
    background: rgba(244,240,232,.07) !important;
  }
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab .noir-mtab-ico {
    grid-row: 1 !important;
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    position: relative !important;
  }
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab .noir-mtab-lbl {
    grid-row: 2 !important;
    grid-column: 1 !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    color: rgba(244,240,232,.38) !important;
    font-size: 9px !important;
    font-family: var(--noir-sans, system-ui, sans-serif) !important;
    font-weight: 500 !important;
    letter-spacing: .03em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab .noir-mtab-ico svg {
    opacity: 1;
    color: rgba(244,240,232,.38);
  }
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab.is-active .noir-mtab-ico svg {
    opacity: 1;
    color: var(--noir-orange, #cb360f);
  }
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab.is-active .noir-mtab-ico svg path,
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab.is-active .noir-mtab-ico svg rect,
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab.is-active .noir-mtab-ico svg circle,
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab.is-active .noir-mtab-ico svg polyline,
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab.is-active .noir-mtab-ico svg polygon,
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab.is-active .noir-mtab-ico svg line,
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab.is-active .noir-mtab-ico svg ellipse {
    stroke: var(--noir-orange, #cb360f) !important;
  }
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab.is-active .noir-mtab-lbl {
    color: var(--noir-orange, #cb360f);
    font-weight: 700;
  }
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee .noir-mtab-badge {
    width: 6px !important;
    height: 6px !important;
    min-width: 0 !important;
    background: var(--noir-orange, #cb360f) !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(14,11,8,.9) !important;
    padding: 0 !important;
    font-size: 0 !important;
    top: -1px !important;
    right: -3px !important;
  }
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee [data-noir-burger] .noir-mtab-ico svg {
    color: rgba(244,240,232,.38);
  }
  body.page-noir-trainee-dashboard .noir-mobile-tabbar--trainee [data-noir-burger].is-active .noir-mtab-ico svg {
    color: var(--noir-orange, #cb360f);
  }


}

/* ═══════════════════════════════════════════════════════════
   BACKDROP + RAIL SLIDE-IN — Member / Employer / Trainee
   Gives non-admin dashboards the same drawer behaviour as admin.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  body.page-noir-member-dashboard .noir-dash-backdrop,
  body.page-noir-employer-dashboard .noir-dash-backdrop,
  body.page-noir-trainee-dashboard .noir-dash-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,15,15,.55) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 94 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
  }
  body.page-noir-member-dashboard .noir-dash-backdrop.is-active,
  body.page-noir-employer-dashboard .noir-dash-backdrop.is-active,
  body.page-noir-trainee-dashboard .noir-dash-backdrop.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Rail: make sure member/employer/trainee use same slide-in drawer as admin */
  body.page-noir-member-dashboard .noir-dash-rail,
  body.page-noir-employer-dashboard .noir-dash-rail,
  body.page-noir-trainee-dashboard .noir-dash-rail {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    width: 280px !important;
    z-index: 95 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 120px !important;
    transform: translateX(-110%) !important;
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.38s ease, visibility 0s linear 0.38s !important;
    visibility: hidden !important;
    box-shadow: none !important;
    will-change: transform !important;
  }
  body.page-noir-member-dashboard .noir-dash-shell.is-open > .noir-dash-rail,
  body.page-noir-employer-dashboard .noir-dash-shell.is-open > .noir-dash-rail,
  body.page-noir-trainee-dashboard .noir-dash-shell.is-open > .noir-dash-rail {
    transform: translateX(0) !important;
    box-shadow: 8px 0 48px rgba(0,0,0,.65) !important;
    visibility: visible !important;
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.38s ease, visibility 0s linear 0s !important;
  }

  /* Also hide the old top mobilebars on mobile */
  body.page-noir-member-dashboard .noir-dash-mobilebar,
  body.page-noir-member-dashboard .noir-mobilebar--tabmode {
    display: none !important;
  }
  body.page-noir-employer-dashboard .noir-dash-mobilebar {
    display: none !important;
  }
  body.page-noir-trainee-dashboard .noir-dash-mobilebar {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ASSIGNMENT CARDS — member dashboard redesign
   ═══════════════════════════════════════════════════════════ */

/* Section header */
.noir-v2 .noir-asgn-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--noir-line);
}
.noir-v2 .noir-asgn-header h3 {
  font-size: var(--t-h2);
  font-family: var(--noir-serif);
  font-weight: 600;
  margin: 0;
  color: var(--noir-ink);
}
.noir-v2 .noir-asgn-header h3 em { color: var(--noir-orange); font-style: normal; }
.noir-v2 .noir-asgn-meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--noir-muted);
  text-transform: uppercase;
}

/* Subsection (Active / Offer pending / Upcoming / Completed) */
.noir-v2 .noir-asgn-section { margin-bottom: var(--s-6); }
.noir-v2 .noir-asgn-sh {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.noir-v2 .noir-asgn-stitle {
  font-size: 20px;
  font-family: var(--noir-serif);
  font-weight: 600;
  color: var(--noir-ink);
}
.noir-v2 .noir-asgn-stitle em { color: var(--noir-orange); font-style: normal; }

/* Badges */
.noir-v2 .noir-asgn-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.noir-v2 .noir-asgn-badge--live { background: var(--st-success-bg); color: var(--st-success-fg); }
.noir-v2 .noir-asgn-badge--warn { background: #fff3e0; color: #b45309; }
.noir-v2 .noir-asgn-badge--neutral { background: var(--noir-paper-2); color: var(--noir-muted); border: 1px solid var(--noir-line); }
.noir-v2 .noir-live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--st-success-fg);
  animation: noir-pulse 1.8s ease-in-out infinite;
}
@keyframes noir-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.8); }
}

/* Card */
.noir-v2 .noir-acard {
  display: flex;
  gap: var(--s-4);
  background: var(--noir-paper);
  border: 1px solid var(--noir-line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-3);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.noir-v2 .noir-acard:hover { border-color: rgba(var(--noir-ink-rgb, 30,26,22), .25); box-shadow: var(--shadow-sm); }
.noir-v2 .noir-acard--active { border-left: 3px solid var(--noir-orange); }
.noir-v2 .noir-acard--offered { border-left: 3px solid #f59e0b; }
.noir-v2 .noir-acard--upcoming { border-left: 3px solid var(--noir-sky, #3b82f6); }
.noir-v2 .noir-acard--completed { border-left: 3px solid var(--noir-line); opacity: .8; }

/* Avatar */
.noir-v2 .noir-acard-av {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
  letter-spacing: .02em;
  font-family: var(--noir-sans);
}

/* Card body */
.noir-v2 .noir-acard-body { flex: 1; min-width: 0; }

/* Head row: title + countdown */
.noir-v2 .noir-acard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: 4px;
}
.noir-v2 .noir-acard-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.noir-v2 .noir-acard-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--noir-ink);
  line-height: 1.3;
}

/* Type pill (FREELANCE →) */
.noir-v2 .noir-atype-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--noir-ink);
  color: var(--noir-paper);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Lead pill */
.noir-v2 .noir-lead-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--noir-orange);
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Countdown block */
.noir-v2 .noir-acard-cd {
  flex-shrink: 0;
  text-align: right;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--noir-ink);
  font-family: var(--noir-sans);
}
.noir-v2 .noir-acard-cd span {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--noir-muted);
  margin-top: 2px;
}
.noir-v2 .noir-acard-cd--warn { color: #b45309; }
.noir-v2 .noir-acard-cd--done { font-size: 13px; color: var(--st-success-fg); margin-top: 4px; }

/* Sub-line: company · location · with X other */
.noir-v2 .noir-acard-sub {
  font-size: 12.5px;
  color: var(--noir-muted);
  margin-bottom: var(--s-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta pills row */
.noir-v2 .noir-acard-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s-3);
}
.noir-v2 .noir-acard-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--noir-paper-2);
  color: var(--noir-ink-2);
  border: 1px solid var(--noir-line);
  white-space: nowrap;
}
.noir-v2 .noir-acard-pill--money {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}

/* Actions row */
.noir-v2 .noir-acard-actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.noir-v2 .noir-acard-link {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--noir-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--dur-fast) var(--ease);
}
.noir-v2 .noir-acard-link:hover { color: var(--noir-ink); }

/* Brief expanded block */
.noir-v2 .noir-acard-brief {
  font-size: 13px;
  line-height: 1.65;
  color: var(--noir-ink-2);
  background: var(--noir-paper-2);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  white-space: pre-wrap;
}
.noir-v2 .noir-acard-brief-preview {
  font-size: 13px;
  color: var(--noir-muted);
  line-height: 1.55;
  margin: 0 0 var(--s-3);
}

/* Expiry note */
.noir-v2 .noir-acard-expiry-note {
  font-size: 11.5px;
  color: var(--noir-muted);
  font-style: italic;
  margin: 0;
}

/* Status update row */
.noir-v2 .noir-acard-status-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--noir-hair);
  margin-top: var(--s-3);
}
.noir-v2 .noir-acard-status-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--noir-muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.noir-v2 .noir-acard-status-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.noir-v2 .noir-acard-status-sel {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--noir-line);
  background: var(--noir-paper);
  color: var(--noir-ink);
  cursor: pointer;
  letter-spacing: .04em;
}
.noir-v2 .noir-acard-post-btn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--noir-ink);
  background: transparent;
  color: var(--noir-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.noir-v2 .noir-acard-post-btn:hover { background: var(--noir-ink); color: var(--noir-paper); }

/* Footer note */
.noir-v2 .noir-asgn-footer {
  font-size: 12px;
  color: var(--noir-muted);
  line-height: 1.6;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--noir-hair);
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .noir-v2 .noir-acard { flex-direction: row; gap: var(--s-3); padding: var(--s-4); }
  .noir-v2 .noir-acard-av { width: 40px; height: 40px; font-size: 13px; }
  .noir-v2 .noir-acard-title { font-size: 14px; }
  .noir-v2 .noir-acard-cd { font-size: 18px; }
  .noir-v2 .noir-acard-status-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .noir-v2 .noir-asgn-header { margin-bottom: var(--s-5); }
}

/* ═══════════════════════════════════════════════════════════
   PROJECT PREVIEW CARDS — member dashboard projects section
   ═══════════════════════════════════════════════════════════ */
.noir-v2 .noir-proj-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.noir-v2 .noir-proj-preview-card {
  border: 1px solid var(--noir-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--noir-paper);
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.noir-v2 .noir-proj-preview-card:hover {
  border-color: rgba(30,26,22,.25);
  box-shadow: var(--shadow-sm);
}
.noir-v2 .noir-proj-preview-img {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--noir-paper-2);
}
.noir-v2 .noir-proj-preview-img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--noir-muted);
}
.noir-v2 .noir-proj-preview-body {
  padding: var(--s-4);
}
.noir-v2 .noir-proj-preview-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--noir-ink);
  margin-bottom: var(--s-2);
}
.noir-v2 .noir-proj-preview-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--noir-ink-2);
  margin: var(--s-3) 0;
}
.noir-v2 .noir-proj-preview-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}
.noir-v2 .noir-proj-detail-btn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--noir-orange);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-transform: uppercase;
}
.noir-v2 .noir-proj-detail-btn:hover { color: var(--noir-ink); }
.noir-v2 .noir-proj-link-btn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--noir-muted);
  text-decoration: none;
  text-transform: uppercase;
}
.noir-v2 .noir-proj-link-btn:hover { color: var(--noir-ink); }
@media (max-width: 600px) {
  .noir-v2 .noir-proj-preview-grid { grid-template-columns: 1fr; }
  .noir-v2 .noir-proj-preview-img { height: 140px; }
}

/* ── PWA standalone layout fixes ───────────────────────────────────────
   JS adds class "noir-pwa" to <html> when navigator.standalone is true.
   Using html.noir-pwa gives us higher specificity than any other rule,
   so we can safely use hardcoded pixel values without fighting !important
   cascade conflicts. These values cover all modern iPhone notch/island heights.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Push dashboard content below the status bar / Dynamic Island.
     60px clears the tallest status bar (iPhone 14 Pro Dynamic Island ~54px + margin). */
  html.noir-pwa .noir-v2 .noir-dash-main {
    padding-top: 60px !important;
  }

  /* Float the nav bar above the home indicator with visible breathing room.
     40px = home indicator (~34px) + 6px gap. */
  html.noir-pwa .noir-mobile-tabbar {
    bottom: 40px !important;
    min-height: 60px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Ensure main content scrolls clear of the floating nav */
  html.noir-pwa body.page-noir-member-dashboard .noir-dash-main,
  html.noir-pwa body.page-noir-employer-dashboard .noir-dash-main,
  html.noir-pwa body.page-noir-trainee-dashboard .noir-dash-main {
    padding-bottom: 120px !important;
  }
}

/* ── Design A: Trainee Programs Section ─────────────────────────── */

.noir-prog-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--noir-muted);
  margin: 24px 0 12px;
  padding-left: 2px;
}

/* Program list cards */
.noir-prog-list-card {
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--noir-line);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.noir-prog-list-card:hover { border-color: var(--noir-orange); box-shadow: var(--shadow-sm); }
.noir-prog-list-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--noir-paper-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.noir-prog-list-body { flex: 1; min-width: 0; }
.noir-prog-list-title {
  font-size: 14px; font-weight: 600; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.noir-prog-list-meta { font-size: 12px; color: var(--noir-muted); }
.noir-prog-status {
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill);
  flex-shrink: 0; white-space: nowrap;
}
.noir-prog-status--enrolled { background: var(--st-success-bg); color: var(--st-success-fg); }
.noir-prog-status--pending  { background: var(--st-warn-bg);    color: var(--st-warn-fg); }
.noir-prog-status--open     { background: var(--noir-paper-2);  color: var(--noir-muted); }

/* Back button */
.noir-prog-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  color: var(--noir-muted); background: none; border: none;
  padding: 0; cursor: pointer; margin-bottom: 20px;
  font-family: inherit;
  transition: color var(--dur-fast);
}
.noir-prog-back:hover { color: var(--noir-ink); }

/* Program hero card */
.noir-prog-hero {
  background: var(--noir-ink);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.noir-prog-hero::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--noir-orange); opacity: .1;
}
.noir-prog-hero-eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--noir-orange); margin-bottom: 8px;
}
.noir-prog-hero-title {
  font-size: 22px; font-weight: 600;
  color: #F4F0E8; line-height: 1.2; margin-bottom: 10px;
}
.noir-prog-hero-desc {
  font-size: 13px; color: rgba(244,240,232,.6);
  line-height: 1.6; margin-bottom: 14px;
}
.noir-prog-hero-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.noir-prog-hero-pill {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(244,240,232,.1);
  color: rgba(244,240,232,.8);
  border: 1px solid rgba(244,240,232,.15);
}
.noir-prog-hero-pill--orange { background: var(--noir-orange); color: #fff; border-color: var(--noir-orange); }
.noir-prog-hero-pill--warn   { background: rgba(217,119,6,.2); color: #fbbf24; border-color: rgba(217,119,6,.3); }
.noir-prog-hero-pill--muted  { background: rgba(244,240,232,.07); color: rgba(244,240,232,.45); border-color: rgba(244,240,232,.1); }

/* Modules label */
.noir-prog-modules-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--noir-muted); margin-bottom: 12px; padding-left: 2px;
}

/* Module accordion card */
.noir-prog-module-card {
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--noir-line);
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow var(--dur-fast);
}
.noir-prog-module-card:hover { box-shadow: var(--shadow-sm); }
.noir-prog-module-header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  cursor: pointer; user-select: none;
}
.noir-prog-module-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--noir-paper-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: var(--noir-muted); flex-shrink: 0;
}
.noir-prog-module-info { flex: 1; min-width: 0; }
.noir-prog-module-title { font-size: 13px; font-weight: 600; color: var(--noir-ink); }
.noir-prog-module-meta { font-size: 11px; color: var(--noir-muted); margin-top: 2px; }
.noir-prog-module-chevron { font-size: 12px; color: var(--noir-muted); flex-shrink: 0; }
.noir-prog-module-body { border-top: 1px solid var(--noir-line); }

/* Material rows */
.noir-mat-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--noir-line);
  transition: background var(--dur-fast);
}
.noir-mat-row:last-child { border-bottom: none; }
.noir-mat-row:hover { background: var(--noir-paper); }
.noir-mat-icon {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.noir-mat-icon--link   { background: #EFF6FF; }
.noir-mat-icon--slides { background: #FFF7ED; }
.noir-mat-icon--pdf    { background: #FEF2F2; }
.noir-mat-icon--doc    { background: #F0FDF4; }
.noir-mat-icon--video  { background: #FDF2F8; }
.noir-mat-icon--audio  { background: #F5F3FF; }
.noir-mat-icon--file   { background: var(--noir-paper-2); }
.noir-mat-text { flex: 1; min-width: 0; }
.noir-mat-title {
  font-size: 13px; font-weight: 500; color: var(--noir-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.noir-mat-sub { font-size: 11px; color: var(--noir-muted); margin-top: 2px; }
.noir-mat-arrow {
  font-size: 20px; color: var(--noir-line);
  flex-shrink: 0; text-decoration: none; line-height: 1;
  transition: color var(--dur-fast);
}
.noir-mat-arrow:hover { color: var(--noir-orange); }

/* ═══════════════════════════════════════════════════════════════
   COMMUNITY
═══════════════════════════════════════════════════════════════ */

.noir-comm-shell {
  display: flex; flex-direction: column;
  height: calc(100vh - 140px);
  min-height: 500px;
  background: var(--noir-paper);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(0,0,0,.08);
}

/* Header */
.noir-comm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  background: var(--noir-paper);
  flex-shrink: 0;
}
.noir-comm-header-brand {
  display: flex; align-items: center; gap: 10px;
}
.noir-comm-pill-icon { flex-shrink: 0; }
.noir-comm-title {
  font-family: var(--noir-serif);
  font-size: 30px; font-weight: 700;
  color: var(--noir-ink); letter-spacing: -.5px;
}
.noir-comm-new-dm-btn { display: none; }

/* Tabs */
.noir-comm-tabs {
  display: flex; gap: 0;
  background: var(--noir-paper);
  flex-shrink: 0;
  padding: 0 20px;
  box-shadow: 0 1px 0 rgba(28,23,18,.07);
}
.noir-comm-tab {
  background: none; border: none; cursor: pointer;
  padding: 12px 0; margin-right: 24px;
  font-size: 13px; font-weight: 600;
  color: var(--noir-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  display: flex; align-items: center; gap: 6px;
}
.noir-comm-tab.is-active { color: var(--noir-ink); border-bottom-color: var(--noir-orange); }
.noir-comm-tab-badge {
  background: var(--noir-orange); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: var(--r-pill);
  min-width: 16px; text-align: center;
}

/* Body */
.noir-comm-body { flex: 1; overflow: hidden; position: relative; }
.noir-comm-view { height: 100%; overflow-y: auto; }

/* Channel / DM list rows */
.noir-comm-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--noir-muted);
  font-size: 13px;
}
.noir-comm-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px;
  margin: 2px 8px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast);
  position: relative;
}
.noir-comm-row:hover { background: rgba(203,54,15,.05); }
.noir-comm-row-icon {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.noir-comm-row-icon--avatar {
  border-radius: 50%;
  font-size: 14px; font-weight: 700;
  overflow: hidden;
}
.noir-comm-row-body { flex: 1; min-width: 0; }
.noir-comm-row-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 3px;
}
.noir-comm-row-name {
  font-size: 14px; font-weight: 600;
  color: var(--noir-ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.noir-comm-row-time {
  font-size: 10px; color: var(--noir-muted);
  opacity: .55; flex-shrink: 0; margin-left: 8px;
}
.noir-comm-row-preview {
  font-size: 13px; color: var(--noir-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.noir-comm-badge {
  background: var(--noir-orange); color: #fff;
  font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px; flex-shrink: 0;
}

/* Conversation header */
.noir-comm-convo-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  box-shadow: 0 1px 0 rgba(28,23,18,.07);
  background: var(--noir-paper);
  flex-shrink: 0;
}
.noir-comm-back-btn {
  background: none; border: none; cursor: pointer;
  color: var(--noir-ink-2); padding: 4px 6px;
  border-radius: var(--r-sm);
  display: flex; align-items: center;
  transition: color var(--dur-fast);
}
.noir-comm-back-btn:hover { color: var(--noir-orange); }
.noir-comm-convo-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  font-size: 13px; font-weight: 700; overflow: hidden;
}
.noir-comm-convo-info { flex: 1; min-width: 0; }
.noir-comm-convo-name {
  font-size: 14px; font-weight: 700; color: var(--noir-ink);
}
.noir-comm-convo-sub { font-size: 11px; color: var(--noir-muted); }

/* Message feed */
.noir-comm-view#noir-comm-view-convo {
  display: flex; flex-direction: column; height: 100%;
}
.noir-comm-messages {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
  padding: 0 0 8px;
  display: flex; flex-direction: column;
  background: var(--noir-paper);
}
.noir-comm-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.noir-comm-spinner {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid var(--noir-line);
  border-top-color: var(--noir-orange);
  animation: noir-spin .7s linear infinite;
}
@keyframes noir-spin { to { transform: rotate(360deg); } }

/* Date separator */
.noir-comm-date-sep {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--noir-muted);
}
.noir-comm-date-sep::before,
.noir-comm-date-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--noir-line);
}

/* Channel chips in convo header */
.noir-comm-channel-chips {
  display: flex; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  padding: 10px 16px 10px;
  flex-shrink: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-shadow: 0 1px 0 rgba(28,23,18,.06);
}
.noir-comm-channel-chips::-webkit-scrollbar { display: none; }
.noir-comm-channel-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: none;
  background: rgba(28,23,18,.06);
  font-size: 12px; font-weight: 600; color: var(--noir-ink-2);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all var(--dur-fast);
  position: relative;
}
.noir-comm-channel-chip.is-active {
  background: var(--noir-orange);
  color: #fff;
}
.noir-comm-channel-chip:not(.is-active):hover {
  background: rgba(28,23,18,.1); color: var(--noir-ink);
}
.noir-comm-chip-badge {
  background: var(--noir-orange); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 1px 4px; border-radius: var(--r-pill);
  min-width: 14px; text-align: center; line-height: 14px;
}
.noir-comm-channel-chip.is-active .noir-comm-chip-badge {
  background: rgba(255,255,255,.35); color: #fff;
}

/* Discord-style flat messages */
.noir-comm-msg {
  display: flex; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  transition: background var(--dur-fast);
}
.noir-comm-msg:hover { background: rgba(15,15,15,.03); }
.noir-comm-msg-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0; overflow: hidden;
  align-self: flex-start; margin-top: 2px;
}
.noir-comm-msg-body { flex: 1; min-width: 0; }
.noir-comm-msg-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 3px; flex-wrap: wrap;
}
.noir-comm-msg-name {
  font-size: 13px; font-weight: 700; color: var(--noir-ink);
}
.noir-comm-msg-role {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: .05em;
}
.noir-comm-msg-time {
  font-size: 10px; color: var(--noir-muted);
  font-weight: 400; margin-left: auto;
}
.noir-comm-msg-text {
  font-size: 13px; line-height: 1.55;
  color: var(--noir-ink-2); word-break: break-word;
}
.noir-comm-msg-image {
  margin-top: 8px; border-radius: var(--r-md);
  overflow: hidden; max-width: 320px;
  background: var(--noir-line);
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.noir-comm-msg-reactions {
  display: flex; align-items: center; gap: 5px;
  margin-top: 6px; flex-wrap: wrap;
}
.noir-comm-msg-reaction {
  display: flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--noir-line);
  background: var(--noir-paper);
  font-size: 11px; cursor: pointer;
  transition: all var(--dur-fast);
}
.noir-comm-msg-reaction:hover { border-color: var(--noir-orange); background: rgba(203,54,15,.06); }
.noir-comm-msg-reaction span { font-size: 10px; font-weight: 600; color: var(--noir-muted); }
.noir-comm-msg-add-reaction {
  padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px dashed var(--noir-line);
  background: none; font-size: 11px; color: var(--noir-muted);
  cursor: pointer; transition: all var(--dur-fast);
}
.noir-comm-msg-add-reaction:hover { border-color: var(--noir-orange); color: var(--noir-orange); }
.noir-comm-msg-replies {
  margin-top: 5px; font-size: 11px; font-weight: 600;
  color: var(--noir-orange); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.noir-comm-msg-replies:hover { text-decoration: underline; }

/* ── DM bubble messages (iMessage-style) ── */
.noir-comm-messages.is-dm {
  padding: 16px 16px 8px;
  display: flex; flex-direction: column; gap: 0;
  overflow-y: auto; height: 100%;
}
.noir-comm-msg--bubble {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 2px 0; background: none !important;
  cursor: default;
}
.noir-comm-msg--bubble:hover { background: none !important; }
.noir-comm-msg--bubble.is-mine  { justify-content: flex-end; }
.noir-comm-msg--bubble.is-theirs { justify-content: flex-start; }
.noir-comm-msg--bubble.is-grouped { margin-top: 2px; }
.noir-comm-msg--bubble:not(.is-grouped) { margin-top: 8px; }

.noir-comm-bubble-av {
  width: 26px; height: 26px; border-radius: 50%;
  flex-shrink: 0; align-self: flex-end; margin-bottom: 2px;
  background: #2a2520; color: #f4f0e8;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; overflow: hidden;
}
.noir-comm-bubble-av-space { width: 26px; flex-shrink: 0; }

.noir-comm-bubble-col {
  display: flex; flex-direction: column; max-width: 72%;
}
.is-mine  .noir-comm-bubble-col { align-items: flex-end; }
.is-theirs .noir-comm-bubble-col { align-items: flex-start; }

.noir-comm-bubble-sender {
  font-size: 10px; font-weight: 600; color: var(--noir-muted);
  margin-bottom: 3px; padding: 0 5px;
}

.noir-comm-bubble-body {
  padding: 9px 14px; font-size: 14px; line-height: 1.45;
  word-break: break-word; max-width: 100%;
}
/* First (or solo) in a run — has the "tail" corner */
.is-theirs:not(.is-grouped) .noir-comm-bubble-body {
  border-radius: 18px 18px 18px 4px;
  background: rgba(28,23,18,.09); color: var(--noir-ink);
}
.is-theirs.is-grouped .noir-comm-bubble-body {
  border-radius: 4px 18px 18px 4px;
  background: rgba(28,23,18,.09); color: var(--noir-ink);
}
.is-mine:not(.is-grouped) .noir-comm-bubble-body {
  border-radius: 18px 18px 4px 18px;
  background: var(--noir-orange); color: #fff;
}
.is-mine.is-grouped .noir-comm-bubble-body {
  border-radius: 18px 4px 4px 18px;
  background: var(--noir-orange); color: #fff;
}

.noir-comm-bubble-time {
  font-size: 10px; color: var(--noir-muted);
  opacity: .6; margin-top: 3px; padding: 0 5px;
}
/* Hide time for grouped messages except the last — done via JS adding is-last */
.noir-comm-msg--bubble.is-grouped .noir-comm-bubble-time { display: none; }
.noir-comm-msg--bubble.is-grouped.is-last .noir-comm-bubble-time { display: block; }

/* ── Message action row (like / reply / thread) ── */
.noir-comm-msg-actions {
  display: flex; align-items: center; gap: 1px;
  margin-top: 4px;
  opacity: 0; transition: opacity .13s ease;
}
.noir-comm-msg:hover .noir-comm-msg-actions { opacity: 1; }
@media (max-width: 768px) { .noir-comm-msg-actions { opacity: 1; } }
.noir-comm-msg-action {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  border: none; background: none; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--noir-muted);
  transition: background .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.noir-comm-msg-action:hover { background: rgba(28,23,18,.07); color: var(--noir-ink); }
.noir-comm-msg-action.is-liked { color: #e11d48; }
.noir-comm-msg-action.is-liked:hover { background: rgba(225,29,72,.07); color: #e11d48; }
.noir-comm-msg-action svg { flex-shrink: 0; }
.noir-comm-msg-like-count { font-size: 10px; font-weight: 700; }
/* Hide text labels on mobile — icon-only for compactness */
@media (max-width: 768px) { .noir-action-label { display: none; } }

/* ── Thread drawer ── */
.noir-comm-view#noir-comm-view-convo {
  position: relative;
  /* clip-path clips transformed children in Safari where overflow:hidden fails */
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}
.noir-comm-thread-drawer {
  position: absolute; inset: 0;
  background: var(--noir-paper);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.32,.72,0,1);
  z-index: 10;
}
.noir-comm-thread-drawer.is-open { transform: translateX(0); }
.noir-comm-thread-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 0 rgba(28,23,18,.07);
  flex-shrink: 0;
}
.noir-comm-thread-close {
  background: none; border: none; cursor: pointer;
  color: var(--noir-ink-2); padding: 4px 6px;
  border-radius: var(--r-sm); display: flex; align-items: center;
  transition: color var(--dur-fast);
}
.noir-comm-thread-close:hover { color: var(--noir-orange); }
.noir-comm-thread-title {
  font-size: 14px; font-weight: 700; color: var(--noir-ink); flex: 1;
}
.noir-comm-thread-parent {
  padding: 12px 16px 10px; flex-shrink: 0;
  background: rgba(28,23,18,.025);
  box-shadow: 0 1px 0 rgba(28,23,18,.06);
}
.noir-comm-thread-sep {
  padding: 10px 16px 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--noir-muted); flex-shrink: 0;
}
.noir-comm-thread-replies { flex: 1; overflow-y: auto; padding-bottom: 8px; }
.noir-comm-thread-empty {
  padding: 28px 16px; text-align: center;
  color: var(--noir-muted); font-size: 13px; line-height: 1.5;
}
.noir-comm-thread-compose {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 14px;
  background: #ffffff;
  border-top: 1.5px solid #c8c4bc;
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  flex-shrink: 0;
}

/* Role badge color palette */
.noir-comm-role--0 { background: rgba(99,102,241,.12); color: #6366f1; }
.noir-comm-role--1 { background: rgba(236,72,153,.12); color: #ec4899; }
.noir-comm-role--2 { background: rgba(203,54,15,.12); color: var(--noir-orange); }
.noir-comm-role--3 { background: rgba(16,185,129,.12); color: #10b981; }
.noir-comm-role--4 { background: rgba(245,158,11,.12); color: #f59e0b; }
.noir-comm-role--5 { background: rgba(139,92,246,.12); color: #8b5cf6; }
.noir-comm-role--6 { background: rgba(59,130,246,.12); color: #3b82f6; }
.noir-comm-role--7 { background: rgba(20,184,166,.12); color: #14b8a6; }

/* ── Compose bar (ncp = noir compose) ───────────────────────────────────── */
.ncp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 14px;
  background: #ffffff !important;
  border-top: 1.5px solid #c8c4bc;   /* visible separator from cream feed */
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);  /* lifts bar above feed */
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

/* White pill — floats on bar via border + shadow */
.ncp-pill {
  flex: 1;
  display: flex;
  align-items: center;
  background: #ffffff !important;
  border-radius: 999px !important;
  border: 1.5px solid #bfbab3 !important;   /* clear pill outline on white bar */
  box-shadow: 0 2px 12px rgba(0,0,0,.13) !important;  /* pill clearly elevated */
  min-height: 44px;
  overflow: hidden;
  padding: 0 6px 0 0;
  box-sizing: border-box;
  /* iOS Safari: force GPU compositing so the cursor/caret respects overflow:hidden.
     Without this, the text caret can render outside the pill on iOS 15/16. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Suppress iOS blue tap-highlight rectangle that briefly flashes on touch */
  -webkit-tap-highlight-color: transparent;
}

/* All icon buttons inside the bar */
.ncp-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #cb360f;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.15s;
  min-height: 42px;
}
.ncp-icon-btn:hover { opacity: 1; }

/* Expandable textarea — must use .noir-v2 .ncp-input (0,2,0) to beat
   the global .noir-v2 textarea reset (0,1,1) which would inject cream bg */
.noir-v2 .ncp-input {
  flex: 1 !important;
  resize: none !important;
  border: none !important;
  outline: none !important;
  background: #ffffff !important;
  /* 16px minimum — iOS Safari auto-zooms any input with font-size < 16px on tap,
     regardless of user-scalable=no in the viewport meta. */
  font-size: 16px !important;
  color: #1c1712 !important;
  font-family: var(--noir-sans) !important;
  line-height: 1.4 !important;
  padding: 14px 8px 14px 0 !important;
  min-height: 42px !important;
  max-height: 120px !important;
  overflow-y: auto !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;
}
/* Focus: override global .noir-v2 textarea:focus { background: var(--noir-paper) } */
.noir-v2 .ncp-input:focus {
  background: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
.noir-v2 .ncp-input::placeholder {
  color: #b0aaa3 !important;
  font-size: 16px !important;
}
.noir-v2 .ncp-input:-webkit-autofill,
.noir-v2 .ncp-input:-webkit-autofill:hover,
.noir-v2 .ncp-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  background: #ffffff !important;
}

/* Right-side icon group inside the pill */
.ncp-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
}

/* Thin vertical divider before the action icons */
.ncp-divider {
  display: block;
  width: 1px;
  height: 22px;
  background: #e0dbd3;
  margin: 0 4px;
  flex-shrink: 0;
}

/* Orange circle send button — sits outside the pill */
.ncp-send {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #cb360f;
  color: #ffffff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(203,54,15,.40);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ncp-send:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(203,54,15,.50);
}
.ncp-send:active { transform: scale(0.97); }

/* Mobile: transparent bar, flex-pinned to shell bottom */
@media (max-width: 768px) {
  .ncp-bar {
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
    /* safe-area-inset-bottom covers home bar; + 8px is minimal breathing room */
    padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
  }
  .ncp-icon-btn { padding: 0 8px; }
  .ncp-send { width: 42px; height: 42px; }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .noir-comm-shell { height: calc(100vh - 180px); border-radius: var(--r-md); }
  .noir-comm-msg { padding: 8px 12px; }
}

/* ── Community: convo view fix ──────────────────────────────────────────── */
#noir-comm-view-convo {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Community: DM section headers ─────────────────────────────────────── */
.noir-comm-dm-section-head {
  padding: 10px 20px 6px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--noir-muted);
}

/* ── Online strip (DM tab) ──────────────────────────────────────────────── */
.noir-comm-online-strip {
  display: flex; gap: 16px;
  padding: 8px 20px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.noir-comm-online-strip::-webkit-scrollbar { display: none; }
.noir-comm-online-chip {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; flex-shrink: 0; position: relative;
}
.noir-comm-online-av {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  overflow: hidden;
  border: 2px solid var(--noir-line);
  transition: border-color var(--dur-fast);
}
.noir-comm-online-chip:hover .noir-comm-online-av { border-color: var(--noir-orange); }
.noir-comm-online-name {
  font-size: 11px; color: var(--noir-ink-2);
  max-width: 50px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.noir-online-dot {
  position: absolute; top: 0; right: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--noir-paper);
}

/* ── Notification bell panel ────────────────────────────────────────────── */
.noir-rail-bell {
  background: none; border: none; cursor: pointer;
  color: rgba(244,240,232,.4); padding: 4px;
  position: relative;
  display: flex; align-items: center;
  transition: color var(--dur-fast);
  border-radius: var(--r-sm);
}
.noir-rail-bell:hover { color: rgba(244,240,232,.9); }

.noir-dash-rail-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.noir-dash-rail-top .noir-dash-brand { margin-bottom: 0; }

.noir-bell-count {
  position: absolute; top: -3px; right: -3px;
  background: var(--noir-orange); color: #fff;
  font-size: 9px; font-weight: 700;
  min-width: 15px; height: 15px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.noir-mobilebar-bell { position: relative; }

.noir-bell-panel {
  position: fixed;
  top: 52px; right: 12px;
  width: 340px; max-width: calc(100vw - 24px);
  background: var(--noir-paper);
  border: 1px solid var(--noir-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  display: flex; flex-direction: column;
  overflow: hidden;
  max-height: min(480px, calc(100vh - 70px));
}
.noir-bell-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--noir-line);
  flex-shrink: 0;
}
.noir-bell-panel-title {
  font-family: var(--noir-serif);
  font-size: 16px; font-weight: 700; color: var(--noir-ink);
}
.noir-bell-mark-all {
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: var(--noir-orange);
  padding: 3px 6px; border-radius: var(--r-sm);
}
.noir-bell-mark-all:hover { background: rgba(203,54,15,.08); }
.noir-bell-panel-close {
  background: none; border: none; cursor: pointer;
  color: var(--noir-muted); padding: 4px;
  border-radius: var(--r-sm);
  display: flex; align-items: center;
}
.noir-bell-panel-close:hover { color: var(--noir-ink); }
.noir-bell-panel-tabs {
  display: flex; padding: 0 16px;
  border-bottom: 1px solid var(--noir-line);
  flex-shrink: 0;
}
.noir-bell-tab {
  background: none; border: none; cursor: pointer;
  padding: 10px 0; margin-right: 20px;
  font-size: 12px; font-weight: 600; color: var(--noir-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.noir-bell-tab.is-active { color: var(--noir-ink); border-bottom-color: var(--noir-orange); }
.noir-bell-panel-body { overflow-y: auto; flex: 1; }
.noir-bell-loading {
  display: flex; align-items: center; justify-content: center; padding: 32px;
}
.noir-bell-empty {
  padding: 32px 20px; text-align: center;
  color: var(--noir-muted); font-size: 13px;
}
.noir-bell-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--noir-hair);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.noir-bell-item:hover { background: rgba(15,15,15,.04); }
.noir-bell-item.is-unread { background: rgba(203,54,15,.04); }
.noir-bell-item.is-unread .noir-bell-item-subject { font-weight: 600; }
.noir-bell-item-icon {
  font-size: 20px; flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--noir-paper-2, #ebe7df); border-radius: 10px;
}
.noir-bell-item-body { flex: 1; min-width: 0; }
.noir-bell-item-subject {
  font-size: 13px; color: var(--noir-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.noir-bell-item-preview {
  font-size: 12px; color: var(--noir-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.noir-bell-item-meta {
  font-size: 10px; color: var(--noir-muted); flex-shrink: 0;
  margin-top: 2px;
}
.noir-bell-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: transparent;
}

@media (max-width: 768px) {
  .noir-bell-panel { top: 56px; right: 8px; left: 8px; width: auto; }
}

/* ── Community: full-screen, no border ─────────────────────────────────── */
#noir-section-community {
  padding: 0 !important;
}
#noir-section-community .noir-comm-shell {
  border: none;
  border-radius: 0;
  /* Fill the dash-main scroll container — dash-main is now 100dvh overflow-y:auto */
  height: calc(100dvh - 60px);
}

/* Desktop: when community is active, zero out .noir-dash-main padding so the
   shell fills the full content column edge-to-edge beside the nav rail */
@media (min-width: 769px) {
  .noir-dash-main.has-community {
    padding: 0 !important;
    overflow: hidden !important;
  }
  .noir-dash-main.has-community #noir-section-community {
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .noir-dash-main.has-community #noir-section-community .noir-comm-shell {
    height: 100dvh !important;
    border-radius: 0 !important;
    flex: 1 !important;
  }
  /* Desktop convo mode: shell stays in the DOM column (no portal),
     just hides the header/tabs and fills the column height */
  .noir-comm-shell.is-convo {
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
}
@media (max-width: 768px) {
  /* On mobile, tab bar is ~80px (position:fixed bottom:10px) — shell must not hide behind it */
  #noir-section-community .noir-comm-shell {
    height: calc(100dvh - 60px - calc(env(safe-area-inset-bottom, 0px) + 80px)) !important;
  }
  /* Convo mode on mobile uses position:fixed inset:0 — height rule not needed */
  /* Hide tab bar and top mobilebar whenever a convo is open.
     JS also sets display:none inline — this CSS rule is the belt-and-suspenders backup.
     Uses a body class because after portaling, the shell and tab bar are no longer siblings. */
  body.noir-convo-open .noir-mobile-tabbar,
  body.noir-convo-open .noir-dash-mobilebar {
    display: none !important;
  }
  /* Force the body background to cream while convo is open.
     iOS Safari samples <body> background-color for status bar theming — not the
     overlaid fixed shell. Without this, the dark --noir-ink page background makes
     the status bar strip above the convo header appear dark. */
  body.noir-convo-open {
    background-color: var(--noir-paper) !important;
    /* overflow:hidden prevents any body/page content from scrolling into
       the viewport while the convo overlay is on screen. Combined with
       scrollTo(0,0) in enterConvo(), this ensures no page element bleeds
       through around the edges of the fixed shell. */
    overflow: hidden !important;
  }
}
@media (min-width: 769px) {
  #noir-section-community .noir-comm-shell {
    height: calc(100dvh - 40px);
    border-radius: 0;
  }
}

/* Full-screen convo mode — hides header/tabs via class on shell */
.noir-comm-shell.is-convo .noir-comm-header,
.noir-comm-shell.is-convo .noir-comm-tabs {
  display: none !important;
}
.noir-comm-shell.is-convo {
  height: calc(100dvh - 40px) !important; /* desktop: 40px = mobilebar */
  overflow: hidden !important;
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}
/* Mobile convo overlay: fill the visual viewport precisely.
   - Shell is portaled to <body> to escape overflow-y:auto scroll traps on iOS Safari.
   - iOS 15 Safari's layout viewport INCLUDES the bottom toolbar area, so bottom:0 and
     100vh/dvh all extend behind the address bar. We must use visualViewport.height via JS.
   - CSS 100svh = "small viewport" = height with all browser chrome visible = correct fallback
     on iOS 16+. JS (_onVVResize) always overrides with the live visualViewport.height value.
   - bottom:auto is critical — prevents any bottom:0 rule from overriding JS top+height. */
@media (max-width: 768px) {
  .noir-comm-shell.is-convo {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;    /* must be auto — JS controls top+height */
    /* svh = "small viewport height" = viewport when ALL browser chrome is fully visible.
       This is the correct value for mobile browsers because:
       - iOS Safari: excludes the bottom address bar when expanded ✓
       - Chrome iOS: excludes the persistent bottom navigation toolbar ✓
       - dvh was tried (4.3.43) but Chrome iOS treats its bottom toolbar as outside
         the "dynamic" range — dvh doesn't shrink for it. svh always gives the safe
         conservative height that clears all bottom chrome on both browsers. */
    height: 100svh !important;
    width: 100% !important;
    /* z-index: use CSS max (2147483647) to beat Elementor, theme overlays,
       cookie banners, chat widgets, and any plugin that uses aggressive z-indices */
    z-index: 2147483647 !important;
    border-radius: 0 !important;    /* full-screen: no rounded corners */
    background: var(--noir-paper) !important; /* explicit cream — prevents body bg showing through */
    -webkit-clip-path: none !important;
    clip-path: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    /* Prevent pinch-zoom inside the overlay. touch-action is a W3C standard property
       that iOS Safari respects — unlike user-scalable=no (ignored since iOS 13).
       pan-x pan-y = allow scrolling in both axes, block all zoom gestures. */
    touch-action: pan-x pan-y !important;
  }
  /* Push convo header below the notch / status bar in PWA/standalone mode */
  .noir-comm-shell.is-convo .noir-comm-convo-header {
    padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 8px)) !important;
  }
  /* Body fills remaining space after convo-header */
  .noir-comm-shell.is-convo .noir-comm-body {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* Composer bar: needs bottom clearance to stay above the browser toolbar.
     On iOS (Safari + Chrome) the browser chrome sits below the safe-area inset;
     safe-area-inset-bottom (~34px on Face ID iPhones) covers the home indicator,
     and an extra 20px clears the Chrome iOS bottom navigation toolbar (~49px total).
     PWA standalone mode uses a tighter value (see rule below). */
  .noir-comm-shell.is-convo .ncp-bar {
    padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    flex-shrink: 0 !important;
    background: var(--noir-paper) !important;
  }
  /* Thread compose: match main bar */
  .noir-comm-thread-compose {
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
    padding: 8px 16px 8px !important;
  }
}
/* PWA standalone: content extends under the home indicator bar.
   Add safe-area clearance so the composer isn't behind it. */
@media (display-mode: standalone) {
  .noir-comm-shell.is-convo .ncp-bar {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
  .noir-comm-thread-compose {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }
}

/* DM mode: hide unimplemented/irrelevant icons — keep attach (file upload) */
.ncp-bar.is-dm #noir-comm-mic-btn,
.ncp-bar.is-dm #noir-comm-camera-btn,
.ncp-bar.is-dm #noir-comm-emoji-btn {
  display: none !important;
}
.ncp-bar.is-dm .ncp-pill {
  padding-left: 14px !important; /* breathing room since mic is gone */
}
/* Convo view clips the thread drawer; messages scroll inside */
.noir-comm-view#noir-comm-view-convo {
  overflow: hidden !important;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.noir-comm-view#noir-comm-view-convo .noir-comm-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── FAB (channel new post button) ── */
/* Convo header + post button — white outer ring, orange inner, white plus */
.noir-comm-convo-compose-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: #cb360f !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(203,54,15,.45);
  cursor: pointer; margin-left: auto; flex-shrink: 0;
  display: none !important; align-items: center; justify-content: center;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
  color: #fff;
}
.noir-comm-convo-compose-btn:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(203,54,15,.60); }
.noir-comm-convo-header.is-channel .noir-comm-convo-compose-btn { display: flex !important; }

/* ── FAB modal (new post overlay) ── */
.noir-comm-fab-modal {
  position: absolute; inset: 0; z-index: 20;
  display: none; align-items: flex-end;
  -webkit-clip-path: inset(0); clip-path: inset(0);
}
.noir-comm-fab-modal.is-open { display: flex; }
.noir-comm-fab-backdrop {
  position: absolute; inset: 0;
  background: rgba(28,23,18,.35);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.noir-comm-fab-panel {
  position: relative; z-index: 1;
  width: 100%; background: #ffffff;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  box-shadow: 0 -8px 40px rgba(0,0,0,.16);
  animation: noir-slide-up .22s ease;
  overflow: hidden;
}
@keyframes noir-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.noir-comm-fab-panel-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  box-shadow: 0 1px 0 rgba(28,23,18,.07);
}
.noir-comm-fab-panel-title { font-size: 14px; font-weight: 700; color: var(--noir-ink); }
.noir-comm-fab-close {
  background: rgba(28,23,18,.08); border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--noir-ink); font-size: 16px; line-height: 1;
}
.noir-comm-fab-textarea {
  width: 100% !important; min-height: 100px; max-height: 200px;
  padding: 14px 20px; resize: none;
  border: none !important; outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 15px; color: var(--noir-ink);
  font-family: var(--noir-sans); line-height: 1.5;
  box-sizing: border-box;
  -webkit-appearance: none !important; appearance: none !important;
}
.noir-comm-fab-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 14px;
  box-shadow: 0 -1px 0 rgba(28,23,18,.06);
}
.noir-comm-fab-attach-btn {
  background: none; border: none; cursor: pointer;
  color: var(--noir-muted); padding: 6px;
  border-radius: 50%;
  display: flex; align-items: center;
  transition: color var(--dur-fast);
}
.noir-comm-fab-attach-btn:hover { color: var(--noir-ink); }
.noir-comm-fab-post-btn {
  background: var(--noir-orange); color: #fff;
  border: none; cursor: pointer;
  padding: 9px 22px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700;
  transition: opacity var(--dur-fast);
}
.noir-comm-fab-post-btn:hover { opacity: .88; }

/* Media preview in FAB modal */
.noir-comm-fab-media-preview {
  padding: 0 20px 10px;
  display: none;
}
.noir-comm-fab-media-preview.has-media { display: block; }
.noir-comm-fab-media-preview img {
  max-width: 100%; max-height: 160px;
  border-radius: var(--r-md); object-fit: cover;
}
.noir-comm-fab-media-remove {
  display: block; font-size: 11px; color: var(--noir-muted);
  margin-top: 4px; cursor: pointer; background: none; border: none;
  padding: 0; text-decoration: underline;
}

/* ── Inline reply (drops down below a channel message) ── */
.noir-comm-inline-reply {
  display: none; margin: 6px 0 4px 44px;
}
.noir-comm-inline-reply.is-open { display: flex; align-items: flex-end; gap: 8px; }
.noir-comm-reply-pill {
  flex: 1; display: flex; align-items: flex-end;
  background: #fff;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(28,23,18,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden;
  -webkit-clip-path: inset(0 round var(--r-pill));
  clip-path: inset(0 round var(--r-pill));
  padding: 0 4px 0 0;
}
.noir-comm-reply-pill:focus-within {
  border-color: var(--noir-orange);
  box-shadow: 0 0 0 3px rgba(203,54,15,.10);
}
.noir-comm-reply-input {
  flex: 1; resize: none; min-height: 34px; max-height: 80px;
  padding: 7px 10px 7px 14px;
  border: none; background: transparent;
  font-size: 13px; color: var(--noir-ink);
  font-family: var(--noir-sans); outline: none; line-height: 1.4;
  -webkit-appearance: none; appearance: none; min-width: 0; width: 100%; box-sizing: border-box;
}
.noir-comm-reply-send-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--noir-orange); color: #fff;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-bottom: 3px;
}

/* Media attached to a channel message */
.noir-comm-msg-media { margin-top: 8px; }
.noir-comm-msg-media img {
  max-width: 280px; max-height: 200px;
  border-radius: var(--r-md); object-fit: cover; display: block;
}

/* ── DM user search ─────────────────────────────────────────────────────── */
.noir-comm-dm-search-wrap {
  padding: 10px 12px 0;
  position: relative;
}
.noir-comm-dm-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(244,240,232,.08);
  border: 1px solid rgba(244,240,232,.12);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  color: rgba(244,240,232,.45);
}
.noir-comm-dm-search-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--noir-paper);
  font-family: var(--noir-sans);
  -webkit-appearance: none;
  appearance: none;
}
.noir-comm-dm-search-bar input::placeholder { color: rgba(244,240,232,.4); }
.noir-comm-dm-search-results {
  position: absolute;
  left: 12px; right: 12px;
  top: calc(100% + 4px);
  background: #2a2520;
  border: 1px solid rgba(244,240,232,.1);
  border-radius: var(--r-md);
  z-index: 20;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.noir-comm-search-result:hover { background: rgba(244,240,232,.06); }
.noir-comm-search-empty {
  padding: 14px;
  font-size: 13px;
  color: rgba(244,240,232,.45);
  text-align: center;
}
.noir-comm-online-chip-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #3a3330;
  color: var(--noir-paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}

/* ── Bulk action bar ────────────────────────────────────────────────────── */
.noir-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(203,54,15,.08);
  border-bottom: 1px solid rgba(203,54,15,.15);
  flex-wrap: wrap;
}
.noir-bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--noir-orange);
  min-width: 80px;
}
.noir-bulk-select {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--noir-line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--noir-ink);
}
.noir-admin-act-btn--approve {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}
.noir-admin-act-btn--approve:hover {
  background: #dcfce7 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   REGISTER PAGE — nreg-* (unified 4-type signup flow)
   Dark hero → card selection → inline form reveal
═══════════════════════════════════════════════════════════════════ */

/* Full-page takeover — hide ALL theme chrome, kill page title, remove all spacing */
body.page-noir-register {
  background: #1c1712 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Hide theme site header, footer, page title, breadcrumbs */
body.page-noir-register .site-header,
body.page-noir-register #masthead,
body.page-noir-register .site-footer,
body.page-noir-register #colophon,
body.page-noir-register .site-footer,
body.page-noir-register footer,
body.page-noir-register .entry-header,
body.page-noir-register .page-header,
body.page-noir-register .entry-title,
body.page-noir-register .page-title,
body.page-noir-register h1.entry-title,
body.page-noir-register h2.entry-title,
body.page-noir-register .breadcrumbs,
body.page-noir-register .elementor-location-header,
body.page-noir-register .elementor-location-footer,
body.page-noir-register nav.navbar,
body.page-noir-register #navbar,
body.page-noir-register .navbar { display: none !important; }
/* Strip padding/margin from all content wrappers */
body.page-noir-register .entry-content,
body.page-noir-register .site-main,
body.page-noir-register .wp-site-blocks,
body.page-noir-register main,
body.page-noir-register article,
body.page-noir-register #content,
body.page-noir-register #primary,
body.page-noir-register .content-area {
  background: #1c1712 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.noir-v2.nreg-page {
  background: #1c1712 !important;
  min-height: 100vh !important;
  padding: 0 !important;
  max-width: none !important;
}

/* ── Header ── */
.nreg-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(244,240,232,.06);
}
.nreg-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nreg-logo span {
  font-family: var(--noir-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--noir-paper);
  letter-spacing: -.01em;
}
.nreg-hd-login {
  font-size: 13px;
  color: rgba(244,240,232,.55);
  text-decoration: none;
  transition: color .15s;
}
.nreg-hd-login strong { color: var(--noir-orange); font-weight: 600; }
.nreg-hd-login:hover { color: var(--noir-paper); }

/* ── Page wrap ── */
.nreg-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

/* ── Intro ── */
.nreg-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--noir-orange);
  margin-bottom: 12px;
}
.nreg-headline {
  font-family: var(--noir-serif) !important;
  font-size: clamp(26px, 4vw, 36px) !important;
  font-weight: 700 !important;
  color: var(--noir-paper) !important;
  line-height: 1.15 !important;
  margin: 0 0 10px !important;
}
.nreg-sub {
  font-size: 15px;
  color: rgba(244,240,232,.5);
  margin: 0 0 36px !important;
}

/* ── Error banner ── */
.nreg-error {
  background: rgba(203,54,15,.12);
  border: 1px solid rgba(203,54,15,.35);
  color: #ff9a80;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 24px;
}

/* ── Type cards grid ── */
.nreg-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
  max-height: 700px;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease, margin .35s ease;
  opacity: 1;
}
@media (min-width: 600px) {
  .nreg-cards { grid-template-columns: repeat(4, 1fr); }
}

/* ── Single card ── */
.nreg-card {
  background: #241e14;
  border: 1.5px solid rgba(244,240,232,.07);
  border-radius: 20px;
  padding: 18px 16px 20px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .25s ease;
  width: 100%;
}
.nreg-card:hover {
  border-color: rgba(203,54,15,.45);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.nreg-card.is-selected {
  border-color: #cb360f !important;
  box-shadow: 0 0 0 1px #cb360f, 0 8px 32px rgba(203,54,15,.2) !important;
}
.nreg-cards.has-selection .nreg-card:not(.is-selected) {
  opacity: .3;
  transform: scale(.97);
  pointer-events: none;
}

/* Card icon */
.nreg-card-ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nreg-card-ico--sky    { background: rgba(99,170,210,.18); }
.nreg-card-ico--plum   { background: rgba(139,90,167,.18); }
.nreg-card-ico--moss   { background: rgba(82,152,109,.18); }
.nreg-card-ico--butter { background: rgba(220,185,90,.18); }

/* Card body */
.nreg-card-body { flex: 1; }
.nreg-card-title {
  font-family: var(--noir-serif);
  font-size: 14px;
  color: var(--noir-paper);
  line-height: 1.3;
  margin-bottom: 5px;
}
.nreg-card-sub {
  font-size: 11.5px;
  color: rgba(244,240,232,.45);
  line-height: 1.45;
}
@media (max-width: 480px) {
  .nreg-card-sub { display: none; }
}

/* Card tag pill */
.nreg-card-tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #cb360f;
  background: rgba(203,54,15,.12);
  border: 1px solid rgba(203,54,15,.22);
  border-radius: 999px;
  padding: 3px 9px;
  margin-top: auto;
}

/* ── Form reveal wrap (animates open) ── */
.nreg-form-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height .4s cubic-bezier(.4,0,.2,1),
    opacity    .28s ease .08s;
}
.nreg-form-wrap.is-open {
  max-height: 3000px; /* generous ceiling */
  opacity: 1;
}

/* ── Form panel (cream card) ── */
.nreg-form-panel {
  background: var(--noir-paper);
  border-radius: 20px;
  padding: 32px 28px 36px;
}
@media (max-width: 480px) {
  .nreg-form-panel { padding: 24px 18px 28px; border-radius: 16px; }
}

/* Form panel header */
.nreg-form-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 12px;
}
.nreg-form-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--noir-orange);
  margin: 0 0 4px;
}
.nreg-form-title {
  font-family: var(--noir-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--noir-ink) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.nreg-change-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: none;
  border: 1.5px solid rgba(28,23,18,.15);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--noir-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
.nreg-change-btn:hover {
  border-color: var(--noir-orange);
  color: var(--noir-orange);
}

/* ── Section labels inside form ── */
.nreg-section-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--noir-muted);
  margin-bottom: 20px;
}
.nreg-divider-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--noir-muted);
  margin: 28px 0 18px;
  padding-top: 24px;
  border-top: 1px solid var(--noir-line);
}

/* ── Fields ── */
.nreg-field { margin-bottom: 16px; }
.nreg-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(28,23,18,.55);
  margin-bottom: 6px;
}
.nreg-req { color: var(--noir-orange); }
.nreg-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid rgba(28,23,18,.14);
  border-radius: 8px;
  background: #ffffff;
  font-size: 15px;
  color: var(--noir-ink);
  font-family: var(--noir-sans);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.nreg-input:focus {
  outline: none;
  border-color: #cb360f;
  box-shadow: 0 0 0 3px rgba(203,54,15,.1);
}
.nreg-input::placeholder { color: rgba(28,23,18,.3); }
.nreg-textarea {
  height: auto !important;
  min-height: 88px;
  padding: 12px 14px !important;
  resize: vertical;
  line-height: 1.5;
}
.nreg-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px) {
  .nreg-row-2 { grid-template-columns: 1fr; }
}

/* Password error */
.nreg-pw-err {
  color: #cb360f;
  font-size: 12px;
  margin: -8px 0 12px;
  display: none;
}

/* ── Photo upload (trainee) ── */
.nreg-photo-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  gap: 8px;
}
.nreg-photo-wrap {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--noir-paper-2);
  border: 2px dashed rgba(28,23,18,.2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.nreg-photo-hint {
  font-size: 12px;
  color: var(--noir-muted);
}

/* ── File upload zone ── */
.nreg-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 16px;
  border: 1.5px dashed rgba(28,23,18,.18);
  border-radius: 10px;
  background: rgba(28,23,18,.02);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
  min-height: 90px;
}
.nreg-upload:hover {
  border-color: var(--noir-orange);
  background: rgba(203,54,15,.03);
}
.nreg-upload svg { color: var(--noir-muted); }
.nreg-upload span {
  font-size: 13px;
  font-weight: 500;
  color: var(--noir-ink-2);
}
.nreg-upload small {
  font-size: 11px;
  color: var(--noir-muted);
}

/* ── Checkbox grid (skills/experience) ── */
.nreg-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nreg-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  background: var(--noir-paper-2);
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--noir-ink-2);
  transition: border-color .12s, background .12s, color .12s;
  user-select: none;
}
.nreg-check input[type=checkbox] {
  width: 14px; height: 14px;
  accent-color: var(--noir-orange);
  flex-shrink: 0;
}
.nreg-check:has(input:checked) {
  background: rgba(203,54,15,.08);
  border-color: rgba(203,54,15,.35);
  color: var(--noir-ink);
}

/* ── Day pills ── */
.nreg-day-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nreg-day-pill {
  padding: 6px 14px;
  background: var(--noir-paper-2);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--noir-ink-2);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.nreg-day-pill.is-on {
  background: rgba(203,54,15,.1);
  border-color: rgba(203,54,15,.4);
  color: var(--noir-orange);
}

/* ── Project block ── */
.nreg-project-block {
  background: rgba(28,23,18,.03);
  border: 1px solid var(--noir-line);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}
.nreg-project-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--noir-muted);
  margin-bottom: 14px;
}

/* ── Submit CTA ── */
.nreg-submit {
  display: block;
  width: 100%;
  height: 52px;
  background: #cb360f;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  margin-top: 24px;
  transition: background .15s, transform .1s;
  font-family: var(--noir-sans);
}
.nreg-submit:hover { background: #b02e0c; }
.nreg-submit:active { transform: scale(.98); }

/* ── Terms note ── */
.nreg-terms {
  font-size: 12px;
  color: var(--noir-muted);
  text-align: center;
  margin-top: 20px;
}
.nreg-terms a { color: var(--noir-orange); text-decoration: underline; text-underline-offset: 2px; }

/* ── Page footer ── */
.nreg-pg-footer {
  text-align: center;
  padding: 32px 24px 48px;
  font-size: 14px;
  color: rgba(244,240,232,.4);
}
.nreg-pg-footer a { color: rgba(244,240,232,.75); text-decoration: underline; text-underline-offset: 3px; }
.nreg-pg-footer a:hover { color: var(--noir-paper); }

/* ── Sticky sign-in bar (top of page) ── */
.nreg-signin-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: rgba(28,23,18,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(244,240,232,.07);
}
.nreg-sb-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--noir-paper);
  font-family: var(--noir-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.3px;
}
.nreg-sb-logo svg { width: 28px; height: 28px; flex-shrink: 0; }
.nreg-sb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--noir-orange);
  border: 1.5px solid var(--noir-orange);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .01em;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nreg-sb-btn:hover {
  background: #b02e0c;
  border-color: #b02e0c;
  color: #fff;
}

/* ── Cards collapse on selection ── */
@keyframes nreg-bar-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nreg-cards.has-selection {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-bottom: 0 !important;
  pointer-events: none;
}

/* ── Selected-type summary bar ── */
.nreg-sel-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(244,240,232,.07);
  border: 1px solid rgba(244,240,232,.12);
  border-radius: var(--r-md);
  margin-bottom: 16px;
  animation: nreg-bar-in .25s var(--ease) both;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nreg-sel-bar:hover {
  background: rgba(244,240,232,.11);
  border-color: rgba(244,240,232,.22);
}
.nreg-sel-bar.is-visible { display: flex; }

.nreg-sel-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(244,240,232,.1);
}
.nreg-sel-ico--sky    { background: rgba(107,174,214,.2); }
.nreg-sel-ico--plum   { background: rgba(149,102,171,.2); }
.nreg-sel-ico--moss   { background: rgba(106,153,85,.2);  }
.nreg-sel-ico--butter { background: rgba(214,180,76,.2);  }

.nreg-sel-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nreg-sel-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(244,240,232,.45);
}
.nreg-sel-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--noir-paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nreg-sel-change {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(244,240,232,.15);
  border: 1.5px solid rgba(244,240,232,.3);
  color: var(--noir-paper);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nreg-sel-change:hover {
  background: rgba(244,240,232,.25);
  border-color: rgba(244,240,232,.5);
}
.nreg-sel-change svg { width: 13px; height: 13px; opacity: .75; }

/* ── "Already have an account?" below submit ── */
.nreg-have-account {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(28,23,18,.5);
}
.nreg-have-account a {
  color: var(--noir-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.nreg-have-account a:hover { color: #b02e0c; }

@media (max-width: 480px) {
  .nreg-signin-bar { padding: 11px 16px; }
  .nreg-sb-logo span { display: none; }
  .nreg-sel-change { padding: 6px 11px; font-size: 12px; }
}