/* ============================================================
   ideo field porter – UI
   ============================================================ */

/* Manrope — self-hosted (SIL OFL 1.1, see assets/fonts/LICENSE-manrope.txt).
   No external requests: previously loaded from fonts.googleapis.com. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/manrope-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/manrope-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/manrope-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/manrope-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/manrope-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/manrope-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/manrope-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/manrope-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:          #ffffff;

  --link:   #0783be;
  --light:  #f9fafb;
  --text:   #344054;
  --alert:  #E03137;
  --medium: #d8ebf5;

  --radius:    8px;
  --radius-sm: 4px;

  /* Preview modal fade in/out duration — change this one value to adjust it. */
  --ifp-modal-fade: .35s;

  /* Single spacing unit for the page shell: shell outer margin, header/tabs/
     body horizontal padding, body padding+gap, footer padding — keeps every
     edge in the shell aligned and every gap between .ifp-settings-section
     blocks identical, whether or not a given block sits inside a <form>. */
  --ifp-gap: 20px;
}

body.plugin-ideo-field-porter .wrap.ifp-wrap {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-size: 14px;
  line-height: 1.5rem;
}

body.plugin-ideo-field-porter  #wpwrap {
  background-color: var(--light);
}
body.plugin-ideo-field-porter #wpcontent {
  padding-left: 0;
}

/* body.plugin-ideo-field-porter .wrap.ifp-wrap * {
    font-size: inherit;
} */
body.plugin-ideo-field-porter .wrap.ifp-wrap
:is(p, ul, li, button, code, span, input) {
  font-size: var(--ifp-el-font-size, 14px);
  letter-spacing: var(--ifp-el-letter-spacing, 0.5px);
  color: var(--ifp-el-color, var(--text));
}
body.plugin-ideo-field-porter .wrap.ifp-wrap h1 {
    font-size: 30px;
    letter-spacing: 0.5px;
    color: var(--text);
}
body.plugin-ideo-field-porter .wrap.ifp-wrap h2 {
    font-size: 24px;
    letter-spacing: 0.5px;
    font-weight: initial;
    color: var(--text);
}

body.plugin-ideo-field-porter .wrap.ifp-wrap input[type="radio"]:checked,
body.plugin-ideo-field-porter .wrap.ifp-wrap input[type="checkbox"]:checked {
  background: var(--link);
  border-color: var(--link);
}
body.plugin-ideo-field-porter .wrap.ifp-wrap .button {
  color: var(--link);
  border-color: var(--link);
}
body.plugin-ideo-field-porter .wrap.ifp-wrap .widefat thead tr th {
  color: var(--link);
}
body.plugin-ideo-field-porter .wrap.ifp-wrap span.ifp-step__num {
  color: var(--bg);
}


/* ── Buttons ─────────────────────────────────────────────── */
body.plugin-ideo-field-porter .wrap.ifp-wrap
:is(button.button, .button.button-primary, .ifp-btn-danger) {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background-color: var(--alert);
  border: 1px solid var(--alert);
  color: var(--bg);
  transition: border-color var(--ifp-modal-fade), background var(--ifp-modal-fade);
  line-height: inherit;
  height: 40px;
  padding: 0 10px;
  font-weight: 500;
  font-size: .875rem;
}

body.plugin-ideo-field-porter .wrap.ifp-wrap
:is(.ifp-btn-danger, button.button, .button.button-primary):hover {
  border-color: var(--light);
}

body.plugin-ideo-field-porter .wrap.ifp-wrap .button.ifp-btn-danger {
  background-color: var(--bg);
  color: var(--alert);
  font-weight: bold;
}
body.plugin-ideo-field-porter .wrap.ifp-wrap .button.ifp-btn-danger:hover {
  background-color: var(--medium);
  border-color: var(--medium);
}
body.plugin-ideo-field-porter .wrap.ifp-wrap .button.ifp-btn-test-import {
  background-color: var(--bg);
  color: var(--alert);
  font-weight: bold;
}
body.plugin-ideo-field-porter .wrap.ifp-wrap .button.ifp-btn-test-import:hover {
  background-color: var(--medium);
  border-color: var(--medium);
}

a.ifp-buy {
  padding: 8px;
  border: solid 1px var(--link);
  border-radius: 10px;
  background: var(--link);
  color: var(--bg);
  text-decoration: none;
  font-weight: bold;
  transition: var(--ifp-modal-fade);
}
a.ifp-buy:hover {
  border-color: var(--bg);
  color: var(--medium);
}

body.plugin-ideo-field-porter .wrap.ifp-wrap 
:is(
  a,
  button,
  .button,
  .button.button-primary,
  .ifp-btn-danger,
  input,
  textarea,
  select
):is(:focus, :active, :visited) {
  outline: none;
  box-shadow: none;
}

.ideo_field_icon {
  width:60px;
}
.ideo_field_icon .st0 {
  fill: var(--link);
}
.ideo_field_icon .st1 {
  fill: var(--alert);
}
.ideo_field_icon .st2 {
  fill: var(--text);
}




/* ── Base wrap ─────────────────────────────────────────────── */
.ifp-wrap {
  /* max-width: 1024px; */
  box-sizing: border-box;
  margin: 0;
}


/* ── Title ─────────────────────────────────────────────────── */
.ifp-header,
body.plugin-ideo-field-porter .wrap.ifp-wrap h1.ifp-title {
  display: flex;
  align-items: end;
  gap: 12px;
  /* background-color: var(--link); */
  padding: 0;
  height: 95px;
}
/* Flex items default to min-width: auto, not 0 — meaning they refuse to
 * shrink below their content's natural size, regardless of any width/
 * max-width set on an ancestor. That's what was making
 * .ifp-header-container look like it had a fixed width when shrinking the
 * window: the row itself could shrink, but the title's text content
 * inside it wouldn't, setting a hard floor. Allowing the title to shrink,
 * and truncating its text instead of letting it force an overflow, lets
 * the whole row genuinely respond to .ifp-header-container's width. */
.ifp-header-container h1.ifp-title {
  min-width: 0;
}
.ifp-header-container h1.ifp-title > div {
  min-width: 0;
}
h1 .ifp-title__plugin,
h1 .ifp-title__page {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifp-header-container #ifp-save-btn,
.ifp-header-container a.ifp-buy {
  flex-shrink: 0;
}
.ifp-header {
  padding-top: 30px;
  border-bottom: 0.25px solid var(--text);
  background-color: var(--bg);
  box-shadow: 0 5px 20px rgba(0,0,0,.2);
}
/* .ifp-header-width is the full-width visual bar (background/border/
 * shadow — added below, Settings only), and .ifp-header-container is the
 * fluid content area inside it (width: 100% so it shrinks with the
 * viewport, capped at max-width) that handles arranging the 3 flex items
 * (title, save button, PRO version link) — split into two elements so
 * each concern (full-bleed background vs. constrained/responsive content
 * width) can be adjusted independently. .ifp-header-container also
 * reproduces the row layout .ifp-header itself normally provides (title +
 * actions) — needed so .ifp-header can become a column wrapper on the
 * Settings page specifically (see below), letting the Account indicator
 * stack below this row while staying inside the same fixed block as
 * everything else. By default (e.g. Export/Import pages) the shadow/
 * border/background live on .ifp-header itself, above — the Settings-
 * page-specific override below moves them onto .ifp-header-width
 * instead, so the full-width line sits under the title row specifically,
 * with the Account indicator hanging below it. */
.ifp-header-width {
  width: 100%;
}
.ifp-header-container {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 60px;
  padding: 20px 0 15px 15px;
  height: 95px;
  width: 100%;
  max-width: 1395px;
}
h1 .ifp-title__plugin {
  font-size: 1rem;
  font-weight: bold;
}
h1 .ifp-title__page {
  font-weight: lighter;
}

body.plugin-ideo-field-porter .wrap.ifp-wrap h1.ifp-settings-title {
  display: flex;
  align-items: center;
}
h1.ifp-settings-title .ideo_field_icon {
  margin-right: 10px;
}

.ifp-title .dashicons {
  font-size: 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--link);
}

