/* ==========================================================================
   GenSERP Tools – unified, responsive UI
   Works for legacy .genserp-faq-jsonld and new .genserp-tool wrappers
   ========================================================================== */

/* ---------- Scope roots -------------------------------------------------- */
.genserp-tool,
.genserp-faq-jsonld {
  /* Light theme tokens */
  --bg:            #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f5f7fb;
  --ink:           #0f172a;   /* slate-900 */
  --muted:         #5b6b82;   /* slate-500/600 mix */
  --border:        #e5e7eb;   /* gray-200 */
  --ring:          #3b82f6;   /* blue-500 */

  /* Brand/button system */
  --btn-primary:    #4f46e5;  /* indigo-600 */
  --btn-primary-ink:#ffffff;
  --btn-accent:     #2563eb;  /* blue-600 */
  --btn-accent-ink: #ffffff;
  --btn-plain:      #111827;  /* near-black for ghost */
  --btn-plain-bd:   #d1d5db;  /* gray-300 */

  --success: #10b981;
  --danger:  #ef4444;
  --warning: #f59e0b;

  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;

  --gap-1: .25rem;
  --gap-2: .5rem;
  --gap-3: .75rem;
  --gap-4: 1rem;
  --gap-5: 1.25rem;
  --gap-6: 1.5rem;

  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-16: 1rem;

  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 6px 16px rgba(16,24,40,.08);

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* RTL (WP locale) */
.genserp-faq-jsonld.genserp-rtl,
.genserp-tool.genserp-rtl { direction: rtl; }

/* ---------- Page container (inside post/page content) ------------------- */
.genserp-tool,
.genserp-faq-jsonld {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--gap-5) var(--gap-4);
}
@media (max-width: 1024px) {
  .genserp-tool,
  .genserp-faq-jsonld { padding: 0 !important; }
}

/* ---------- Cards / sections -------------------------------------------- */
.genserp-faq-head,
.genserp-head,
.gs-section,
.genserp-ingest,
.genserp-meta,
.genserp-output,
.genserp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--gap-5);
  box-shadow: var(--shadow-1);
  margin: var(--gap-5) 0;
}

.genserp-faq-head h3,
.genserp-head h3 {
  margin: 0 0 var(--gap-2);
  font-size: 1.4rem;
  font-weight: 800;
}
.genserp-sub { margin: 0; color: var(--muted); font-size: var(--fs-14); }

.section-title { width:100%; margin-bottom:12px; font-size:1.1rem; }

/* Section mini headers */
.gs-section-h { display:flex; align-items:baseline; justify-content:space-between; gap:var(--gap-3); }
.gs-h { margin:0; font-weight:800; }
.gs-h-sub { margin:0; color:var(--muted); font-size:var(--fs-12); }

/* ---------- Layout helpers ---------------------------------------------- */
.gs-grid { display:grid; gap:var(--gap-4); }
.gs-grid--2col { grid-template-columns:1fr 1fr; }
.gs-grid--3col { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:980px){ .gs-grid--2col,.gs-grid--3col{ grid-template-columns:1fr; } }

.gs-inline { display:flex; flex-wrap:wrap; gap:var(--gap-3); align-items:center; }
.mt-12 { margin-top: var(--gap-6); }
.mb-12 { margin-bottom: var(--gap-6); }

/* Controls row: grid baseline */
.genserp-ingest-row {
  display:grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: var(--gap-4);
  align-items:end;
}
.genserp-ingest-row > label { grid-column: span 3; }
.genserp-ingest-row > .genserp-btn { grid-column: span 2; }
.genserp-ingest-row > .genserp-btn.genserp-ghost { justify-self:end; }

@media (max-width:1100px){
  .genserp-ingest-row > label { grid-column: span 4; }
  .genserp-ingest-row > .genserp-btn { grid-column: span 3; }
}
@media (max-width:800px){
  .genserp-ingest-row { grid-template-columns:1fr; }
  .genserp-ingest-row > * { grid-column:1 / -1; }
  .genserp-ingest-row > .genserp-btn.genserp-ghost { justify-self:start; }
}

/* ---------- Fields ------------------------------------------------------- */
.genserp-faq-jsonld label,
.genserp-tool label { display:grid; gap:var(--gap-2); }

.genserp-faq-jsonld label > span,
.genserp-tool label > span { font-weight:700; font-size:var(--fs-14); }

