/* jj-inventory-settings — Settings › Field names (JJ redesign #02).
   House tokens only, no hex. Painted by public/js/jj-inventory-settings.js
   into #settings-panel-field-names (one marked panel in index.html).
   Layout: stacked white cards; on a wide pane each card is two columns —
   title + explanation left, controls right, a thin vertical rule between. */

/* The page brings its own breadcrumb + title, so the shell's generic section
   head steps aside while this panel is open. */
#page-settings:has(#settings-panel-field-names.active) .wfs-section-head { display: none !important; }
/* Desktop: like Website, the page stands on its own — breadcrumb instead of the
   Settings header and sub-nav (the "Settings" crumb goes back to them). */
@media (min-width: 769px) {
  #page-settings.jjfn-standalone .settings-page-head,
  html #page-settings.jjfn-standalone .settings-tab-bar.wfs-nav { display: none !important; }
  html #page-settings.jjfn-standalone .wfs-shell { display: block; background: none; border: 0; box-shadow: none; padding: 0; }
  html #page-settings.jjfn-standalone .wfs-content { padding: 0; background: none; border: 0; }
  html #page-settings.jjfn-standalone .page-content { max-width: none !important; }
}

#settings-panel-field-names { font-family: var(--font-body); }
/* the shell's panel box (wfs2a-panel) would wrap the page in a second card */
html #page-settings #settings-panel-field-names { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#settings-panel-field-names #jjfn-root { container: jjfn / inline-size; color: var(--white); }

/* ── header ── */
.jjfn-head { margin: 0 0 22px; }
.jjfn-crumb { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.jjfn-crumb-a {
  display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0; margin: 0;
  font: inherit; color: var(--muted); background: none; border: 0; cursor: pointer;
}
.jjfn-crumb-a:hover { color: var(--white); }
.jjfn-crumb-a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.jjfn-crumb-back { display: none; }
.jjfn-crumb-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jjfn-crumb-here { color: var(--white); font-weight: 500; }
.jjfn-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.jjfn-title-txt { min-width: 0; }
.jjfn-link-m { display: none; }
.jjfn-title { margin: 0; font: 700 42px/1.1 var(--font-body); letter-spacing: -0.5px; color: var(--white); }
.jjfn-sub { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--off-white); }
.jjfn-learn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  font: 500 14px var(--font-body); color: var(--white); white-space: nowrap;
  background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: var(--radius); cursor: pointer;
}
.jjfn-learn svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jjfn-learn:hover { border-color: var(--blue); }
.jjfn-learn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.jjfn-loading { color: var(--off-white); font-size: 13px; }

/* ── cards ── */
.jjfn-cards { display: flex; flex-direction: column; gap: 20px; }
.jjfn-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.05fr);
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--white) 4%, transparent);
  padding: 24px 24px 22px;
}
.jjfn-card-l { padding: 2px 24px 0 2px; min-width: 0; }
.jjfn-card-r { padding: 0 0 0 24px; border-left: 1px solid var(--border); min-width: 0; }
.jjfn-card-t { margin: 0; font: 700 19px/1.25 var(--font-body); color: var(--white); }
.jjfn-card-d { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.jjfn-ro, .jjfn-note { margin: 10px 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--off-white); }