/* ── Page shell (single unified box: header + tabs + body + footer) ──── */
.ifp-shell {
  max-width: 1400px;
  margin: var(--ifp-gap);
  /* Body area shows this tint through; header/tabs/footer paint their own
     white background on top, so the single box still reads as three
     visually separated zones like the mockup. --light itself is too close
     to white to read as a separate zone (it's tuned for subtle hover/row
     tints elsewhere), so this derives a slightly stronger, still-neutral
     shade straight from the existing --text/--bg tokens instead of adding
     a new hardcoded gray. */
  background: color-mix(in srgb, var(--text) 6%, var(--bg));
  border: 1px solid var(--medium);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  overflow: hidden;
}
.ifp-shell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 18px var(--ifp-gap);
  background: var(--bg);
  border-bottom: 1px solid var(--medium);
}
.ifp-shell__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ifp-shell__brand-icon {
  display: block;
  flex-shrink: 0;
}
.ifp-shell__brand-icon .ideo_field_icon {
  width: 50px;
  height: auto;
  display: block;
}
.ifp-shell__plugin-name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  opacity: .65;
}
.ifp-shell__page-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifp-shell__mode {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.ifp-shell__header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ifp-shell__mode-label {
  font-size: .8rem;
  color: var(--text);
  opacity: .65;
}
.ifp-shell__tabs {
  display: flex;
  gap: 4px;
  padding: 0 var(--ifp-gap);
  background: var(--bg);
  border-bottom: 1px solid var(--medium);
  overflow-x: auto;
}
.ifp-shell__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 22px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text);
  opacity: .65;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ifp-modal-fade), opacity var(--ifp-modal-fade), border-color var(--ifp-modal-fade);
}
.ifp-shell__tab:hover {
  opacity: 1;
  color: var(--link);
}
.ifp-shell__tab--active {
  color: var(--link);
  opacity: 1;
  font-weight: 600;
  border-bottom-color: var(--link);
}
.ifp-shell__body {
  padding: var(--ifp-gap);
  display: flex;
  flex-direction: column;
  gap: var(--ifp-gap);
}
.ifp-shell__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: var(--ifp-gap);
  background: var(--bg);
  border-top: 1px solid var(--medium);
}
/* .ifp-shell__footer is always a direct child of .ifp-shell__body (Import
   keeps its own .ifp-card scoped to just the content above the footer,
   closing it before the grid/footer siblings) — so a single breakout rule,
   matching .ifp-shell__header/__tabs which sit outside .ifp-shell__body's
   padding entirely, is enough to reach the shell's true edges everywhere. */
.ifp-shell__body > .ifp-shell__footer {
  margin: 0 calc(var(--ifp-gap) * -1) calc(var(--ifp-gap) * -1);
  width: 100%;
}
/* #ifp-settings-form sits as a single flex item inside .ifp-shell__body, so
   its own .ifp-settings-section children don't inherit the body's flex gap
   — without this, sections inside the form touch edge-to-edge while sections
   outside it are evenly spaced. Same gap unit, so both look identical. */
#ifp-settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--ifp-gap);
}
.ifp-shell__footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Card ──────────────────────────────────────────────────── */
.ifp-card {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 22px 24px;
  border: 1px solid var(--medium);
}
.ifp-card h2 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.ifp-description {
  color: var(--text);
  font-size: .875rem;
  margin-bottom: 22px;
  line-height: 1.6;
}
.ifp-h2-count {
  --ifp-el-font-size: .8rem;
  --ifp-el-color: var(--text);
  font-weight: 400;
  opacity: .65;
}

/* ── Steps indicator ───────────────────────────────────────── */
.ifp-steps {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 14px 24px;
  border: 1px solid var(--medium);
}
.ifp-step {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: .4;
}
.ifp-step--active { opacity: 1; }
.ifp-step--done   { opacity: .65; }

.ifp-step__num {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  background: var(--light);
  color: var(--text);
}
.ifp-step--active .ifp-step__num {
  background: var(--link);
  color: var(--bg);
}
.ifp-step--done .ifp-step__num {
  background: var(--light);
  color: var(--link);
}
.ifp-step__label {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
}
.ifp-step__arrow {
  margin: 0 18px;
  color: var(--medium);
  font-size: 1.2rem;
  line-height: 1;
}

/* ── Dropzone ──────────────────────────────────────────────── */
.ifp-dropzone {
  display: flex;
  gap: 30px;
  background: var(--light);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  border: 2px dashed var(--text);
  position: relative;
  transition: border-color var(--ifp-modal-fade), background var(--ifp-modal-fade);
}
.ifp-dropzone:hover {
  border-color: var(--link);
  background: var(--light);
}
.ifp-dropzone__icon {
  font-size: 2.2rem ;
  color: var(--medium);
  display: block;
  margin-bottom: 10px;
}
body.plugin-ideo-field-porter .wrap.ifp-wrap span.ifp-dropzone__icon { font-size: 40px; color: var(--link); }
.ifp-dropzone p {
  margin-top: 9px;
  color: var(--text);
  font-size: .875rem;
}
#dd-file {
  font-weight: 600;
  color: var(--text);
  font-size: .9rem;
  font-family: var(--mono);
}
#dd-remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 22px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--light);
  color: var(--alert);
  font-size: .8rem;
  cursor: pointer;
  transition: background var(--ifp-modal-fade), border-color var(--ifp-modal-fade);
}
#dd-remove:hover {
  background: var(--light);
  border-color: var(--alert);
}

/* ── Buttons ───────────────────────────────────────────────── */
.button.ifp-submit,
.button-primary.ifp-submit {
  background: var(--alert) ;
  color: var(--bg) ;
  border: 1px solid var(--alert) ;
  border-radius: var(--radius-sm) ;
  padding: 0 24px ;
  height: 40px ;
  line-height: 40px ;
  font-weight: 600 ;
  font-size: .875rem ;
  text-shadow: none ;
  cursor: pointer ;
  transition: border-color var(--ifp-modal-fade), background var(--ifp-modal-fade) ;
}
.button.ifp-submit:hover,
.button-primary.ifp-submit:hover {
  border-color: var(--light) ;
}

.button.ifp-btn-back,
.button.ifp-btn-undo {
  background: var(--bg) ;
  color: var(--text) ;
  border: 1px solid var(--medium) ;
  border-radius: var(--radius-sm) ;
  padding: 0 20px ;
  height: 40px ;
  line-height: 40px ;
  font-weight: 500 ;
  font-size: .875rem ;
  text-shadow: none ;
  cursor: pointer ;
  transition: border-color var(--ifp-modal-fade), color var(--ifp-modal-fade) ;
}
.button.ifp-btn-back:hover {
  border-color: var(--link) ;
  color: var(--link) ;
  background: var(--medium);
}
.button.ifp-btn-undo {
  color: var(--alert) ;
}
.button.ifp-btn-undo:hover {
  border-color: var(--alert) ;
}