.genserp-faq-jsonld input[type="text"],
.genserp-faq-jsonld input[type="number"],
.genserp-faq-jsonld select,
.genserp-faq-jsonld textarea,
.genserp-tool input[type="text"],
.genserp-tool input[type="number"],
.genserp-tool select,
.genserp-tool textarea{
  width:100%;
  box-sizing:border-box;
  background:var(--surface-2);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  min-height:42px;
  padding:10px 12px;
  line-height:1.25;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  outline:none;
}
.genserp-a { min-height:60px !important; }

input.genserp-upload, input.genserp-article-title, input.genserp-headline { margin-bottom:24px; }

/* Compact numeric and small selects in “count/limits” rows */
.genserp-count input[type="number"]{ max-width:140px; }
.genserp-count select{ max-width:180px; }

/* Textareas */
.genserp-faq-jsonld textarea,
.genserp-tool textarea{ min-height:180px; resize:vertical; }

/* Placeholders */
.genserp-faq-jsonld ::placeholder,
.genserp-tool ::placeholder{ color: color-mix(in oklab, var(--muted) 85%, transparent); }

/* Focus ring */
.genserp-faq-jsonld :is(input,select,textarea):focus,
.genserp-tool       :is(input,select,textarea):focus{
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
  background: var(--surface);
}