/* ── rows ── */
.jjfn-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 8px 0; border-top: 1px solid var(--border);
}
.jjfn-card-r > .jjfn-row:first-child, .jjfn-stg-top + .jjfn-row { border-top: 0; }
.jjfn-row-tight { min-height: 36px; padding: 1px 0; border-top: 0; }
.jjfn-row-txt { min-width: 0; flex: 1 1 auto; }
.jjfn-row-t { display: block; font-size: 14.5px; line-height: 1.35; color: var(--white); }
.jjfn-row-s { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
#settings-panel-field-names .toggle { flex: 0 0 48px; }

/* ── buttons ── */
.jjfn-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px;
  font: 500 14px var(--font-body); color: var(--white); white-space: nowrap;
  background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: 8px; cursor: pointer;
}
.jjfn-btn:hover { border-color: var(--blue); }
.jjfn-btn:focus-visible, .jjfn-link:focus-visible, .jjfn-seg-b:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.jjfn-btn-primary { color: var(--bg-raised); background: var(--blue); border-color: var(--blue); }
.jjfn-more { margin-top: 14px; }
.jjfn-stg-top { display: flex; justify-content: flex-end; padding-bottom: 6px; }
.jjfn-stg-top .jjfn-ro { margin: 0; }
.jjfn-link {
  flex: 0 1 352px; display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 16px; min-width: 0;
  font: 500 14.5px var(--font-body); color: var(--white); text-align: left;
  background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: 10px; cursor: pointer;
}
.jjfn-link:hover { border-color: var(--blue); }
.jjfn-link > span { flex: 1 1 auto; min-width: 0; }
.jjfn-link svg { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jjfn-link svg:first-child { color: var(--blue); }
.jjfn-link svg:last-child { width: 18px; height: 18px; flex-basis: 18px; }
.jjfn-row-link { padding-top: 14px; }

/* ── field names ── */
.jjfn-name-row {
  display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr) minmax(max-content, 0.74fr); align-items: center; gap: 8px 18px;
  padding: 6px 0; border-top: 1px solid var(--border);
}
.jjfn-name-row:first-child { border-top: 0; padding-top: 0; }
.jjfn-name-l { font-size: 14.5px; line-height: 1.35; color: var(--white); }
#settings-panel-field-names .jjfn-in {
  width: 100%; min-height: 42px; box-sizing: border-box; padding: 0 12px;
  font: 400 14.5px var(--font-body); font-size: 14.5px !important; color: var(--white);
  background: var(--bg-raised); border: 1.5px solid var(--border-light); border-radius: 8px;
}
.jjfn-in::placeholder { color: var(--off-white); opacity: 1; }
.jjfn-in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }
.jjfn-in:disabled { background: var(--bg-panel); color: var(--off-white); }
.jjfn-suggest {
  display: flex; align-items: center; min-height: 42px; box-sizing: border-box; padding: 0 12px;
  font-size: 13px; white-space: nowrap; color: var(--muted); background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
  overflow-wrap: anywhere;
}
.jjfn-suggest.is-empty { visibility: hidden; }

/* ── stages / selects ── */
.jjfn-sel { width: 240px; flex: 0 0 240px; padding-right: 32px; }
.jjfn-def.is-off { opacity: 0.55; }
.jjfn-def .jjfn-row { min-height: 48px; }
.jjfn-days { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--off-white); }
.jjfn-in-days { width: 76px; }

/* ── missing-info groups ── */
.jjfn-seg { display: none; }
.jjfn-grps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.jjfn-grp { min-width: 0; padding: 0 18px 14px; border-left: 1px solid var(--border); }
.jjfn-grp:first-child { padding-left: 0; border-left: 0; }
.jjfn-grp:last-child { padding-right: 0; }
.jjfn-days-row { min-height: 34px; padding-left: 12px; }
.jjfn-days-row .jjfn-row-s { margin: 0; }
#settings-panel-field-names .jjfn-in-days { width: 64px; min-height: 32px; padding: 0 8px; }
.jjfn-grp-l { padding: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ── rows that turn red ── */
.jjfn-tint { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }

/* ── Learn more sheet ── */
.jjfn-sheet-back {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: color-mix(in srgb, var(--white) 38%, transparent);
}
.jjfn-sheet {
  width: 100%; max-width: 520px; max-height: 88dvh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--white) 22%, transparent); font-family: var(--font-body);
}
.jjfn-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.jjfn-sheet-h h3 { margin: 0; font: 700 20px var(--font-body); color: var(--white); }
.jjfn-sheet-b { padding: 4px 20px 6px; overflow: auto; }
.jjfn-sheet-b p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--off-white); }
.jjfn-sheet-b b { color: var(--white); font-weight: 600; }
.jjfn-sheet-f { display: flex; justify-content: flex-end; padding: 10px 20px 18px; }
.jjfn-x {
  width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-width: 36px; max-height: 36px; flex: 0 0 36px;
  aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 10px; padding: 0; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--off-white); background: var(--bg-panel); border: 1px solid var(--border); cursor: pointer;
}
.jjfn-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ── narrow pane: one column, controls under the explanation ── */
@container jjfn (max-width: 720px) {
  .jjfn-card { grid-template-columns: minmax(0, 1fr); padding: 20px 18px 16px; }
  .jjfn-card-l { padding: 0 0 14px; }
  .jjfn-card-r { padding: 0; border-left: 0; }
  .jjfn-name-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .jjfn-suggest { white-space: normal; }
  .jjfn-name-row .jjfn-name-l { padding-top: 11px; }
  .jjfn-name-row .jjfn-suggest { grid-column: 2; }
  .jjfn-name-row .jjfn-suggest.is-empty { display: none; }
  .jjfn-tint { grid-template-columns: minmax(0, 1fr); }
  .jjfn-sel { width: 52%; flex-basis: 52%; }
  .jjfn-link { flex: 1 1 auto; }
  .jjfn-row-link { flex-wrap: wrap; }
}