/* ── Profile chips (Load a profile) ───────────────────────────
   Single shared style for the "load a profile" chip (mirrors PRO's
   .ifp-profile-load, though PRO also reuses it for Export's AJAX flow —
   free only has Import). */
.ifp-profiles-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
/* Small pill (20px tall) rather than a full-size button — a saved-profiles
   list can grow long, and a 40px chip per profile eats space fast. Border/
   background live on the chip wrapper (the single pill shape); the load
   and delete buttons inside are transparent so nothing double-borders.
   min-height (not height) + align-items:stretch below: a long profile name
   wraps onto several lines instead of pushing the × delete button past the
   card's edge — the delete form/button stretch to match automatically. */
.ifp-profile-chip {
  display: flex;
  align-items: stretch;
  min-height: 20px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--link);
  background: var(--bg);
  transition: border-color var(--ifp-modal-fade);
}
.ifp-profile-chip:hover {
  border-color: var(--medium);
}
/* "Default" chip — resets the mapping/columns back to the original schema.
   Same pill as a saved profile, but permanently red-bordered (not just on
   hover) to read as distinct from the saved-profile list rather than as
   one more entry in it. */
.ifp-profile-chip--danger,
.ifp-profile-chip--danger:hover {
  border-color: var(--alert);
}
.ifp-profile-load {
  display: flex;
  align-items: center;
  background: transparent ;
  border: none ;
  color: var(--text) ;
  font-size: .7rem ;
  font-weight: 500 ;
  padding: 3px 8px ;
  cursor: pointer ;
  text-shadow: none ;
  max-width: 160px;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
  line-height: 1.3;
}
/* Needs to out-specify the blanket :is(button.button, ...) red-pill rule
   above (which would otherwise win on background/border/color/height/
   padding) — same technique already used for e.g. .ifp-btn-back. That rule
   sets a fixed height:40px, a *different* property from min-height, so
   losing the cascade on `height` alone (even though this selector wins on
   every other property here) silently clamps every chip to exactly 40px —
   both properties need an explicit value here. */
body.plugin-ideo-field-porter .wrap.ifp-wrap button.button.ifp-profile-load {
  height: auto;
  min-height: 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text);
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.3;
  max-width: 160px;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
}
.ifp-profile-delete-form { display: flex; align-items: stretch; }
.ifp-profile-delete {
  display: flex;
  align-items: center;
  border: none;
  border-left: 1px solid var(--link);
  background: transparent;
  color: var(--text);
  font-size: .65rem;
  padding: 0 6px;
  cursor: pointer;
  transition: color var(--ifp-modal-fade);
}
.ifp-profile-delete:hover { color: var(--alert); }

/* ── Card grid: a row of matched sub-cards (load/save profile in Import,
   sheet-taxonomy/load/save profile in Export) — auto-fit so the same
   markup/CSS works whether 1, 2 or 3 cards are present, no per-count
   modifier class needed. */
.ifp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.ifp-card--sub {
  padding: 18px 20px;
  max-width: none;
}
.ifp-card__label {
  display: flex;
  align-items: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.ifp-card__empty {
  font-size: .8rem;
  color: var(--text);
  opacity: .5;
  font-style: italic;
  margin: 0;
}

/* ── Save profile input ─────────────────────────────────────── */
.ifp-save-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ifp-profile-name-input.regular-text {
  height: 40px ;
  border-radius: var(--radius-sm) ;
  border: 1px solid var(--medium) ;
  background: var(--bg) ;
  color: var(--text) ;
  font-size: .875rem ;
  padding: 0 16px ;
  outline: none ;
  width: 180px ;
  transition: border-color var(--ifp-modal-fade) ;
}
.ifp-profile-name-input:focus {
  border-color: var(--link) ;
}
#ifp-btn-save-profile {
  background: var(--bg) ;
  border: 1px solid var(--medium) ;
  border-radius: var(--radius-sm) ;
  color: var(--text) ;
  font-size: .8rem ;
  font-weight: 500 ;
  height: 40px ;
  line-height: 40px ;
  padding: 0 16px ;
  cursor: pointer ;
  text-shadow: none ;
  transition: border-color var(--ifp-modal-fade), color var(--ifp-modal-fade) ;
}
#ifp-btn-save-profile:hover {
  border-color: var(--link) ;
  color: var(--link) ;
}

/* ── Mapping table ─────────────────────────────────────────── */

.ifp-mapping-table {
  border-collapse: separate;
  border-spacing: 0 4px;
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  background: transparent ;
  border: none ;
}
.ifp-mapping-table th {
  background: transparent ;
  color: var(--medium) ;
  font-size: .72rem ;
  font-weight: 600 ;
  text-transform: uppercase ;
  padding: 6px 14px ;
}
.widefat thead th {
  border-bottom: none;
}
.ifp-mapping-row td {
  background: var(--bg);
  padding: 10px 14px;
  border-top: 1px solid var(--medium);
  border-bottom: 1px solid var(--medium);
}
.ifp-mapping-row td:first-child {
  border-left: 1px solid var(--medium);
  border-radius: var(--radius) 0 0 var(--radius);
}
.ifp-mapping-row td:last-child {
  border-right: 1px solid var(--medium);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ifp-col-name code {
  font-family: var(--mono) ;
  font-size: .8rem ;
  color: var(--link) ;
  background: transparent ;
  padding: 0 ;
  font-weight: 500 ;
}
.ifp-col-preview {
  max-width: 320px;
}
.ifp-col-preview .ifp-preview {
  color: var(--medium);
  font-size: .8rem;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.ifp-select {
  background: var(--light) ;
  border: 1px solid var(--light) ;
  border-radius: var(--radius) ;
  color: var(--text) ;
  font-size: .82rem ;
  height: 34px ;
  padding: 0 14px ;
  width: 100% ;
  cursor: pointer ;
  outline: none ;
  -webkit-appearance: none ;
  appearance: 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='%233858e9'/%3E%3C/svg%3E") ;
  background-repeat: no-repeat ;
  background-position: right 12px center ;
  transition: border-color var(--ifp-modal-fade) ;
}
.ifp-select:focus {
  border-color: var(--link) ;
}

/* ── Actions bar ───────────────────────────────────────────── */
.ifp-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--medium);
}
.ifp-actions-bar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ifp-actions { margin-top: 20px; }
.ifp-form { display: flex; flex-direction: column; gap: 16px; max-width: 1024px; }
.ifp-form--wide { max-width: none; }

/* ── Notices ───────────────────────────────────────────────── */
.ifp-notice {
  border-radius: var(--radius);
  padding: 16px 32px;
  margin: var(--ifp-gap);
  font-size: .875rem;
  background: var(--bg);
  border: 1px solid var(--light);
}
.ifp-notice--success {
  border: 2px solid var(--link);
  padding: 16px 32px;
  margin: var(--ifp-gap);
}
.ifp-notice--success a {
  color: var(--alert);
}
.ifp-notice.ifp-notice--info { margin: 0 }
.ifp-notice--warning {
  border-left: 4px solid #f0ad00;
}
.ifp-notice--error {
  border: 2px solid var(--alert);
  margin-left: var(--ifp-gap);
  padding: 5px 20px;
  width: fit-content;
}
.ifp-notice p { margin: 4px 0; line-height: 1.6; }
.ifp-error-item { color: var(--alert); }