/* Select caret */
.genserp-faq-jsonld select,
.genserp-tool select{
  appearance:none;
  background-image:
    linear-gradient(transparent,transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:right 12px center,right 12px center;
  padding-right:38px;
}

/* File input */
.genserp-file input[type="file"]{
  width:100%;
  background:var(--surface-2);
  border:1px dashed var(--border);
  border-radius:var(--r-md);
  padding:8px;
  color:var(--muted);
  min-height:42px;
}
.genserp-file input[type="file"]::file-selector-button,
.genserp-file input[type="file"]::-webkit-file-upload-button{
  margin-inline-end: var(--gap-3);
  border:1px solid var(--btn-plain-bd);
  background:var(--surface);
  color:var(--ink);
  border-radius:var(--r-md);
  padding:8px 14px;
  height:34px;
  cursor:pointer;
}

/* Small counters / helper text */
.genserp-counts{ color:var(--muted); font-size:var(--fs-12); }

/* ---------- Buttons ------------------------------------------------------ */
.genserp-btn{
  --_bg: var(--surface-2);
  --_ink: var(--ink);
  --_bd: var(--btn-plain-bd);

  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:42px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid var(--_bd);
  background:var(--_bg);
  color:var(--_ink);
  cursor:pointer;
  font-weight:800;
  font-size:var(--fs-14);
  line-height:1;
  text-decoration:none;
  transition: background-color .15s ease, border-color .15s ease, filter .15s ease, transform .02s ease;
}
.genserp-btn:hover{ filter:brightness(1.03); }
.genserp-btn:active{ transform:translateY(1px); }
.genserp-btn:disabled{ opacity:.55; cursor:default; }

.genserp-btn.genserp-primary   { --_bg: var(--btn-primary); --_ink: var(--btn-primary-ink); --_bd: var(--btn-primary); }
.genserp-btn.genserp-secondary { --_bg: var(--btn-accent);  --_ink: var(--btn-accent-ink);  --_bd: var(--btn-accent); }
.genserp-btn.genserp-ghost     { --_bg: transparent;        --_ink: var(--btn-plain);       --_bd: var(--btn-plain-bd); }
.genserp-btn.is-danger         { --_bg: color-mix(in oklab, var(--danger) 18%, var(--surface)); --_ink: color-mix(in oklab, var(--danger) 70%, #fff); --_bd: color-mix(in oklab, var(--danger) 35%, var(--btn-plain-bd)); }

.genserp-btn.is-mini{ height:34px; padding:0 12px; border-radius:10px; font-weight:700; }

/* ---------- Icons -------------------------------------------------------- */
.genserp-ico{
  width:16px; height:16px; display:inline-block; flex:0 0 16px;
  background-color:currentColor; content:"";
  -webkit-mask: var(--ico) no-repeat center / contain;
          mask: var(--ico) no-repeat center / contain;
}
.genserp-btn[data-icon]::before{
  content:""; width:16px; height:16px; display:inline-block; flex:0 0 16px;
  background-color:currentColor; margin-inline-end:6px;
  -webkit-mask: var(--ico) no-repeat center / contain;
          mask: var(--ico) no-repeat center / contain;
}
.genserp-btn[data-icon="spark"]   { --ico:url("/wp-content/plugins/genserp-tools/icons/optimization-icon.svg"); }
.genserp-btn[data-icon="wand"]    { --ico:url("/wp-content/plugins/genserp-tools/icons/optimization-icon.svg"); }
.genserp-btn[data-icon="download"]{ --ico:url("/wp-content/plugins/genserp-tools/icons/download-icon.svg"); }
.genserp-btn[data-icon="copy"]    { --ico:url("/wp-content/plugins/genserp-tools/icons/copy-icon.svg"); }
.genserp-btn[data-icon="clear"]   { --ico:url("/wp-content/plugins/genserp-tools/icons/clear-icon.svg"); }
.genserp-btn[data-icon="reset"]   { --ico:url("/wp-content/plugins/genserp-tools/icons/reset-icon.svg"); }
.genserp-btn[data-icon="plus"]    { --ico:url("/wp-content/plugins/genserp-tools/icons/add-icon.svg"); }
.genserp-btn[data-icon="replace"] { --ico:url("/wp-content/plugins/genserp-tools/icons/replace-icon.svg"); }
.genserp-btn[data-icon="json"]    { --ico:url("/wp-content/plugins/genserp-tools/icons/json-icon.svg"); }
.genserp-btn[data-icon="file"]    { --ico:url("/wp-content/plugins/genserp-tools/icons/file-icon.svg"); }
.genserp-btn[data-icon="undo"]    { --ico:url("/wp-content/plugins/genserp-tools/icons/undo-icon.svg"); }
.genserp-btn[data-icon="redo"]    { --ico:url("/wp-content/plugins/genserp-tools/icons/redo-icon.svg"); }

/* ---------- Options group / checkboxes ---------------------------------- */
.genserp-options{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--gap-3) var(--gap-4);
  display:flex; flex-wrap:wrap; gap:var(--gap-4);
}
.genserp-options legend{ padding:0 var(--gap-2); font-weight:800; color:var(--ink); }
.genserp-options label{ display:inline-flex; align-items:center; gap:10px; }
.genserp-options input[type="checkbox"]{ width:18px; height:18px; }

/* ---------- FAQ dynamic rows -------------------------------------------- */
.genserp-rows .genserp-row{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--gap-4);
  margin:var(--gap-4) 0;
  display:grid;
  grid-template-columns:1fr auto;
  row-gap:var(--gap-3);
}
.genserp-rows .genserp-field{ display:grid; gap:var(--gap-2); grid-column:1 / -1; }
.genserp-rows .genserp-field + .genserp-field{ margin-top:var(--gap-3); }
.genserp-rows .genserp-counts{ grid-column:1; align-self:center; }

/* ---------- Output areas ------------------------------------------------- */
.genserp-output textarea{
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  min-height:220px;
}
.genserp-output .genserp-output-actions,
.genserp-actions-row{
  display:flex; flex-wrap:wrap; gap:var(--gap-3); margin-top:var(--gap-4);
}
.genserp-hint{ color:var(--muted); font-size:var(--fs-12); margin-top:var(--gap-2); }

/* ---------- Utilities ---------------------------------------------------- */
.is-full{ width:100%; }
.space-l{ margin-inline-start: var(--gap-4); }
.genserp-ingest-row > * { align-self:end; } /* mixed inline groups align */

/* ---------- Accessibility tweaks ---------------------------------------- */
.genserp-tool.auto-dark .genserp-btn:disabled,
.genserp-faq-jsonld.auto-dark .genserp-btn:disabled{ opacity:.6; }
.genserp-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
  border-color:var(--ring);
}

/* =========================================================
   FOXIZ THEME-AWARE DARK MODE (with clean fallbacks)
   ========================================================= */

/* Default: light */
.genserp-tool,
.genserp-faq-jsonld{ color-scheme:light; background:var(--bg); }

/* A) Follow Foxiz switcher */
:where(body[data-theme="dark"], html[data-theme="dark"])
:is(.genserp-tool, .genserp-faq-jsonld):not(.force-light){
  --bg:#191c20; --surface:#121722; --surface-2:#161c29;
  --ink:#e6e8ec; --muted:#9aa4b2; --border:#273142; --ring:#8b7dff;
  --btn-primary:#6d5cff; --btn-primary-ink:#191c20;
  --btn-accent:#3a82ff; --btn-accent-ink:#191c20;
  --btn-plain:#e6e8ec; --btn-plain-bd:#2c3746;
  --shadow-1:0 1px 1px rgba(0,0,0,.28), 0 2px 12px rgba(0,0,0,.38);
  color-scheme:dark;
}

