/* ================================================================
   Skill / profile picker — glass (.npf-*)
   Used by the member dashboard § profile AND, via
   Noir_Member::render_skill_picker(), by public register, member
   register, complete-profile and admin member edit.

   Context-adaptive like .nsm: the member shell is LIGHT
   (--noir-paper #F4F0E8), the trainee/admin shells are dark, so tokens
   are declared light and re-pointed under the dark shells rather than
   hard-coding colours per rule.
   ================================================================ */

.npf {
  --npf-text:    #1B1712;
  --npf-muted:   #5F594E;          /* measured ≥4.5:1 on the composited glass */
  --npf-surface: rgba(255, 255, 255, .62);
  --npf-raise:   rgba(255, 255, 255, .46);
  --npf-line:    rgba(27, 23, 18, .11);
  --npf-field:   rgba(255, 255, 255, .74);
  --npf-accent:  #CB360F;
  --npf-good:    #3B7D40;
  --npf-blur:    saturate(1.5) blur(16px);
  --npf-glow: radial-gradient(120% 90% at 10% -10%, rgba(203, 54, 15, .09), transparent 60%),
              radial-gradient(90% 80% at 100% 0%, rgba(120, 90, 200, .06), transparent 55%);
}
/* Dark shells. The member dashboard is the only LIGHT surface this picker
   appears on — every signup route paints #1c1712 (`.nreg-page`,
   `body.page-noir-register`, `.noir-signup`), so the light defaults above
   would render near-black text on near-black glass. */
.noir-v3 .npf, .nv3-content .npf, .noir-admin-v2 .npf,
.nreg-page .npf, .noir-signup .npf, body.page-noir-register .npf {
  --npf-text:    #F4F0E8;
  --npf-muted:   rgba(244, 240, 232, .62);
  --npf-surface: rgba(244, 240, 232, .055);
  --npf-raise:   rgba(244, 240, 232, .04);
  --npf-line:    rgba(244, 240, 232, .12);
  --npf-field:   rgba(244, 240, 232, .06);
  --npf-accent:  #E8703F;
  --npf-good:    #8FC24A;
}

.npf { color: var(--npf-text); position: relative; }

/* SPECIFICITY WARNING — read before editing anything below.
   noir-platform-v2.css ships three global resets that outrank a plain
   `.npf-*` class no matter how late this file loads:

     .noir-v2 input:not([type=checkbox]):not([type=radio])…   ≈ (0,7,1)
     .noir-v2 .noir-dash-main h3                              = (0,2,1)
     .noir-v2 button { background:none; font-size:inherit }   = (0,1,1)

   Each `:not()` contributes its argument's specificity, which is why the
   input reset is so hard to beat — !important alone does NOT help, since
   the global one is !important too and wins the specificity tiebreak.

   So every rule that collides with those three is scoped through an ID,
   taking it to (1,x,y). There are two, and BOTH must be listed on every
   such rule — writing `#a, #b .x` instead of `#a .x, #b .x` silently
   turns the first half into a bare id selector that styles the wrapper:
     #noir-section-profile — the dashboard profile section
     #noir-skill-picker    — the standalone picker on every other surface
   Keep new field, button and heading rules inside those id-scoped
   blocks or they will render with the paper styles instead of glass. */