/* ── Tabs ──────────────────────────────────────────────────── */
.ifp-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--medium);
  padding-bottom: 0;
  margin: var(--ifp-gap);
  max-width: 1345px;
}
.ifp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: var(--radius) var(--radius) 0 0;
  font-weight: initial;
  font-size: 1.3rem;
  color: var(--text);
  text-decoration: none;
  background-color: var(--medium);
  border: solid 3px var(--medium);
  border-bottom: none;
  transition: color var(--ifp-modal-fade), background var(--ifp-modal-fade);
  position: relative;
  bottom: -1px;
}
.ifp-tab:active, .ifp-tab:focus { border-radius: var(--radius) var(--radius) 0 0; }
.ifp-tab:hover {
  border-color: var(--light);
}
.ifp-tab:hover, .ifp-tab:focus {
  color: var(--bg);
}
.ifp-tab--active {
  color: var(--bg);
  background: var(--text);
  border-color: var(--light);
  border-bottom-color: var(--bg);
  font-weight: initial;
}

/* ── Export format cards ────────────────────────────────────── */
.ifp-format-choice {
  display: flex;
  gap: 16px;
  margin: 24px 0;
  flex-wrap: wrap;
}
.ifp-format-option {
  min-width: 220px;
  cursor: pointer;
}
.ifp-format-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ifp-format-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 2px solid var(--light);
  background: var(--light);
  transition: border-color var(--ifp-modal-fade), background var(--ifp-modal-fade);
}
.ifp-format-option input[type="radio"]:checked + .ifp-format-label {
  border-color: var(--link);
  background: var(--bg);
}
.ifp-format-option:hover .ifp-format-label {
  border-color: var(--link);
}
.ifp-format-icon {
  font-size: 2rem;
  line-height: 1;
}
.ifp-format-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ifp-format-text strong {
  font-size: 1rem;
  color: var(--text);
}
.ifp-format-text small {
  font-size: .8rem;
  color: var(--text);
  line-height: 1.3;
}

.ifp-format-choice--inline {
  margin: 0;
}
.ifp-format-choice--inline .ifp-format-label {
  padding: 10px 14px;
}
.ifp-format-choice--inline .ifp-format-icon { font-size: 1.2rem; }

/* ── Separator column ───────────────────────────────────────── */
.ifp-col-sep {
  white-space: nowrap;
  vertical-align: middle;
}
.ifp-sep-select {
  height: 32px ;
  padding: 0 8px ;
  font-size: .82rem ;
  font-family: var(--mono) ;
  border: 1px solid var(--light) ;
  border-radius: var(--radius) ;
  background: var(--light) ;
  color: var(--link) ;
  cursor: pointer ;
  min-width: auto ;
  -webkit-appearance: auto ;
  appearance: auto ;
  background-image: none ;
}
.ifp-sep-select:focus {
  border-color: var(--link) ;
  outline: none ;
}

/* ── Multi-sheet export select ──────────────────────────────────────── */
.ifp-sheet-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ifp-sheet-mode__desc {
  display: flex;
  align-items: start;
  margin: 0;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  font-style: normal;
}
.ifp-sheet-mode__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ifp-sheet-mode__row strong {
  color: var(--text);
  white-space: nowrap;
}
.ifp-sheet-mode select {
  min-width: 220px;
}
/* ── Multi-sheet import notice ──────────────────────────────────────── */
.ifp-multisheet-notice, .ifp-sheet-mode {
  background: var(--bg);
  border: 1px solid var(--link);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  font-size: 13px;
  width: fit-content;
}
.ifp-multisheet-notice > strong {
  color: var(--link);
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}
.ifp-multisheet-tax {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 6px;
}
.ifp-multisheet-tax label {
  font-weight: 600;
  font-size: 13px;
}
.ifp-multisheet-tax select {
  min-width: 260px;
}
.ifp-multisheet-tax .description {
  font-size: 12px;
  color: var(--text);
  margin: 0;
}

/* ── Export nested fields warning notice ────────────────────────────── */
.ifp-notice--warning {
  background: #ffffff;
  border: 1px solid var(--link);
  border-radius: var(--radius);
  padding: 16px 32px;
  margin: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}
.ifp-notice--warning strong:first-child {
  color: var(--link);
  margin-right: 4px;
}

/* ── Duplicate-titles Modal (Import) ───────────────────────────────────
 * Same open/close skeleton as the Export Preview modal above (own ids,
 * independent instance — not shared) : backdrop + centered dialog, fade
 * via --ifp-modal-fade, toggled with a single .ifp-dupe-modal--open class.
 */
#ifp-dupe-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ifp-modal-fade) ease, visibility 0s linear var(--ifp-modal-fade);
}
#ifp-dupe-modal.ifp-dupe-modal--open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--ifp-modal-fade) ease, visibility 0s linear;
}
#ifp-dupe-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
#ifp-dupe-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: min(96vw, 560px);
  max-height: 80vh;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: transform var(--ifp-modal-fade) ease, opacity var(--ifp-modal-fade) ease;
}
#ifp-dupe-modal.ifp-dupe-modal--open #ifp-dupe-dialog {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
#ifp-dupe-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--light);
  flex-shrink: 0;
}
#ifp-dupe-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--link);
}
#ifp-dupe-close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text);
  padding: 2px 6px;
  border-radius: var(--radius);
  line-height: 1;
  transition: background var(--ifp-modal-fade), color var(--ifp-modal-fade);
}
#ifp-dupe-close:hover {
  background: var(--light);
  color: var(--link);
}
#ifp-dupe-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
#ifp-dupe-body p {
  margin: 0 0 12px;
  color: var(--text);
  font-size: .88rem;
}
#ifp-dupe-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 10px;
}
.ifp-dupe-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--light);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  color: var(--text);
  cursor: pointer;
  transition: background var(--ifp-modal-fade);
}
.ifp-dupe-item:hover {
  background: var(--medium);
}
.ifp-dupe-item input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
}
.ifp-dupe-item span {
  word-break: break-word;
}
#ifp-dupe-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--light);
  flex-shrink: 0;
}
#ifp-dupe-deselect {
  margin-right: auto;
}


/* ── Utility ────────────────────────────────────────────────────────── */
.ifp-hidden {
  display: none !important;
}

/* ── Import: undo form ──────────────────────────────────────────────── */
.ifp-undo-form {
  margin-top: 10px;
}

/* ── Import: mode badge (Standard / Hierarchical) ───────────────────── */
.ifp-mode-badge {
  font-size: 12px;
  font-weight: normal;
  background: #3858e9;
  color: var(--bg);
  padding: 2px 8px;
  border-radius: var(--radius);
  margin-left: 10px;
  vertical-align: middle;
}

/* ── Import/Export: inline warning notice ───────────────────────────── */
.ifp-notice--warning-inline {
  background: #fff8e1;
  border-left: 4px solid #f0a500;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  width: fit-content;
}

/* ── Import: column parent hint ─────────────────────────────────────── */
.ifp-col-parent-hint {
  font-size: 11px;
  color: var(--medium);
  display: block;
  margin-bottom: 2px;
}

/* ── Settings: section ──────────────────────────────────────────────── */
.ifp-settings-section {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 22px 24px;
  border: 1px solid var(--medium);
}

/* ── Settings: WP notices spacing ──────────────────────────────────── */
.ifp-settings-notice {
  margin: 12px 0;
}