/* B) Optional per-tool force */
.genserp-tool.genserp-theme--dark,
.genserp-faq-jsonld.genserp-theme--dark{
  --bg:#191c20; --surface:#121722; --surface-2:#161c29;
  --ink:#e6e8ec; --muted:#9aa4b2; --border:#273142; --ring:#8b7dff;
  --btn-primary:#6d5cff; --btn-primary-ink:#191c20;
  --btn-accent:#3a82ff; --btn-accent-ink:#191c20;
  --btn-plain:#e6e8ec; --btn-plain-bd:#2c3746;
  --shadow-1:0 1px 1px rgba(0,0,0,.28), 0 2px 12px rgba(0,0,0,.38);
  color-scheme:dark;
}

/* C) OS fallback when no data-theme set */
@media (prefers-color-scheme: dark){
  html:not([data-theme]) body:not([data-theme])
  :is(.genserp-tool, .genserp-faq-jsonld):not(.force-light){
    --bg:#191c20; --surface:#121722; --surface-2:#161c29;
    --ink:#e6e8ec; --muted:#9aa4b2; --border:#273142; --ring:#8b7dff;
    --btn-primary:#6d5cff; --btn-primary-ink:#191c20;
    --btn-accent:#3a82ff; --btn-accent-ink:#191c20;
    --btn-plain:#e6e8ec; --btn-plain-bd:#2c3746;
    --shadow-1:0 1px 1px rgba(0,0,0,.28), 0 2px 12px rgba(0,0,0,.38);
    color-scheme:dark;
  }
}

/* D) Dark placeholders */
:where(body[data-theme="dark"], html[data-theme="dark"])
:is(.genserp-tool, .genserp-faq-jsonld) ::placeholder,
:is(.genserp-tool.genserp-theme--dark, .genserp-faq-jsonld.genserp-theme--dark) ::placeholder{
  color: color-mix(in oklab, var(--muted) 92%, transparent);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme]) body:not([data-theme])
  :is(.genserp-tool, .genserp-faq-jsonld) ::placeholder{
    color: color-mix(in oklab, var(--muted) 92%, transparent);
  }
}

/* =========================================================
   FAQ Options — grid layout + alignment + responsive
   ========================================================= */

/* Ensure Options row uses a grid (overrides any previous flex) */
.genserp-card .genserp-ingest-row{
  display:grid !important;
  grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:var(--gap-6);
  row-gap:var(--gap-5);
  align-items:end;
}

/* Desktop plan:
   [1] FAQ Count  span 3
   [2] Language   span 5
   [3] Aggressive span 2
   [4] ProfileSty span 2
   [5] ProfileType columns 7..12 */
.genserp-ingest-row > label:nth-of-type(1){ grid-column: span 3; }  /* FAQ count */
.genserp-ingest-row > label:nth-of-type(2){ grid-column: span 5; }  /* Language */
.genserp-ingest-row > label.genserp-aggr-wrap{ grid-column: span 2; }
.genserp-ingest-row > label.genserp-profile-style{ grid-column: span 2; }
.genserp-ingest-row > .genserp-profile-select{ grid-column: 7 / -1; }

/* Checkbox blocks align with select baselines */
.genserp-ingest-row .genserp-aggr-wrap > label,
.genserp-ingest-row .genserp-profile-style > label{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:28px;
}

/* Make long selects non-truncating in Options card */
.genserp-card .genserp-ingest-row .genserp-count select{ max-width:none; }

/* Buttons row (2nd line, right-aligned) */
.genserp-ingest-row > .genserp-extract{
  grid-row:2; grid-column:10 / -1; justify-self:end;
}
.genserp-ingest-row > .genserp-clear-faq,
.genserp-ingest-row > .genserp-clear{
  grid-row:2; grid-column:8 / 10; justify-self:end;
}
.genserp-ingest-row > .genserp-btn{ height:48px; }