/* ── strength meter (dashboard only) ─────────────────────────── */
.npf-meter {
  position: relative; overflow: hidden;
  padding: 18px 20px; margin: 0 0 18px;
  border-radius: 18px; border: 1px solid var(--npf-line);
  background-color: var(--npf-surface); background-image: var(--npf-glow);
  -webkit-backdrop-filter: var(--npf-blur); backdrop-filter: var(--npf-blur);
}
.npf-meter__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.npf-meter__pc { font-family: var(--noir-serif); font-size: 26px; font-weight: 700; line-height: 1; }
.npf-meter__lbl { font-size: 13px; font-weight: 600; }
.npf-meter__sub { font-size: 12.5px; color: var(--npf-muted); margin-left: auto; }
.npf-meter__bar {
  height: 7px; border-radius: 99px; margin: 12px 0 0;
  background: var(--npf-raise); overflow: hidden;
}
.npf-meter__fill {
  height: 100%; border-radius: 99px; width: 0;
  background: linear-gradient(90deg, var(--npf-accent), #E8934F);
  transition: width .45s cubic-bezier(.2, .9, .3, 1);
}
.npf-meter.is-done .npf-meter__fill { background: linear-gradient(90deg, var(--npf-good), #7FBF6A); }
.npf-meter__todo { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
#noir-section-profile .npf-todo,
#noir-skill-picker .npf-todo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-family: inherit;
  background: var(--npf-field); border: 1px solid var(--npf-line); color: var(--npf-text);
}
#noir-section-profile .npf-todo:hover,
#noir-skill-picker .npf-todo:hover { border-color: var(--npf-accent); color: var(--npf-accent); }
.npf-todo::before { content: "○"; opacity: .55; }

/* ── cards ───────────────────────────────────────────────────── */
.npf-card {
  padding: 20px; margin: 0 0 14px;
  border-radius: 18px; border: 1px solid var(--npf-line);
  background: var(--npf-surface);
  -webkit-backdrop-filter: var(--npf-blur); backdrop-filter: var(--npf-blur);
  scroll-margin-top: 20px;
}
.npf-card__head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; }
/* id-scoped: beats `.noir-v2 .noir-dash-main h3`, which otherwise stamps
   every card title with the 26px orange-underlined section-header style. */
#noir-section-profile .npf-card__n,
#noir-skill-picker .npf-card__n {
  font-family: var(--noir-serif); font-size: 17px !important; font-weight: 700;
  margin: 0 !important; padding: 0 !important; border-bottom: 0 !important;
}
#noir-section-profile .npf-card__n--sub,
#noir-skill-picker .npf-card__n--sub { font-size: 15px !important; }
.npf-card__head--sub { margin-top: 22px; }
.npf-card__c { font-size: 12px; color: var(--npf-muted); margin-left: auto; }
.npf-card__d { font-size: 12.5px; color: var(--npf-muted); margin: 0 0 16px; max-width: 62ch; }

/* ── fields ──────────────────────────────────────────────────── */
.npf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.npf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.npf-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.npf-f--wide { grid-column: 1 / -1; }
.npf-f > label { font-size: 12px; font-weight: 600; color: var(--npf-muted); }
.npf-f > label .req { color: var(--npf-accent); }
.npf-hint { font-size: 11.5px; color: var(--npf-muted); font-weight: 400; }

#noir-section-profile .npf input[type="text"],
#noir-section-profile .npf input[type="tel"],
#noir-section-profile .npf input[type="url"],
#noir-section-profile .npf input[type="search"],
#noir-skill-picker .npf input[type="text"],
#noir-skill-picker .npf input[type="tel"],
#noir-skill-picker .npf input[type="url"],
#noir-skill-picker input[type="search"],
.npf select, .npf textarea {
  width: 100%; font: inherit; font-size: 14px !important;
  padding: 10px 12px !important;
  color: var(--npf-text) !important;
  background: var(--npf-field) !important;
  border: 1px solid var(--npf-line) !important;
  border-radius: 11px !important;
}
.npf textarea { resize: vertical; min-height: 110px; }
#noir-section-profile .npf input:focus,
#noir-skill-picker input:focus,
.npf select:focus, .npf textarea:focus {
  outline: 2px solid var(--npf-accent) !important; outline-offset: 1px;
  border-color: transparent !important;
}
.npf ::placeholder { color: var(--npf-muted); opacity: .8; }

/* ── identity row (dashboard only) ───────────────────────────── */
.npf-id { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.npf-id__ph { flex: 0 0 auto; text-align: center; }
.npf-avatar {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--npf-line); display: block; margin: 0 0 8px;
}
.npf-avatar--empty {
  display: grid; place-items: center;
  background: var(--npf-raise); color: var(--npf-muted);
  font-size: 26px; font-family: var(--noir-serif);
}
.npf-id__fields { flex: 1 1 280px; min-width: 0; }
.npf-photo {
  position: relative; display: inline-block; overflow: hidden;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 600; text-align: center; max-width: 120px;
  background: var(--npf-field); border: 1px solid var(--npf-line); color: var(--npf-text);
}
.npf-photo:hover { border-color: var(--npf-accent); color: var(--npf-accent); }
.npf-photo:focus-within { outline: 2px solid var(--npf-accent); outline-offset: 1px; }
/* Kept in the layer, just invisible — see the note in the template. */
.npf-file {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}

/* ── the search bar ──────────────────────────────────────────── */
.npf-pick { display: flex; flex-direction: column; gap: 10px; }
.npf-pick__bar { position: relative; display: flex; align-items: center; }
.npf-pick__bar svg {
  position: absolute; left: 12px; width: 15px; height: 15px;
  color: var(--npf-muted); pointer-events: none;
}
/* The base field rule above is (1,2,1); a plain `.npf-pick__bar input`
   is (1,1,1) and loses its padding shorthand. Match the class count. */
#noir-section-profile .npf .npf-pick__bar input[type="search"],
#noir-skill-picker .npf-pick .npf-pick__bar input[type="search"] { padding-left: 34px !important; }

/* ── picked skills, one row each ──────────────────────────────
   The row is the whole point of attaching experience to a skill: the
   craft and the level read as one statement instead of two lists the
   employer has to guess a join between. */
.npf-rows { display: flex; flex-direction: column; gap: 8px; }
.npf-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 13px;
  background: var(--npf-field); border: 1px solid var(--npf-line);
}
.npf-row__n { font-size: 13.5px; font-weight: 600; flex: 0 0 auto; min-width: 116px; }
.npf-lvls {
  display: flex; flex-wrap: wrap; gap: 5px;
  flex: 1 1 auto; min-width: 0;
}
#noir-section-profile .npf-lvl,
#noir-skill-picker .npf-lvl {
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-family: inherit; white-space: nowrap;
  background: transparent; color: var(--npf-muted);
  border: 1px solid var(--npf-line);
  transition: border-color .12s, color .12s, background-color .12s;
}
#noir-section-profile .npf-lvl:hover,
#noir-skill-picker .npf-lvl:hover { border-color: var(--npf-accent); color: var(--npf-accent); }
#noir-section-profile .npf-lvl.is-on,
#noir-skill-picker .npf-lvl.is-on {
  background: var(--npf-accent); border-color: var(--npf-accent);
  color: #fff; font-weight: 600;
}
#noir-section-profile .npf-row__x,
#noir-skill-picker .npf-row__x {
  margin-left: auto; flex: 0 0 auto;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  font-size: 17px; line-height: 1; font-family: inherit; cursor: pointer;
  background: transparent; color: var(--npf-muted); border: 1px solid transparent;
}
#noir-section-profile .npf-row__x:hover,
#noir-skill-picker .npf-row__x:hover { color: var(--npf-accent); border-color: var(--npf-line); }