/* ── Settings: section titles ───────────────────────────────────────── */
.ifp-settings-section-title {
  border-bottom: 1px solid var(--medium);
  padding-bottom: 6px;
  margin: 0;
}
.ifp-settings-section-title--mt30 {
  margin-top: 30px;
}
.ifp-settings-section-title--mt60 {
  margin-top: 60px;
}

/* ── Settings: checkbox/radio labels ───────────────────────────────── */
.ifp-settings-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  cursor: pointer;
}
.ifp-settings-label input[type="checkbox"] {
  flex-shrink: 0;
}

/* ── Settings: hint text ────────────────────────────────────────────── */
.ifp-settings-hint {
  font-size: 12px;
  color: var(--text);
}

/* ── Settings: info notice (mode recommendation) ────────────────────── */
.ifp-notice--info {
  background: var(--bg);
  border: 2px solid var(--alert);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 10px;
  margin-bottom: 16px;
  font-size: 17px;
  color: var(--alert);
  width: fit-content;
}
.ifp-notice--info a {
  color: var(--alert);
  transition: var(--ifp-modal-fade);
}
.ifp-notice--info a:hover {
  opacity: 0.6;
}

/* ── Settings: media URL fieldset ───────────────────────────────────── */
.ifp-media-fieldset {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  border: none;
  padding: 0;
}
.ifp-media-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ifp-media-label input[type="radio"] {
  flex-shrink: 0;
}
.ifp-radio-mt {
  margin-top: 3px;
}
.ifp-code-hint {
  font-size: 11px;
  color: var(--text);
}

/* ── Settings: post types list ──────────────────────────────────────── */
.ifp-pt-group-label {
  font-weight: 600;
  margin-bottom: 4px;
  margin-top: 16px;
}
.ifp-pt-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 25px;
}
.ifp-pt-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.ifp-pt-code {
  font-size: 11px;
  color: var(--text);
}

/* ── Settings: actions row ──────────────────────────────────────────── */
.ifp-settings-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 60px;
}
.ifp-reset-form {
  display: inline-block;
}
.ifp-logs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0 0;
}
.ifp-logs-actions .ifp-reset-form {
  margin: 0;
}
.ifp-logs-actions > a.button {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
}

/* ── Settings: colour picker ────────────────────────────────────────── */
.ifp-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ifp-picker-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow var(--ifp-modal-fade);
}
.ifp-picker-popover {
  display: none;
  position: absolute;
  top: 46px;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  z-index: 9999;
  width: 240px;
  user-select: none;
}
.ifp-picker-popover.is-open { display: block; }
#ifp-canvas-grad {
  width: 212px;
  height: 150px;
  border-radius: var(--radius);
  cursor: crosshair;
  display: block;
}
.ifp-canvas-cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
  pointer-events: none;
  transform: translate(-50%,-50%);
}
.ifp-grad-wrap {
  position: relative;
  margin-bottom: 10px;
}
.ifp-hue-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 212px;
  height: 14px;
  border-radius: var(--radius);
  outline: none;
  background: linear-gradient(to right, #f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  cursor: pointer;
  margin-bottom: 10px;
  display: block;
  border: 1px solid #ddd;
}
.ifp-hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #999;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.ifp-hue-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #999;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.ifp-picker-hex-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.ifp-picker-hex-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: monospace;
}
.ifp-picker-hex-input {
  flex: 1;
  font-size: 13px;
  font-family: monospace;
  border: 1px solid #ddd;
  border-radius: var(--radius);
  padding: 5px 8px;
  text-transform: uppercase;
}
.ifp-picker-hex-input:focus {
  outline: none;
  border-color: var(--medium);
}
.ifp-preview-swatches {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ifp-preview-swatch {
  display: inline-block;
  width: 50px;
  height: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--medium);
}
.ifp-preview-label {
  font-size: 12px;
  color: var(--text);
}

/* ── Settings: mode cards ────────────────────────────────────────────── */
.ifp-mode-cards {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-top: 16px;
}
.ifp-mode-card {
  flex: 1;
  min-width: 0;
  max-width: 600px;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--ifp-modal-fade), box-shadow var(--ifp-modal-fade);
  background: #fff;
}
.ifp-mode-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}
.ifp-mode-card__header input[type="radio"] {
  margin: 0;
  flex-shrink: 0;
}
.ifp-mode-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.ifp-mode-card__desc {
  font-size: 13px;
  color: var(--text);
  padding: 0 16px 12px;
  line-height: 1.5;
  margin: 0;
}
body.plugin-ideo-field-porter .wrap.ifp-wrap .ifp-mode-card__badge.ifp-mode-card__badge--active {
  color:var(--bg);
}
.ifp-preview {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 11px;
}
.ifp-preview table { border-collapse: collapse !important; display: table !important; width: 100% !important; }
.ifp-preview thead { display: table-header-group !important; }
.ifp-preview tbody { display: table-row-group !important; }
.ifp-preview tr    { display: table-row !important; }
.ifp-preview th,
.ifp-preview td    { display: table-cell !important; white-space: nowrap; }
.ifp-preview td {
  padding: 4px 8px;
  border: 1px solid var(--medium) !important;
  color: var(--text);
  vertical-align: top;
}
@media only screen and (max-width: 1100px) {
  .ifp-mode-cards { flex-direction: column; }
}

/* ── ideo Pimp Scrollbar — reusable, drop-in component ────────────────
 * Add the `ideo-pimp-scrollbar` class to any element that should scroll;
 * ideo-pimp-scrollbar.js takes over from there — wraps the element's
 * existing children, builds its own track/thumb markup, and switches the
 * element from native scrolling to a JS-driven one.
 *
 * Behaviour: invisible at rest, tinted on hover, a touch more saturated
 * while actively scrolling — no arrow buttons, thin, fully rounded.
 *
 * Custom properties — override on `:root` or on the scrolling element:
 *   --ideo-pimp-scrollbar-hover      colour on hover
 *   --ideo-pimp-scrollbar-active     colour while actively scrolling
 *   --ideo-pimp-scrollbar-size       track thickness (default 9px)
 *   --ideo-pimp-scrollbar-thumb-min  minimum thumb length in px (default 32px)
 *   --ideo-pimp-scrollbar-thumb-max  maximum thumb length in px (default 120px)
 *
 * Why not native scrollbar CSS: Firefox's `scrollbar-width` has no pixel
 * value (can't pixel-match a WebKit `width: 9px` scrollbar), and the thumb
 * length is fixed by the browser to the content/viewport ratio with no way
 * to shrink it further. Solved by not using a native scrollbar at all: the
 * thumb is a plain absolutely-positioned <div>, sized/positioned by the
 * script, styled with ordinary CSS that renders identically everywhere.
 *
 * No-JS fallback: `overflow-y: auto` below keeps content reachable if the
 * script fails to load.
 */
.ideo-pimp-scrollbar {
  --ideo-pimp-scrollbar-hover: #cccccc;
  --ideo-pimp-scrollbar-active: #999999;
  --ideo-pimp-scrollbar-size: 9px;
  --ideo-pimp-scrollbar-thumb-min: 32px;
  --ideo-pimp-scrollbar-thumb-max: 120px;
  overflow-y: auto; /* no-JS fallback only — the script switches this to hidden */
}

.ideo-pimp-scrollbar.ideo-pimp-scrollbar--js {
  position: relative;
  overflow: hidden; /* the script now owns scrolling entirely */
  outline: none; /* focus still reachable via Tab; add :focus-visible if desired */
}