/* ── phone (its own mockup: compact, 16px gutters) ── */
@media (max-width: 768px) {
  #page-settings:has(#settings-panel-field-names.active) .wfms-back { display: none !important; }
  .jjfn-crumb { margin: 0 0 2px; font-size: 14.5px; }
  .jjfn-crumb-a { min-height: 44px; gap: 6px; margin-left: -4px; }
  .jjfn-crumb-back { display: inline-flex; }
  .jjfn-crumb-back svg { width: 16px; height: 16px; }
  .jjfn-crumb-sep, .jjfn-crumb-here { display: none; }
  .jjfn-head { margin-bottom: 14px; }
  .jjfn-title-row { align-items: flex-start; gap: 10px; }
  .jjfn-title { font-size: 26px; letter-spacing: -0.4px; }
  .jjfn-sub { margin-top: 4px; font-size: 13.5px; line-height: 1.45; }
  .jjfn-learn { min-height: 44px; padding: 0 12px; gap: 6px; font-size: 13.5px; margin-top: 2px; }
  .jjfn-learn svg { width: 16px; height: 16px; flex-basis: 16px; }
  .jjfn-cards { gap: 14px; }
  .jjfn-card { position: relative; padding: 16px 16px 12px; }
  .jjfn-card-l { padding: 0 0 12px; }
  .jjfn-card-t { font-size: 18px; }
  .jjfn-card-d { margin-top: 4px; font-size: 13.5px; line-height: 1.45; }
  .jjfn-row-t { font-size: 15.5px; }
  .jjfn-name-l { font-size: 14px; white-space: nowrap; }
  .jjfn-row-s { font-size: 13px; }
  #settings-panel-field-names .jjfn-in, #settings-panel-field-names .jjfn-sel { font-size: 16px !important; min-height: 44px; }
  .jjfn-name-row { grid-template-columns: 148px minmax(0, 1fr) !important; gap: 6px 10px; padding: 6px 0; border-top: 0; }
  .jjfn-name-row .jjfn-name-l { padding-top: 12px; }
  .jjfn-suggest { min-height: 32px; font-size: 13px; padding: 0 12px; border-color: transparent; }
  .jjfn-btn { min-height: 44px; }
  #settings-panel-field-names .jjfn-sel { width: 64%; flex: 0 0 64%; }
  .jjfn-row-tight { min-height: 44px; border-top: 1px solid var(--border); }
  .jjfn-grp .jjfn-row-tight:first-of-type { border-top: 0; }
  #settings-panel-field-names .toggle { height: 44px; }
  /* Statuses & stages: Manage stages top-right beside the title; the tabs link is one row */
  #jjfn-stages .jjfn-card-t { padding-right: 150px; min-height: 44px; display: flex; align-items: center; }
  #jjfn-stages .jjfn-stg-top { position: absolute; top: 16px; right: 16px; padding: 0; }
  #jjfn-stages .jjfn-stg-top .jjfn-ro { max-width: 130px; }
  #jjfn-stages .jjfn-card-l { padding-bottom: 4px; }
  .jjfn-row-link { display: none; }
  .jjfn-link-m {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 0; margin: 0;
    text-align: left; font: inherit; color: var(--white); background: none; border: 0; border-top: 1px solid var(--border); cursor: pointer;
  }
  .jjfn-link-m > svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .jjfn-link-m > svg:first-child { color: var(--blue); width: 30px; height: 30px; flex-basis: 30px; }
  .jjfn-link-m > svg:last-child { width: 18px; height: 18px; flex-basis: 18px; }
  .jjfn-link-m .jjfn-row-txt { display: flex; flex-direction: column; }
  /* Missing-info: one group at a time behind a segmented control */
  .jjfn-seg {
    display: flex; gap: 0; margin: 0 0 8px; padding: 3px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  }
  .jjfn-seg-b {
    flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 6px;
    font: 500 15px var(--font-body); color: var(--off-white); white-space: nowrap;
    background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  }
  .jjfn-seg-b.is-on { color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, var(--bg-raised)); font-weight: 600; }
  .jjfn-grps { display: block; }
  .jjfn-grp, .jjfn-grp:first-child, .jjfn-grp:last-child { display: none; padding: 0; border: 0; }
  .jjfn-grp.is-seg { display: block; }
  .jjfn-grp-l { display: none; }
  .jjfn-sheet-back { align-items: flex-end; padding: 0; }
  .jjfn-sheet { max-width: none; border-radius: 16px 16px 0 0; }
  .jjfn-sheet-f .jjfn-btn { flex: 1 1 auto; }
  .jjfn-x { width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px; max-height: 44px; flex-basis: 44px; }
}