/* A skill with no level yet — flagged, not hidden, because the fix is
   one tap away and an unlevelled skill is what shows up blank publicly. */
.npf-row--todo { border-style: dashed; border-color: var(--npf-accent); }
.npf-card__c--warn { color: var(--npf-accent); font-weight: 600; }
.npf-chips__empty { font-size: 12.5px; color: var(--npf-muted); font-style: italic; }

/* ── the "add a skill" pill list ─────────────────────────────── */
.npf-opts {
  display: flex; flex-wrap: wrap; gap: 7px;
  max-height: 188px; overflow-y: auto;
  padding: 12px; border-radius: 13px;
  background: var(--npf-raise); border: 1px solid var(--npf-line);
}
#noir-section-profile .npf-opt,
#noir-skill-picker .npf-opt {
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-family: inherit;
  background: var(--npf-field); color: var(--npf-text);
  border: 1px solid var(--npf-line);
  transition: border-color .12s, color .12s, transform .12s;
}
#noir-section-profile .npf-opt:hover,
#noir-skill-picker .npf-opt:hover { border-color: var(--npf-accent); color: var(--npf-accent); transform: translateY(-1px); }
#noir-section-profile .npf-opt.is-on,
#noir-skill-picker .npf-opt.is-on { display: none; }   /* chosen items live in the row list */
.npf-opts__none { font-size: 12.5px; color: var(--npf-muted); padding: 4px; }

/* No-JS fallback: the real controls stay in the DOM and simply show —
   a checkbox and a level <select> per skill. */
.npf-native { display: flex; flex-direction: column; gap: 6px; }
.npf-nrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px; border-radius: 11px;
  background: var(--npf-field); border: 1px solid var(--npf-line);
}
.npf-nrow label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; cursor: pointer; flex: 1 1 160px; min-width: 0;
}
.npf-nrow select { flex: 0 0 auto; width: auto !important; min-width: 150px; }
.npf-native input { accent-color: var(--npf-accent); }
.npf.js-on .npf-native { display: none; }
.npf:not(.js-on) .npf-pick { display: none; }

/* ── day toggles (dashboard only) ────────────────────────────── */
.npf-days { display: flex; flex-wrap: wrap; gap: 7px; }
#noir-section-profile .npf-day,
#noir-skill-picker .npf-day {
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-family: inherit;
  background: var(--npf-field); color: var(--npf-text);
  border: 1px solid var(--npf-line);
}
#noir-section-profile .npf-day.is-on,
#noir-skill-picker .npf-day.is-on { background: var(--npf-accent); border-color: var(--npf-accent); color: #fff; }