.ideo-pimp-scrollbar__content {
  /* moved via transform instead of native scrollTop/Left — compositor-driven,
     doesn't trigger layout on every scroll frame, on every browser */
  will-change: transform;
  touch-action: none; /* the script owns touch dragging */
}

/* Pinned to the top edge while the rest of the content scrolls underneath
   (e.g. a table's <thead> row) — see the note in ideo-pimp-scrollbar.js.
   Give it an opaque background too, so scrolled rows don't show through. */
.ideo-pimp-scrollbar__sticky-top {
  position: relative;
  z-index: 2;
  will-change: transform;
}

.ideo-pimp-scrollbar__track {
  position: absolute;
  z-index: 1;
}
.ideo-pimp-scrollbar__track--y {
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--ideo-pimp-scrollbar-size);
}
.ideo-pimp-scrollbar__track--x {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ideo-pimp-scrollbar-size);
}
.ideo-pimp-scrollbar__track[hidden] {
  display: none;
}
/* Both axes visible at once: stop each track short of the corner instead
   of letting them cross through it — same empty corner square a native
   two-axis scrollbar leaves. */
.ideo-pimp-scrollbar--corner .ideo-pimp-scrollbar__track--y {
  top: var(--ideo-pimp-scrollbar-size);
  bottom: var(--ideo-pimp-scrollbar-size);
}
.ideo-pimp-scrollbar--corner .ideo-pimp-scrollbar__track--x {
  left: var(--ideo-pimp-scrollbar-size);
  right: var(--ideo-pimp-scrollbar-size);
}

.ideo-pimp-scrollbar__thumb {
  position: absolute;
  background-color: transparent;
  border-radius: 999px;
  transition: background-color var(--ifp-modal-fade) ease;
  cursor: pointer;
}
/* breathing room around the thumb, as plain CSS insets — identical everywhere */
.ideo-pimp-scrollbar__track--y .ideo-pimp-scrollbar__thumb {
  left: 3px;
  right: 3px;
  top: 0;
}
.ideo-pimp-scrollbar__track--x .ideo-pimp-scrollbar__thumb {
  top: 3px;
  bottom: 3px;
  left: 0;
}

.ideo-pimp-scrollbar:hover .ideo-pimp-scrollbar__thumb {
  background-color: var(--ideo-pimp-scrollbar-hover);
}
.ideo-pimp-scrollbar.is-scrolling .ideo-pimp-scrollbar__thumb {
  background-color: var(--ideo-pimp-scrollbar-active);
}

/* No-JS fallback — native scrollbar, styled as closely as each browser
 * allows. Scoped to :not(--js) so it never fights the custom thumb once
 * the script has taken over. */
.ideo-pimp-scrollbar:not(.ideo-pimp-scrollbar--js)::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
.ideo-pimp-scrollbar:not(.ideo-pimp-scrollbar--js)::-webkit-scrollbar-track {
  background: transparent;
}
.ideo-pimp-scrollbar:not(.ideo-pimp-scrollbar--js)::-webkit-scrollbar-thumb {
  background-color: transparent;
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
.ideo-pimp-scrollbar:not(.ideo-pimp-scrollbar--js):hover::-webkit-scrollbar-thumb {
  background-color: var(--ideo-pimp-scrollbar-hover);
}
@supports (-moz-appearance: none) {
  .ideo-pimp-scrollbar:not(.ideo-pimp-scrollbar--js) {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.35s ease;
  }
  .ideo-pimp-scrollbar:not(.ideo-pimp-scrollbar--js):hover {
    scrollbar-color: var(--ideo-pimp-scrollbar-hover) transparent;
  }
}

/* ── Settings: logs section ─────────────────────────────────────────── */

.ifp-logs-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  gap: 8px;
}
.ifp-logs-toggle .ifp-settings-section-title {
  margin-top: 0;
  margin-bottom: 0;
}
.ifp-logs-chevron {
  font-size: 11px;
  color: #888;
  transition: transform var(--ifp-modal-fade);
  transform: rotate(-90deg);
  flex-shrink: 0;
}
.ifp-logs-accordion--open .ifp-logs-chevron {
  transform: rotate(0deg);
}
.ifp-logs-body {
  display: none;
  padding-top: 16px;
}
.ifp-logs-body .ifp-reset-form { margin-left:0; }
.ifp-logs-accordion--open .ifp-logs-body {
  display: block;
}
.ifp-logs-wrap {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ifp-preview-color, var(--link)) #f0f0f0;
}
.ifp-logs-wrap::-webkit-scrollbar {
  width: 8px;
}
.ifp-logs-wrap::-webkit-scrollbar-track {
  background: #f0f0f0;
}
.ifp-logs-wrap::-webkit-scrollbar-thumb {
  background: var(--ifp-preview-color, var(--link));
}
.ifp-settings-section-title .ifp-logs-count {
  font-size: 12px;
  font-weight: normal;
  color: #888;
  margin-left: 10px;
}
.ifp-logs-empty {
  color: #888;
  font-style: italic;
  margin: 8px 0 16px;
}
.ifp-logs-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
  border: 1px solid var(--medium);
  border-radius: var(--radius);
}
.ifp-logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ifp-logs-table thead th {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--medium);
  white-space: nowrap;
}
.ifp-logs-table tbody tr:hover td {
  background: #f9f9f9;
}
.ifp-logs-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--medium);
  vertical-align: middle;
}
.ifp-logs-table tbody tr:last-child td {
  border-bottom: none;
}
.ifp-logs-date {
  white-space: nowrap;
  color: var(--text);
  font-size: 12px;
}
.ifp-logs-summary {
  color: var(--text);
  font-size: 12px;
}
.ifp-logs-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.ifp-logs-badge--import {
  background: #e8f0fe;
  color: #3858e9;
}
.ifp-logs-badge--export {
  background: #e6f4ea;
  color: #1e8a3c;
}
.ifp-logs-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
}
.ifp-logs-status--success {
  background: #e6f4ea;
  color: #1e8a3c;
}
.ifp-logs-status--warning {
  background: #fff8e1;
  color: #b08000;
}
.ifp-logs-status--error {
  background: #fce8e6;
  color: #b32d2e;
}

/* ── Settings: mode description list ───────────────────────────────── */
.ifp-settings-mode-desc {
  margin: 6px 0 16px 0;
  padding-left: 0;
  list-style: none;
}
.ifp-settings-mode-desc li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.ifp-settings-mode-desc li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--medium);
}

/* ── Import: best-practice notice ───────────────────────────────────── */
.ifp-description--notice {
  font-style: italic;
  color: var(--text);
}
/* ── Settings: toast notifications ─────────────────────────────────── */
.ifp-toast {
  position: fixed;
  top: 52px;
  right: 20px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  min-width: 240px;
  max-width: 400px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  animation: ifp-toast-in var(--ifp-modal-fade) ease;
}
.ifp-toast p {
  margin: 0;
  flex: 1;
}
.ifp-toast--success {
  background: #ecf7ed;
  border: 1px solid #46b450;
  color: #1e4620;
}
.ifp-toast--warning {
  background: #fff8e1;
  border: 1px solid #f0a500;
  color: #7a5000;
}
.ifp-toast--error {
  background: #fce8e6;
  border: 1px solid #b32d2e;
  color: #b32d2e;
}
.ifp-toast__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: inherit;
  opacity: .6;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.ifp-toast__close:hover { opacity: 1; }