/* ══ Settings › Inventory (redesign #05) — painted into #jjiv-root at the top
   of #settings-panel-inventory. A draft: Cancel / Save changes. ══ */
#page-settings:has(#settings-panel-inventory.active #jjiv-root:not(:empty)) .wfs-section-head { display: none !important; }
#jjiv-root:empty { display: none; }
#jjiv-root { font-family: var(--font-body); color: var(--white); margin: 0 0 8px; }
.jjiv-m, .jjiv-m-only { display: none; }
.jjiv-head { padding: 0 0 20px; border-bottom: 1px solid var(--border); }
.jjiv-title { margin: 0; font: 600 23px/1.2 var(--font-body); color: var(--white); }
.jjiv-sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.jjiv-sec { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 0 30px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.jjiv-sec-t { margin: 0; font: 600 17px/1.3 var(--font-body); color: var(--white); }
.jjiv-sec-d { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.jjiv-sec-r { min-width: 0; }
.jjiv-tog-row { display: flex; align-items: flex-start; gap: 14px; }
.jjiv-tog-t { font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--white); }
.jjiv-tog-s { margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--muted); }
#jjiv-root .toggle { flex: 0 0 48px; margin-top: -6px; }
.jjiv-selrow { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; margin-top: 8px; }
.jjiv-selrow.is-off { opacity: 0.55; }
.jjiv-field { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; text-transform: none; letter-spacing: 0; }
.jjiv-lab { font-size: 13px; font-weight: 500; color: var(--white); }
.jjiv-selwrap { position: relative; display: block; }
#jjiv-root .jjiv-sel {
  width: 100%; min-height: 36px; height: 36px; box-sizing: border-box; padding: 0 34px 0 13px; margin: 0;
  font: 400 14px var(--font-body); font-size: 14px !important; color: var(--white);
  background: var(--bg-raised); border: 1px solid var(--border-light); border-radius: 6px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
#jjiv-root .jjiv-sel:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }
.jjiv-selwrap svg { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jjiv-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); text-align: left; padding-left: calc((100% - 40px) * 2.15 / 3.15 + 40px); }
.jjiv-tax { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.jjiv-tax-txt { max-width: 420px; }
.jjiv-stg { position: relative; display: flex; align-items: center; gap: 20px; padding-top: 14px; }
.jjiv-stg-txt { flex: 1 1 auto; min-width: 0; max-width: 470px; }
.jjiv-stg-btn { margin-left: auto; color: var(--blue); }
.jjiv-chev { display: none; }
.jjiv-prev {
  display: flex; align-items: center; gap: 18px; min-height: 50px; padding: 0 16px; margin: 0 0 6px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
}
.jjiv-prev.is-tint { background: var(--red-dim); border-color: color-mix(in srgb, var(--red) 22%, transparent); }
.jjiv-prev-ph { width: 34px; height: 40px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; color: var(--off-white); }
.jjiv-prev-ph svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jjiv-prev > span:last-child { display: flex; flex-direction: column; }
.jjiv-prev-t { font-size: 13.5px; font-weight: 500; color: var(--white); }
.jjiv-prev-s { font-size: 12px; color: var(--muted); }
.jjiv-on, .jjiv-more { display: none; }
.jjiv-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.jjiv-rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 29px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--white); }
.jjiv-rule:last-child { border-bottom: 0; }
#jjiv-root .jjiv-rule .toggle { margin-top: 0; height: 28px; }
.jjiv-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 22px 0 4px; }
.jjiv-foot .jjfn-btn { min-height: 38px; padding: 0 24px; font-size: 14px; }
.jjiv-cancel { color: var(--blue); }
.jjiv-save { color: var(--bg-raised); background: var(--blue); border-color: var(--blue); font-weight: 600; }
.jjiv-save:disabled { opacity: 0.6; cursor: default; }
.jjiv-ro { padding: 14px 0 0; }

