:root{
  /* Läs WP Global Styles om de finns, annars fallbacks */
  --se-font: var(--wp--preset--font-family--system-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --se-primary: var(--wp--preset--color--primary, #0ea5b9);         /* fallback accent */
  --se-primary-600: color-mix(in srgb, var(--se-primary) 85%, #000); /* hover/darken */
  --se-bg: var(--wp--preset--color--base, #ffffff);
  --se-card: var(--wp--preset--color--base-2, #ffffff);
  --se-text: var(--wp--preset--color--contrast, #111827);
  --se-muted: var(--wp--preset--color--neutral, #6b7280);
  --se-border: var(--wp--preset--color--neutral-2, #e5e7eb);
  --se-ring: var(--wp--preset--color--accent, #22d3ee);
  --se-danger: #ef4444;
  --se-radius: 12px;
  --se-shadow: 0 8px 24px rgba(0,0,0,.06);
  --se-space-1: .5rem;   /* 8px */
  --se-space-2: .75rem;  /* 12px */
  --se-space-3: 1rem;    /* 16px */
  --se-space-4: 1.25rem; /* 20px */
  --se-space-6: 1.5rem;  /* 24px */
}

/* Baslayout – centrera och kortkomponent */
.se-wrap{
  max-width: 880px; margin: 0 auto; padding: var(--se-space-6) var(--se-space-3);
  font-family: var(--se-font); color: var(--se-text); background: var(--se-bg);
}
.se-card{
  background: var(--se-card); border:1px solid var(--se-border);
  border-radius: var(--se-radius); box-shadow: var(--se-shadow);
  padding: var(--se-space-6);
}
.se-title{ font-size: 1.5rem; font-weight: 700; margin: 0 0 var(--se-space-4); }
.se-help{ color: var(--se-muted); font-size: .95rem; }

/* Formulär – tvåkolumnigt ≥768px, en kolumn på mobil */
.se-form{ display:grid; gap: .75rem; }
@media (min-width:768px){
  .se-form{ grid-template-columns: 220px 1fr; align-items:center; }
  .se-row{ display:contents; }
  .se-label{ text-align:right; padding-right: var(--se-space-3); }
}
.se-label{ font-weight:600; }
.se-input, .se-textarea, .se-select{
  width:100%; border:1px solid var(--se-border); background:#fff; color:var(--se-text);
  border-radius: var(--se-radius); padding: .55rem .75rem; line-height:1.3;
}
.se-textarea{ min-height: 80px; resize: vertical; }
.se-input:focus, .se-textarea:focus, .se-select:focus{
  outline: 2px solid var(--se-ring); outline-offset: 1px; border-color: var(--se-ring);
}
.se-inline{ display:flex; gap: var(--se-space-2); align-items:center; }
.se-inline.se-inline-help{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.se-check{ display:inline-flex; align-items:center; gap:.5rem; }

/* Knappar och switchar */
.se-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.55rem 1rem; border-radius: 999px;
  border:1px solid transparent; background: var(--se-primary); color:#fff; font-weight:600; cursor:pointer;
}
.se-btn:hover{ background: var(--se-primary-600); }
.se-btn-outline{ background:#fff; color:var(--se-primary); border-color: var(--se-primary); }
.se-btn-outline:hover{ background: color-mix(in srgb, var(--se-primary) 10%, #fff); }

/* Hjälpikoner */

/* status-ikon intill varje funktionsrad */
.se-fstatus{ display:inline-flex; align-items:center; gap:.25rem; margin-left:.25rem; }
.se-fstatus svg{ width:14px; height:14px; }
.se-fok{ color:#10b981; }
.se-ferr{ color:#ef4444; }

button.help{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:.35rem;
  border-radius:999px; border:1px solid var(--se-border);
  background:#fff; color:var(--se-muted); font-weight:700; line-height:1;
  cursor:help; vertical-align:middle;
}
button.help-mini{ width:16px; height:16px; margin-left:.25rem; transform: translateY(-1px); }
.help-inline{ align-self:center; margin-left:.5rem; }
.help-pop{ position:absolute; z-index:20; max-width:360px; background:#111; color:#fff;
  padding:.5rem .6rem; border-radius:8px; font-size:.85rem; box-shadow:0 8px 24px rgba(0,0,0,.18); }

/* Textarea validation icons */
.se-textarea-wrap{ position:relative; }
.se-lines{ position:absolute; top:0; right:.5rem; pointer-events:none; }
.se-lines span{ position:absolute; right:0; }

/* Actions */
.se-actions{ display:flex; gap:.5rem; justify-content:flex-start; }
@media (min-width:768px){ .se-actions{ justify-content:flex-end; } }

/* Legend */
.se-legend{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 0; padding:0; list-style:none; }
.se-legend li{
  display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border:1px solid var(--se-border);
  border-radius: 999px; background:#fff; font-size:.9rem;
}
.se-legend .swatch{ width:18px; height:0; border-top:2px solid currentColor; }
.se-legend .swatch.s0{ border-top-style:solid; }
.se-legend .swatch.s1{ border-top:2px dashed currentColor; }
.se-legend .swatch.s2{ border-top:2px dotted currentColor; }
.se-legend .swatch.s3{ border-top-style:solid; border-image: repeating-linear-gradient(90deg,currentColor 0 8px,transparent 8px 12px,currentColor 12px 14px,transparent 14px 18px) 1; }

/* Canvas/diagramyta */
.se-plot{
  background:#fff; border:1px solid var(--se-border); border-radius: var(--se-radius);
  padding: var(--se-space-3);
}
.se-canvas{ width:100%; aspect-ratio: 16/10; display:block; }
.se-grid{ stroke:#e5e7eb; stroke-width:.75; }
.se-axis{ stroke:#9ca3af; stroke-width:1; }
.se-axis-text{ fill:#374151; font: 12px var(--se-font); }

/* Tillgänglighet */
.se-label > .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.se-input:focus-visible, .se-btn:focus-visible{ outline:3px solid var(--se-ring); outline-offset:2px; }