@keyframes ifp-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* ── Settings: unsaved changes pulse on Save button ─────────────────── */
.ifp-save-btn--pulse {
  animation: ifp-save-pulse 1.3s ease-in-out infinite;
}
@keyframes ifp-save-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 92, 90, .75);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(151, 193, 192, 0.2);
  }
}
/* Pinned to the viewport corner — only added by JS once the button's normal
   spot in the footer has scrolled out of view, so it doesn't jump around
   while it's already on screen. `position` itself can't be transitioned, so
   the slide/fade is done on transform+opacity instead: JS adds both classes
   at once then immediately drops --floating-hidden (enter), or adds
   --floating-hidden alone and waits for the transition to finish before
   dropping --floating too (exit) — that's what keeps the exit smooth instead
   of the button just vanishing the instant the dirty state clears.
   Needs the #ifp-save-btn ID to out-specify the shared Buttons rule above,
   which sets its own `transition: border-color, background` on this same
   element — without it that rule wins and transform/opacity never animate,
   so the button jumps instead of sliding (and transitionend never fires,
   leaving it stuck floating). */
#ifp-save-btn.ifp-save-btn--floating {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transform: translateY(0);
  opacity: 1;
  transition: transform var(--ifp-modal-fade) ease, opacity var(--ifp-modal-fade) ease;
}
#ifp-save-btn.ifp-save-btn--floating.ifp-save-btn--floating-hidden {
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
}


/* ── Free version: Standard vs Hierarchical (PRO) comparison teaser ──── */
.ifp-mode-card { cursor: default; }
.ifp-mode-card__badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 10px;
  white-space: nowrap;
}
.ifp-mode-card__badge--active {
  background: var(--link);
  color: var(--bg);
}
.ifp-mode-card__badge--pro {
  background: var(--medium);
  color: var(--text);
  border: solid 1px var(--link);
}
.ifp-mode-card--locked {
  opacity: 0.6;
}
/* Generic locked-teaser treatment, reused beyond .ifp-mode-card (Settings
   colour picker / dark mode, Export sheet-mode, Test import button…). */
.ifp-locked {
  opacity: 0.6;
  cursor: default;
}
.ifp-locked * {
  pointer-events: none;
}
.ifp-settings-section-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.ifp-settings-section-title-row .ifp-settings-section-title {
  margin: 0;
}
.ifp-mode-card__upsell {
  font-size: 12px;
  color: var(--text);
  padding: 16px 14px;
  margin: 0;
}
.ifp-mode-card__upsell a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
  transition: var(--ifp-modal-fade);
}
.ifp-mode-card__upsell a:hover {
  color: var(--link);
}

/* ── Export: live editable preview table ──────────────────────────────── */
/* Card header row: title+count on the left, zoom controls on the right —
   mirrors .ifp-shell__header's own space-between layout at a smaller scale. */
.ifp-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ifp-card__head-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ifp-card__head-title h2 {
  margin: 0 0 10px;
}
.ifp-card__head-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.ifp-live-zoom-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--medium);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--ifp-modal-fade), background var(--ifp-modal-fade);
}
.ifp-live-zoom-btn:hover:not(:disabled) {
  border-color: var(--link);
  background: var(--light);
}
.ifp-live-zoom-btn svg {
  width: 18px;
  height: 18px;
  transition: var(--ifp-modal-fade);
}
.ifp-live-zoom-btn:hover:not(:disabled) svg {
  fill: var(--link);
}
.ifp-live-zoom-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
#ifp-live-table-toolbar__left {
  margin-bottom: 16px;
}
#ifp-live-table-toolbar__left:empty {
  margin-bottom: 0;
}
.ifp-live-excluded {
  margin-bottom: 0;
  /* Text + pills on one line instead of .ifp-sheet-mode's default stacked
     layout — saves vertical space, and there's no select/control here that
     needs its own row like the multi-sheet block does. */
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  transition: opacity var(--ifp-modal-fade);
  min-height: 31.5px;
}
/* Stays visible (rather than being removed) when nothing is excluded, so
   the toolbar's height/position doesn't jump every time the last excluded
   column gets brought back — just dims instead. */
.ifp-live-excluded--empty {
  opacity: .4;
}
.ifp-live-excluded__item {
  background: var(--bg);
  border: 1px solid var(--medium);
  border-radius: var(--radius);
  padding: 4px 10px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--text);
}
.ifp-live-excluded__item:hover {
  background: var(--ifp-preview-light-color, var(--light));
  border-color: var(--ifp-preview-color, var(--link));
}
.ifp-live-excluded__item--pop {
  animation: ifp-live-excluded-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ifp-live-excluded-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

.ifp-card--wide {
  max-width: none;
}
.ifp-card.ifp-card--wide p.ifp-description {
  margin-top: 0;
}
#ifp-live-table-wrap {
  border: 1px solid var(--medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  cursor: grab;
}
#ifp-live-table-wrap.ifp-live-table-wrap--panning {
  cursor: grabbing;
}
#ifp-live-table-loading {
  padding: 40px;
  text-align: center;
  color: var(--text);
  font-style: italic;
}
.ifp-live-table-empty {
  padding: 24px;
  color: var(--text);
  font-style: italic;
}
#ifp-live-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: .82rem;
  white-space: nowrap;
}
#ifp-live-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--medium);
  border-right: 1px solid var(--medium);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  vertical-align: top;
}

.ifp-live-th {
  background: var(--ifp-preview-color, var(--link));
  color: var(--bg);
  padding: 0;
  font-weight: 600;
  text-align: left;
  border-right: 2px solid rgba(255,255,255,.5);
  border-bottom: 2px solid rgba(255,255,255,.5);
  vertical-align: top;
}
.ifp-live-th__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  flex-wrap: nowrap;
}
/* Root columns: a white "controls" line (drag/movers/checkbox) stacked
   above a "namerow" line that stays on the header's own accent colour,
   with the column name in white — the controls need to read as UI chrome,
   the name needs to read as the actual spreadsheet header. */
.ifp-live-th__inner--root {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
.ifp-live-th__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  background: var(--ifp-preview-color, var(--link));
  color: var(--text);
  cursor: grab;
  transition: background var(--ifp-modal-fade);
}
.ifp-live-th__controls:hover {
  background: color-mix(in srgb, var(--ifp-preview-color, var(--link)) 85%, black);
}
.ifp-live-th--dragging .ifp-live-th__controls {
  cursor: grabbing;
}
.ifp-live-th__namerow {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  flex-wrap: nowrap;
}
.ifp-live-th__handle {
  cursor: grab;
  --ifp-el-font-size: 24px;
  --ifp-el-color: var(--bg);
  line-height: 1;
  flex-shrink: 0;
  margin-right: 8px;
}
/* The handle's drag-to-reorder only ever wires up mouse events (see
   bindHeaderDrag() in admin.js) — on a touch-primary device it's a dead
   affordance that just invites frustration. The ‹ › buttons next to it
   already reorder columns via a plain click/tap, so on touch we hide the
   handle entirely rather than let it sit there doing nothing. Matched on
   pointer capability, not viewport width, so it still shows on a mouse-
   driven narrow window and still hides on a wide touch tablet. */
@media (hover: none) and (pointer: coarse) {
  .ifp-live-th__handle {
    display: none;
  }
  /* With the drag handle gone, ‹ › become the only way to reorder on touch
     — sized well past the desktop 24px so they're an easy target for a
     finger instead of a mouse pointer. */
  .ifp-live-th__mover {
    width: 40px;
    height: 40px;
    --ifp-el-font-size: 36px;
  }
}
/* Applied to every cell of the dragged column (header + all rows, incl.
   nested sub-field cells in Hierarchical mode) — a shared translateX()
   transform is what actually moves them (see bindHeaderDrag() in admin.js);
   this just gives the moving block its "picked up" look. */