/* Mobile / tablet stacking */
@media (max-width:1100px){
  .genserp-card .genserp-ingest-row{ grid-template-columns:1fr; }
  .genserp-ingest-row > *{ grid-column:1 / -1 !important; }
  .genserp-ingest-row .genserp-aggr-wrap > label,
  .genserp-ingest-row .genserp-profile-style > label{ margin-top:8px; }
  .genserp-ingest-row > .genserp-clear-faq,
  .genserp-ingest-row > .genserp-clear,
  .genserp-ingest-row > .genserp-extract{ justify-self:stretch; }
}

/* Visual disabled state for Profile type (JS toggles disabled attr) */
.genserp-profile-type:disabled{
  opacity:.65; cursor:not-allowed; filter:grayscale(15%);
}

/* --- Global Rich Text Editor (shared component) -------------------------- */
.genserp-editor{
  width:100%; min-height:220px; padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2); color:var(--ink);
  line-height:1.5; outline:none; overflow-y:auto;
}
.genserp-editor:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
  background:var(--surface);
}
/* Inline placeholder for contenteditable */
.genserp-editor:empty::before{
  content:attr(data-placeholder);
  color:color-mix(in oklab, var(--muted) 85%, transparent);
}

/* Rich-text toolbar */
.genserp-editor-toolbar{ display:flex; flex-wrap:wrap; gap:var(--gap-3); }
.genserp-editor-toolbar .genserp-btn.is-mini{ height:34px; }

/* Split button */
.genserp-split{
  position:relative; display:inline-flex; border:1px solid var(--btn-plain-bd);
  border-radius:10px; background:var(--surface-2); overflow:visible; height:34px;
}
.genserp-split > .genserp-btn{
  --_bg:transparent; --_ink:var(--ink); --_bd:transparent;
  background:transparent; color:var(--ink);
  border:0; border-radius:0; padding:0 14px; height:34px; font-weight:800; line-height:1;
}
.genserp-split > .js-dl-main{ border-top-left-radius:10px; border-bottom-left-radius:10px; padding-right:18px; }
.genserp-split > .js-dl-caret{
  width:44px; display:grid; place-items:center;
  border-inline-start:1px solid var(--btn-plain-bd);
  border-top-right-radius:10px; border-bottom-right-radius:10px;
}
.genserp-split .genserp-split-caret{
  width:0; height:0; display:inline-block;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:7px solid currentColor;
}
.genserp-split:hover{ background:color-mix(in oklab, var(--surface-2) 88%, var(--ink) 12%); }
:where(body[data-theme="dark"], html[data-theme="dark"]) .genserp-split:hover{
  background:color-mix(in oklab, var(--surface-2) 80%, white 12%);
}
.genserp-split:hover > .genserp-btn{ background:transparent; }
.genserp-split > .genserp-btn:active{ transform:translateY(1px); }
.genserp-split:focus-within{
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);
  border-color:var(--ring);
}
.genserp-split-menu{
  position:absolute; inset-inline-start:0; top:calc(100% + 6px); display:none;
  min-width:100%; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow-1); z-index:40;
}
.genserp-split-menu.is-open{ display:block; }
.genserp-split-menu button{
  width:100%; height:38px; text-align:left; background:transparent; border:0;
  padding:10px 12px; font-weight:700; color:var(--ink); cursor:pointer;
}
.genserp-split-menu button:hover{ background:var(--surface-2); }

/* Icon remaps used in toolbar */
.genserp-btn[data-icon="undo"]{ --ico:url("/wp-content/plugins/genserp-tools/icons/undo-icon.svg"); }
.genserp-btn[data-icon="redo"]{ --ico:url("/wp-content/plugins/genserp-tools/icons/redo-icon.svg"); }

/* clear, copy, download already mapped globally */
/* === Rich-text toolbar: unified hover for ALL buttons ==================== */
/* Make hover override the global brightness rule and apply to minis + split */
.genserp-editor-toolbar .genserp-btn,
.genserp-editor-toolbar .genserp-split > .genserp-btn {
  transition: background-color .15s ease, border-color .15s ease, transform .02s ease;
}

/* Light mode hover: slightly darker */
:where(.genserp-tool,.genserp-faq-jsonld) .genserp-editor-toolbar .genserp-btn:hover,
:where(.genserp-tool,.genserp-faq-jsonld) .genserp-editor-toolbar .genserp-split:hover > .genserp-btn {
  filter: none; /* kill the global brightness hover */
  background: color-mix(in oklab, var(--surface-2) 88%, var(--ink) 12%);
}