@media (max-width: 768px) {
  #page-settings:has(#settings-panel-inventory.active) .wfs-section-head { display: none !important; }
  .jjiv-d, .jjiv-d-flex { display: none !important; }
  .jjiv-m { display: inline; }
  .jjiv-m-only { display: inline-flex; }
  #jjiv-root { margin: 0 0 16px; }
  .jjiv-card { padding: 0 18px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; }
  .jjiv-head { padding: 18px 0 16px; }
  .jjiv-title { font-size: 23px; font-weight: 500; }
  .jjiv-sub { margin-top: 4px; font-size: 14px; }
  .jjiv-sec { display: block; padding: 16px 0; }
  .jjiv-m-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .jjiv-sec-t { font-size: 18px; font-weight: 500; }
  .jjiv-sec-d { margin-top: 4px; font-size: 13.5px; }
  #jjiv-root .toggle { margin-top: 0; height: 44px; }
  .jjiv-selrow { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 12px; }
  .jjiv-lab { font-size: 13.5px; font-weight: 400; }
  .jjiv-field { gap: 6px; }
  #jjiv-root .jjiv-sel { height: 44px; min-height: 44px; font-size: 16px !important; padding-left: 14px; }
  .jjiv-hint { padding-left: 0; font-size: 13.5px; margin-top: 10px; }
  #jjiv-track { padding: 0; }
  #jjiv-track .jjiv-sec-l { display: none; }
  .jjiv-tax { flex-direction: row-reverse; justify-content: space-between; padding: 14px 0; }
  .jjiv-tax .jjiv-tog-t { font-size: 18px; font-weight: 500; }
  .jjiv-tog-s { font-size: 13.5px; }
  .jjiv-tog-t { font-size: 16px; font-weight: 400; }
  .jjiv-stg { min-height: 60px; padding: 10px 0; }
  .jjiv-stg-btn { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; }
  .jjiv-chev { display: block; width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .jjiv-pill { align-items: center; min-height: 28px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--bg-raised)); border-radius: 999px; }
  #jjiv-hl { border-bottom: 0; padding-bottom: 0; }
  .jjiv-prev { margin: 12px 0 4px; min-height: 60px; padding: 0 12px; gap: 14px; }
  .jjiv-prev-ph { width: 42px; height: 42px; flex-basis: 42px; background: var(--bg-raised); border-radius: 8px; }
  .jjiv-prev-t { font-size: 16px; font-weight: 400; }
  .jjiv-prev-s { font-size: 14px; }
  .jjiv-rules { display: none; }
  .jjiv-rules.is-more { display: block; }
  .jjiv-rules.is-more + .jjiv-more { border-top: 1px solid var(--border); }
  .jjiv-on { display: block; }
  .jjiv-rules.is-more ~ .jjiv-on, .jjiv-sec-r:has(.jjiv-rules.is-more) .jjiv-on { display: none; }
  .jjiv-rule { min-height: 48px; font-size: 16px; }
  .jjiv-rule:last-child { border-bottom: 1px solid var(--border); }
  #jjiv-root .jjiv-rule .toggle { height: 44px; }
  .jjiv-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 8px 0; margin: 0; text-align: left; font: inherit; color: var(--white); background: none; border: 0; cursor: pointer; }
  .jjiv-more > span { display: flex; flex-direction: column; }
  .jjiv-more svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .jjiv-foot {
    position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 6;
    margin: 0 -18px; padding: 12px 18px 14px; gap: 14px;
    background: var(--bg-raised); border-top: 1px solid var(--border); border-radius: 0 0 12px 12px;
  }
  .jjiv-foot .jjfn-btn { flex: 1 1 0; min-height: 48px; font-size: 16px; }
  #page-settings:has(#settings-panel-inventory.active #jjiv-root .jjiv-foot) .page-content.wfs-page { overflow: clip; }
}