/* ── socials (dashboard only) ────────────────────────────────── */
.npf-soc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.npf-soc__row { display: flex; flex-direction: column; gap: 4px; }
.npf-soc__l { font-size: 11.5px; font-weight: 600; color: var(--npf-muted); }
.npf-soc__i { position: relative; display: flex; align-items: center; }
.npf-soc__i i {
  position: absolute; left: 12px; font-style: normal;
  font-size: 13px; color: var(--npf-muted); pointer-events: none;
}
#noir-section-profile .npf .npf-soc__i input[type="text"] { padding-left: 26px !important; }
#noir-section-profile .npf .npf-soc__row--site .npf-soc__i input[type="text"] { padding-left: 12px !important; }

/* ── save bar (dashboard only) ───────────────────────────────── */
/* Sits in the flow until there is actually something to save. A bar that
   is sticky the whole time permanently covers whichever field happens to
   be at the bottom of the viewport, for no benefit on a clean form. */
.npf-save {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 13px 16px;
  border-radius: 15px; border: 1px solid var(--npf-line);
  background: var(--npf-surface);
  -webkit-backdrop-filter: var(--npf-blur); backdrop-filter: var(--npf-blur);
  box-shadow: 0 12px 34px rgba(28, 23, 18, .14);
}
.npf-save.is-dirty {
  position: sticky; bottom: var(--noir-bottom-clear, 12px); z-index: 40;
}
.npf-save__msg { font-size: 13px; color: var(--npf-muted); flex: 1; min-width: 140px; }
.npf-save.is-dirty .npf-save__msg { color: var(--npf-accent); font-weight: 600; }
#noir-section-profile .npf-btn,
#noir-skill-picker .npf-btn {
  padding: 11px 22px; border-radius: 11px; cursor: pointer; border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 600;
  background: var(--npf-accent); color: #fff;
}
.npf-btn[disabled] { opacity: .5; cursor: default; }
#noir-section-profile .npf-btn--ghost,
#noir-skill-picker .npf-btn--ghost { background: none; color: var(--npf-text); border-color: var(--npf-line); }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  .npf-grid, .npf-grid--3, .npf-soc { grid-template-columns: 1fr; }
  .npf-card { padding: 16px; border-radius: 15px; }
  .npf-meter { padding: 15px 16px; }
  .npf-opts { max-height: 156px; }
  .npf-id { gap: 14px; }
  .npf-avatar { width: 74px; height: 74px; }

  /* Thumb targets. 13px text in 6px padding is a 32px pill — fine for a
     mouse, too small to hit reliably while walking to a shoot. */
  #noir-section-profile .npf-day, #noir-skill-picker .npf-day { padding: 11px 18px; }
  #noir-section-profile .npf-opt, #noir-skill-picker .npf-opt { padding: 9px 15px; }
  #noir-section-profile .npf-lvl, #noir-skill-picker .npf-lvl { padding: 8px 13px; font-size: 12.5px; }
  #noir-section-profile .npf-row__x, #noir-skill-picker .npf-row__x { width: 34px; height: 34px; }
  /* The skill name gets its own line so the ladder isn't squeezed into
     a 100px gutter on a 375px screen. */
  .npf-row__n { flex: 1 0 100%; min-width: 0; }
  .npf-row__x { position: absolute; top: 8px; right: 8px; }
  .npf-row { position: relative; padding-right: 46px; }

  /* Anything under 16px makes iOS Safari zoom the page on focus and never
     zoom back out. Desktop keeps 14px; the phone gets 16px. */
  #noir-section-profile .npf input[type="text"],
  #noir-section-profile .npf input[type="tel"],
  #noir-section-profile .npf input[type="url"],
  #noir-section-profile .npf input[type="search"],
  #noir-skill-picker input[type="search"],
  .npf select, .npf textarea { font-size: 16px !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .npf-card, .npf-meter, .npf-save { background-color: rgba(255, 255, 255, .93); }
  .noir-v3 .npf-card, .noir-v3 .npf-meter, .noir-v3 .npf-save { background-color: #1C1915; }
}
@media (prefers-reduced-motion: reduce) {
  .npf-meter__fill { transition: none; }
  #noir-section-profile .npf-opt:hover, #noir-skill-picker .npf-opt:hover { transform: none; }
}