/* Dark mode hover: slightly lighter */
:where(body[data-theme="dark"], html[data-theme="dark"])
  :is(.genserp-tool,.genserp-faq-jsonld) .genserp-editor-toolbar .genserp-btn:hover,
:where(body[data-theme="dark"], html[data-theme="dark"])
  :is(.genserp-tool,.genserp-faq-jsonld) .genserp-editor-toolbar .genserp-split:hover > .genserp-btn {
  background: color-mix(in oklab, var(--surface-2) 80%, white 12%);
}

/* Active press feedback (works for both halves of the split) */
.genserp-editor-toolbar .genserp-btn:active,
.genserp-editor-toolbar .genserp-split > .genserp-btn:active {
  transform: translateY(1px);
}

/* Keep the split’s divider visible on hover */
.genserp-editor-toolbar .genserp-split > .js-dl-caret {
  border-inline-start: 1px solid var(--btn-plain-bd);
}
/* =========================================================
   FAQ Options — grid layout + alignment + responsive
   ========================================================= */

/* 0) Nuke the “flex toolbar” override that caused failures */
.genserp-card .genserp-ingest-row {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-6);
  row-gap: var(--gap-5);
  align-items: end;
}

/* 1) First row column plan (desktop ≥ 1100px)
   [1] FAQ count   : span 3
   [2] Language    : span 5
   [3] Aggressive  : span 2
   [4] ProfileStyle: span 2
   [5] Profile type: spans columns 7..12 (right side, long select) */
.genserp-ingest-row > label:nth-of-type(1) { grid-column: span 3; }  /* FAQ count */
.genserp-ingest-row > label:nth-of-type(2) { grid-column: span 5; }  /* Language */
.genserp-ingest-row > label.genserp-aggr-wrap { grid-column: span 2; }  /* Aggressive Fill */
.genserp-ingest-row > label.genserp-profile-style { grid-column: span 2; } /* Profile Style */
.genserp-ingest-row > .genserp-profile-select { grid-column: 7 / -1; } /* Profile type */

/* 2) Make the selects wide enough (no truncation) in the Options box */
.genserp-card .genserp-ingest-row .genserp-count select { max-width: none; }

/* 3) Checkbox blocks: same vertical rhythm and spacing so headers align */
.genserp-ingest-row .genserp-aggr-wrap,
.genserp-ingest-row .genserp-profile-style {
  /* same grid label structure as others */
  display:visble;
}
.genserp-ingest-row .genserp-aggr-wrap > label,
.genserp-ingest-row .genserp-profile-style > label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* create visual alignment so the checkbox baseline lines up
     with the text-baseline of selects */
  margin-top: 28px;
}

/* 4) Buttons row (second line, right aligned) */
.genserp-ingest-row > .genserp-extract {
  grid-row: 2;
  grid-column: 10 / -1;  /* right block */
  justify-self: end;
}
.genserp-ingest-row > .genserp-clear-faq,
.genserp-ingest-row > .genserp-clear { /* use whichever class you wired */
  grid-row: 2;
  grid-column: 8 / 10;   /* sits just to the left of Extract */
  justify-self: end;
}

/* 5) Consistent button height with other controls */
.genserp-ingest-row > .genserp-btn { height: 48px; }

/* 6) Mobile / tablet stacking */
@media (max-width: 1100px) {
  .genserp-card .genserp-ingest-row {
    grid-template-columns: 1fr;
  }
  .genserp-ingest-row > * {
    grid-column: 1 / -1 !important;
  }
  .genserp-ingest-row .genserp-aggr-wrap > label,
  .genserp-ingest-row .genserp-profile-style > label {
    margin-top: 8px; /* tighter on small screens */
  }
  .genserp-ingest-row > .genserp-clear-faq,
  .genserp-ingest-row > .genserp-clear,
  .genserp-ingest-row > .genserp-extract {
    justify-self: stretch;
  }
}

/* 7) Visual disabled state for Profile type when style is inactive.
      JS will toggle the disabled attribute; this makes the state obvious. */
.genserp-profile-type:disabled {
  opacity: .65;
  cursor: not-allowed;
  filter: grayscale(15%);
}
/* Clamp the article editor so it scrolls instead of stretching the page */
.genserp-editor {
  max-height: 520px;           /* pick a size you like: 420–640px works well */
  overflow-y: auto;
}
@media (max-width: 1024px) {
  .genserp-editor { max-height: 420px; }
}

/* If the editor lives inside a web component that sometimes hides the inner class */