.ifp-live-col--dragging {
  position: relative;
  z-index: 40;
  pointer-events: none;
}
/* One shadow around the whole dragged column, positioned by JS to the union
   of all its cells' rects (see updateColumnShadow() in admin.js) — kept
   background-less so it only ever reads as an outline, never as a panel
   covering the cells' own text underneath it. */
.ifp-live-col-shadow {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  border-radius: 2px;
}
.ifp-live-drop-indicator {
  position: fixed;
  width: 2px;
  background: var(--alert);
  border-radius: 2px;
  z-index: 99999;
  pointer-events: none;
}
/* Two arrowhead-only triangles (no shaft) pulsing in from each side toward
   the line, so the drop position reads immediately instead of relying on
   the bar alone. Colour comes from `background-color` + `mask-image` (the
   SVG's own fill is irrelevant to a mask, only its alpha shape is used) so
   it stays on var(--alert) instead of a color baked into the data URI. */
.ifp-live-drop-indicator::before,
.ifp-live-drop-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 12px;
  height: 16px;
  background-color: var(--alert);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  animation: .7s ease-in-out infinite;
}
.ifp-live-drop-indicator::before {
  right: 100%;
  margin-right: 3px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpolygon points='0,0 12,8 0,16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpolygon points='0,0 12,8 0,16'/%3E%3C/svg%3E");
  animation-name: ifp-live-drop-arrow-left;
}
.ifp-live-drop-indicator::after {
  left: 100%;
  margin-left: 3px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpolygon points='12,0 0,8 12,16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpolygon points='12,0 0,8 12,16'/%3E%3C/svg%3E");
  animation-name: ifp-live-drop-arrow-right;
}
@keyframes ifp-live-drop-arrow-left {
  0%, 100% { transform: translateY(-50%) translateX(-6px); opacity: .3; }
  60%      { transform: translateY(-50%) translateX(0);    opacity: 1; }
}
@keyframes ifp-live-drop-arrow-right {
  0%, 100% { transform: translateY(-50%) translateX(6px); opacity: .3; }
  60%      { transform: translateY(-50%) translateX(0);   opacity: 1; }
}
/* Brief highlight on a column just brought back from the excluded list, so
   it reads clearly once the auto-scroll above has brought it into view. 4
   crisp on/off blinks (steps(), not a smooth fade) read as an actual blink
   rather than a single soft glow. An overlay pseudo-element (not
   background-color directly) so it composites on top of the cell's own
   background regardless of what that is — a plain td, or a th whose
   colored background is already set by .ifp-live-th. */
.ifp-live-col--flash {
  position: relative;
}
.ifp-live-col--flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--medium);
  opacity: 0;
  pointer-events: none;
  animation: ifp-live-col-flash 0.25s ease-in-out 4;
}
@keyframes ifp-live-col-flash {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 0.2; }
}
.ifp-live-th__mover {
  background: var(--ifp-preview-color, var(--link));
  border: solid 1px rgba(255,255,255,.15);
  --ifp-el-color: var(--bg);
  border-radius: 3px;
  width: 24px;
  height: 24px;
  line-height: 1;
  --ifp-el-font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 0 2px 0;
}
.ifp-live-th__mover:hover {
  background: var(--medium);
}
.ifp-live-th__remove {
  margin: 0 0 0 auto;
  --ifp-el-font-size: 14px;
}
.ifp-live-th__remove:disabled {
  cursor: not-allowed;
  opacity: .5;
}
body.plugin-ideo-field-porter .wrap.ifp-wrap .ifp-live-th__rename {
  flex: 1;
  min-width: 60px;
  background: var(--ifp-preview-color, var(--link));
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--bg);
  font-weight: 600;
  font-size: 1.15rem;
  padding: 2px 5px;
  cursor: text;
}
.ifp-live-th__inner--root .ifp-live-th__rename {
  font-size: 1rem;
}
body.plugin-ideo-field-porter .wrap.ifp-wrap .ifp-live-th__rename:hover,
body.plugin-ideo-field-porter .wrap.ifp-wrap .ifp-live-th__rename:focus {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
  outline: none;
}
.ifp-live-th__sep {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12);
  color: var(--bg);
  cursor: pointer;
}
.ifp-live-th__label {
  padding: 2px 5px;
  opacity: .8;
  --ifp-el-color: var(--bg);
}

/* ── responsive ── */
@media screen and (max-width: 960px) {
  .settings_page_ideo-field-porter-settings .ifp-header {
    left: 36px; 
  }
}
@media screen and (max-width: 782px) {
  .settings_page_ideo-field-porter-settings .ifp-header {
    left: 0; /* sidebar masquée derrière le menu mobile WP en dessous de 782px */
  }
}

@media screen and (max-width: 650px) {
  body.plugin-ideo-field-porter .wrap.ifp-wrap :is(p, ul, li, button, code, span, input) {
    font-size: 13px;
  }
  .ifp-mode-card {
    transform: scale(0.9);
    transform-origin: top left;
  }
  .ideo_field_icon {
    width: 50px;
  }
  body.plugin-ideo-field-porter .wrap.ifp-wrap h1.ifp-title {
    font-size: 26px;
    gap: 5px;
  }
  .ifp-header-container {
    gap: 10px;
  }
  h1 .ifp-title__plugin {
    font-size: 0.9rem;
  }
  .ifp-notice--info {
    font-size: 14px;
  }
  .ifp-tab {
    font-size: 1.1rem;
  }
  body.plugin-ideo-field-porter .wrap.ifp-wrap h2 {
    font-size: 22px;
  }
  .ifp-settings-section, .ifp-card {
    padding: 28px 16px;
  }
}

/* Whatever element immediately follows .ifp-header needs this offset, to
 * clear the fixed header above it — matched via the universal adjacent-
 * sibling selector rather than a specific tag/class, since that element
 * differs between plugins (Free: the first .ifp-settings-section directly;
 * PRO: the <form>, since its sections live inside the form). Using * here
 * correctly targets "whichever it is" without needing two different rules.
 * (:first-of-type wouldn't work for the Free case either way — it matches
 * by tag, not class, and .ifp-header is also a <div>.) Scoped to the
 * Settings page specifically — .ifp-header is also used, unscoped, on
 * Export/Import pages, where it isn't fixed and needs no offset at all. */
.settings_page_ideo-field-porter-settings .ifp-header + * {
  margin-top: 180px;
}

@media screen and (max-width: 600px) {
  .settings_page_ideo-field-porter-settings .ifp-header {
    position: relative;
    top: 0;
  }
  .settings_page_ideo-field-porter-settings .ifp-header + * {
    margin-top: 0;
  }
}

@media screen and (max-width: 450px) {
  .ifp-header, body.plugin-ideo-field-porter .wrap.ifp-wrap h1.ifp-title {
    height: 125px;
  }
  .ifp-header-container {
    flex-flow: column;
    padding: 10px 0;
    height: 190px;
    align-items: center;
    margin: 0;
  }
  a.ifp-buy {
    margin: unset;
  }
  .ifp-mode-card {
    transform: scale(0.8);
  }
}

@media screen and (max-width: 400px) {
  .ifp-preview {
    font-size: 8px;
  }
}

