/* Suregraphic Design Brief
   Every value below comes from the token block. Nothing is hand-typed further down. */

.sgb {
  /* ---- surfaces & ink (light) ---- */
  --sgb-s0:#ffffff; --sgb-s1:#f6f7f9; --sgb-s2:#eef0f4;
  --sgb-ink:#0f1319; --sgb-ink-2:#4b5361; --sgb-ink-3:#697080;
  --sgb-line:#e2e6ec; --sgb-line-strong:#8a92a0;
  --sgb-danger:#c0392b; --sgb-danger-bg:#fdf3f2;
  --sgb-warn:#a35b06; --sgb-warn-bg:#fdf6ec;
  --sgb-accent:#2560e8;               /* overridden from plugin settings */
  --sgb-accent-ink:#ffffff;
  --sgb-accent-soft:color-mix(in srgb, var(--sgb-accent) 10%, transparent);

  /* ---- space ---- */
  --sgb-1:4px; --sgb-2:8px; --sgb-3:12px; --sgb-4:16px;
  /* the single horizontal gap between anything sitting side by side */
  --sgb-gap:12px;
  --sgb-6:24px; --sgb-8:32px; --sgb-12:48px; --sgb-16:64px;

  /* ---- radius & motion ---- */
  --sgb-r-sm:8px; --sgb-r-md:12px; --sgb-r-full:999px;
  --sgb-t:160ms; --sgb-t-in:280ms; --sgb-ease:cubic-bezier(.2,.7,.3,1);

  /* ---- type ---- */
  --sgb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sgb-fs-xs:13px; --sgb-fs-sm:15px; --sgb-fs-md:16px;
  --sgb-fs-lg:19px; --sgb-fs-xl:26px;

  max-width:720px; margin-inline:auto; padding:var(--sgb-4);
  font-family:var(--sgb-font); font-size:var(--sgb-fs-md); line-height:1.55;
  color:var(--sgb-ink); -webkit-font-smoothing:antialiased;
}

@media (prefers-color-scheme:dark){
  .sgb{
    --sgb-s0:#0f1115; --sgb-s1:#161a20; --sgb-s2:#1e232b;
    --sgb-ink:#e8eaed; --sgb-ink-2:#a9b1bd; --sgb-ink-3:#7b838f;
    --sgb-line:rgba(255,255,255,.14); --sgb-line-strong:rgba(255,255,255,.38);
    --sgb-danger:#ff8a7a; --sgb-danger-bg:rgba(255,138,122,.08);
    --sgb-warn:#e0a458; --sgb-warn-bg:rgba(224,164,88,.10);
  }
}

.sgb *,.sgb *::before,.sgb *::after{box-sizing:border-box}
/* our own display rules must never win over the hidden attribute */
.sgb [hidden]{display:none!important}

/* ---- theme-bleed guard ----
   This form is dropped into somebody else's stylesheet. Themes routinely force
   uppercase text, their own font, focus backgrounds and z-index onto every
   button and input on the page, and without this those leak straight in.
   text-transform carries !important because themes commonly set it that way. */
.sgb :is(button,input,select,textarea,label,a,span,strong,em,b){
  text-transform:none !important;
  font-family:var(--sgb-font);
  letter-spacing:normal;
  text-shadow:none;
  line-height:inherit;
}
.sgb :is(button,input,select,textarea){float:none; min-width:0}
/* Themes love `label{display:block;width:100%}`, which turns every chip into
   its own full-width row. Chips and cards size to their own content. */
.sgb label{width:auto; float:none; clear:none; margin:0}
.sgb :is(.sgb-chip,.sgb-colorchip,.sgb-addcolor,.sgb-more-btn){flex:0 0 auto}
.sgb button{z-index:auto; position:relative}
.sgb h2{font-size:var(--sgb-fs-xl); line-height:1.2; margin:0; letter-spacing:-.02em; font-weight:650}
.sgb p{margin:0}
.sgb .sgb-hp{position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0}

/* ---------- progress ---------- */
.sgb-progress{margin-bottom:var(--sgb-8)}
.sgb-progress-bar{height:3px; background:var(--sgb-s2); border-radius:var(--sgb-r-full); overflow:hidden}
.sgb-progress-bar span{display:block; height:100%; width:0; background:var(--sgb-accent);
  border-radius:inherit; transition:width var(--sgb-t-in) var(--sgb-ease)}
.sgb-progress-steps{display:flex; gap:var(--sgb-1); list-style:none; margin:var(--sgb-3) 0 0; padding:0}
.sgb-progress-steps li{flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--sgb-1);
  font-size:var(--sgb-fs-xs); color:var(--sgb-ink-3); min-width:0}
.sgb-progress-steps em{font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.sgb-dot{display:grid; place-items:center; width:22px; height:22px; border-radius:var(--sgb-r-full);
  background:var(--sgb-s2); color:var(--sgb-ink-3); font-size:var(--sgb-fs-xs); font-weight:600;
  transition:background var(--sgb-t) var(--sgb-ease), color var(--sgb-t) var(--sgb-ease)}
.sgb-progress-steps li.is-active .sgb-dot{background:var(--sgb-accent); color:var(--sgb-accent-ink)}
.sgb-progress-steps li.is-active{color:var(--sgb-ink)}
.sgb-progress-steps li.is-done .sgb-dot{background:var(--sgb-accent-soft); color:var(--sgb-accent)}
@media (max-width:640px){ .sgb-progress-steps em{display:none} }

/* ---------- steps ---------- */
.sgb-step{display:grid; gap:var(--sgb-6)}
/* The heading is only a focus target for screen readers — never draw a ring. */
.sgb-step-head{margin-bottom:var(--sgb-4)}
.sgb .sgb-step-head:is(:focus,:focus-visible){outline:none; box-shadow:none}
.sgb-step.is-entering{animation:sgb-in var(--sgb-t-in) var(--sgb-ease) both}
.sgb-step.is-entering-back{animation:sgb-back var(--sgb-t-in) var(--sgb-ease) both}
@keyframes sgb-in{from{opacity:0; transform:translateX(24px)} to{opacity:1; transform:none}}
@keyframes sgb-back{from{opacity:0; transform:translateX(-24px)} to{opacity:1; transform:none}}
/* Reserve the tallest step's height so navigating never collapses the page. */
.sgb-form{min-height:var(--sgb-step-min,0px)}
.sgb-step-head{display:grid; gap:var(--sgb-2)}
.sgb-step-head p{color:var(--sgb-ink-2); font-size:var(--sgb-fs-sm)}

/* align-content:start stops a taller neighbour in a .sgb-row from stretching
   this field's rows and pushing its input out of line. */
.sgb-field{display:grid; gap:var(--sgb-2); align-content:start}
.sgb-field--danger .sgb-label{color:var(--sgb-danger)}
.sgb-row{display:grid; gap:var(--sgb-gap); grid-template-columns:1fr 1fr}
/* When both fields are narrower than half the form, equal columns strand a wide
   gap between them. Let these hug their content instead. */
.sgb-row--tight{grid-template-columns:repeat(2,auto); justify-content:start; gap:var(--sgb-gap)}
@media (max-width:560px){ .sgb-row,.sgb-row--tight{grid-template-columns:1fr; justify-content:stretch} }
.sgb-label{font-size:var(--sgb-fs-sm); font-weight:600; color:var(--sgb-ink)}
.sgb-req{color:var(--sgb-danger)}
.sgb-hint{font-size:var(--sgb-fs-xs); color:var(--sgb-ink-3); margin-top:calc(var(--sgb-1) * -1)}
.sgb-note{font-size:var(--sgb-fs-sm); color:var(--sgb-ink-2); background:var(--sgb-s1);
  border:1px solid var(--sgb-line); border-radius:var(--sgb-r-md); padding:var(--sgb-3) var(--sgb-4)}
.sgb-rule{border:0; border-top:1px solid var(--sgb-line); margin:0}

/* ---------- inputs ---------- */
.sgb input[type=text],.sgb input[type=email],.sgb input[type=url],.sgb input[type=date],
.sgb input[type=number],.sgb select,.sgb textarea{
  width:100%; font:inherit; color:var(--sgb-ink); background:var(--sgb-s0);
  border:1px solid var(--sgb-line-strong); border-radius:var(--sgb-r-sm);
  padding:12px var(--sgb-3); transition:border-color var(--sgb-t) var(--sgb-ease), box-shadow var(--sgb-t) var(--sgb-ease);
  /* Native date and number inputs size themselves differently from text inputs;
     pinning the height keeps a row of mixed fields level. */
  line-height:1.4; min-height:48px; appearance:none;
}
.sgb textarea{resize:vertical; min-height:80px; line-height:1.6}
/* Chromium's date field carries extra internal padding min-height cannot undo. */
.sgb input[type=date]{height:48px}
.sgb select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px;
  background-repeat:no-repeat; padding-right:var(--sgb-8); cursor:pointer}
.sgb ::placeholder{color:var(--sgb-ink-3); opacity:1}
.sgb :is(input,select,textarea):focus-visible,
.sgb :is(button,label,.sgb-thumb):focus-visible{
  outline:2px solid var(--sgb-accent); outline-offset:2px; border-color:var(--sgb-accent)
}
.sgb .is-invalid{border-color:var(--sgb-danger)!important; background:var(--sgb-danger-bg)}
.sgb-triple{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sgb-gap)}
@media (max-width:480px){ .sgb-triple{grid-template-columns:1fr} }
.sgb-ref{display:grid; grid-template-columns:1fr 1fr; gap:var(--sgb-gap); margin-bottom:0}
@media (max-width:560px){ .sgb-ref{grid-template-columns:1fr} }

.sgb-inline-check{display:flex; gap:var(--sgb-2); align-items:flex-start; cursor:pointer;
  font-size:var(--sgb-fs-sm); color:var(--sgb-ink-2); padding:var(--sgb-1) 0}
.sgb-inline-check input{margin:3px 0 0; width:17px; height:17px; accent-color:var(--sgb-accent); flex:none}

/* ---------- chips (checkbox / radio groups) ---------- */
.sgb-chips{display:flex; flex-wrap:wrap; gap:var(--sgb-gap)}
.sgb-chip{position:relative; cursor:pointer}
.sgb-chip input{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.sgb-chip span{display:flex; align-items:center; gap:var(--sgb-2); padding:9px var(--sgb-3); font-size:var(--sgb-fs-sm);
  border:1px solid var(--sgb-line-strong); border-radius:var(--sgb-r-full); background:var(--sgb-s0);
  color:var(--sgb-ink-2); transition:all var(--sgb-t) var(--sgb-ease); user-select:none}
.sgb-chip:hover span{border-color:var(--sgb-accent); color:var(--sgb-ink)}
.sgb-chip input:checked + span{background:var(--sgb-accent); border-color:var(--sgb-accent);
  color:var(--sgb-accent-ink); font-weight:550}
.sgb-chip input:focus-visible + span{outline:2px solid var(--sgb-accent); outline-offset:2px}

/* ---------- illustrated choice cards ---------- */
.sgb-cards{display:grid; gap:var(--sgb-gap)}
.sgb-cards--logo{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sgb-cards--lockup{grid-template-columns:repeat(auto-fill,minmax(122px,1fr))}
.sgb-card{position:relative; cursor:pointer}
.sgb-card input{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.sgb-card-body{display:grid; gap:var(--sgb-2); padding:var(--sgb-3); height:100%;
  border:1px solid var(--sgb-line-strong); border-radius:var(--sgb-r-md); background:var(--sgb-s0);
  transition:border-color var(--sgb-t) var(--sgb-ease), background var(--sgb-t) var(--sgb-ease),
             box-shadow var(--sgb-t) var(--sgb-ease)}
.sgb-card-text{display:grid; gap:1px}
.sgb-card-body strong{font-size:var(--sgb-fs-sm); font-weight:600; display:block}
.sgb-card-body em{font-style:normal; font-size:var(--sgb-fs-xs); color:var(--sgb-ink-3); display:block}

/* The example artwork. Muted until chosen, so the grid reads as one texture
   rather than eight competing pictures. */
.sgb-card-art{display:block; background:var(--sgb-s1); border-radius:var(--sgb-r-sm);
  padding:var(--sgb-2); transition:background var(--sgb-t) var(--sgb-ease)}
.sgb-art{display:block; width:100%; height:auto; color:var(--sgb-ink-3); font-family:var(--sgb-font);
  transition:color var(--sgb-t) var(--sgb-ease)}
.sgb-cards--lockup .sgb-art{max-height:44px}

.sgb-card:hover .sgb-card-body{border-color:var(--sgb-accent)}
.sgb-card:hover .sgb-art{color:var(--sgb-ink-2)}
.sgb-card input:checked + .sgb-card-body{border-color:var(--sgb-accent); background:var(--sgb-accent-soft);
  box-shadow:inset 0 0 0 1px var(--sgb-accent)}
.sgb-card input:checked + .sgb-card-body .sgb-card-art{background:var(--sgb-s0)}
.sgb-card input:checked + .sgb-card-body .sgb-art{color:var(--sgb-accent)}
.sgb-card input:checked + .sgb-card-body em{color:var(--sgb-ink-2)}
.sgb-card input:focus-visible + .sgb-card-body{outline:2px solid var(--sgb-accent); outline-offset:2px}

/* ---------- colour swatches ---------- */
.sgb-swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:var(--sgb-gap)}
.sgb-swatch{position:relative; cursor:pointer; display:grid; gap:var(--sgb-1)}
.sgb-swatch input{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.sgb-swatch-chips{display:flex; height:40px; border-radius:var(--sgb-r-sm); overflow:hidden;
  border:1px solid var(--sgb-line); transition:all var(--sgb-t) var(--sgb-ease)}
.sgb-swatch-chips i{flex:1}
.sgb-swatch-name{font-size:var(--sgb-fs-xs); color:var(--sgb-ink-3); transition:color var(--sgb-t) var(--sgb-ease)}
.sgb-swatch:hover .sgb-swatch-chips{border-color:var(--sgb-accent)}
.sgb-swatch input:checked ~ .sgb-swatch-chips{box-shadow:0 0 0 2px var(--sgb-accent); border-color:transparent}
.sgb-swatch input:checked ~ .sgb-swatch-name{color:var(--sgb-ink); font-weight:600}
.sgb-swatch input:focus-visible ~ .sgb-swatch-chips{outline:2px solid var(--sgb-accent); outline-offset:2px}
.sgb-field--danger .sgb-swatch input:checked ~ .sgb-swatch-chips{box-shadow:0 0 0 2px var(--sgb-danger)}
/* The "avoid" set answers a different question, so it should not look like the
   "explore" set. Compact tiles halve its height and make the pair scannable. */
.sgb-field--danger .sgb-swatches{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.sgb-field--danger .sgb-swatch-chips{height:22px}
.sgb-swatch.is-locked{opacity:.4; pointer-events:none}

/* ---------- the sliders ---------- */
.sgb-sliders{display:grid; gap:var(--sgb-6)}
.sgb-slider-head{display:flex; align-items:baseline; gap:var(--sgb-2); font-size:var(--sgb-fs-sm)}
.sgb-slider-pole{font-weight:600; color:var(--sgb-ink-2); transition:color var(--sgb-t) var(--sgb-ease)}
.sgb-pole-r{margin-left:auto; text-align:right}
.sgb-slider-value{font-size:var(--sgb-fs-xs); color:var(--sgb-ink-3); text-align:center; flex:1;
  padding:0 var(--sgb-1); transition:color var(--sgb-t) var(--sgb-ease)}
.sgb-slider.is-set .sgb-slider-value{color:var(--sgb-accent); font-weight:600}
.sgb-slider.is-left  .sgb-pole-l{color:var(--sgb-ink)}
.sgb-slider.is-right .sgb-pole-r{color:var(--sgb-ink)}
@media (max-width:520px){
  .sgb-slider-head{flex-wrap:wrap}
  .sgb-slider-value{order:3; flex-basis:100%; text-align:left; padding:0; margin-top:var(--sgb-1)}
}

.sgb-slider-row{display:flex; align-items:center; margin-top:calc(var(--sgb-1) * -1)}

/* A hairline and a hollow circle. The row stays 44px tall for touch even though
   the line itself is 2px — the whole strip is the tap target. */
.sgb-track{position:relative; flex:1; height:44px; display:flex; align-items:center; cursor:pointer}
.sgb-track::before{content:""; position:absolute; inset-inline:0; height:2px; border-radius:var(--sgb-r-full);
  background:var(--sgb-line-strong); opacity:.55; transition:opacity var(--sgb-t) var(--sgb-ease)}
.sgb-track:hover::before{opacity:.9}

/* Invisible full-height hit areas. No tick marks — the line stays clean. */
.sgb-notch{position:relative; flex:1; height:44px; border:0; background:none; cursor:pointer; padding:0}

.sgb-thumb{position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:var(--sgb-r-full); background:var(--sgb-s0); border:1.5px solid var(--sgb-ink-3);
  cursor:grab; opacity:0; transform:scale(.7); left:50%; pointer-events:none;
  transition:left 110ms cubic-bezier(.22,1,.36,1), opacity var(--sgb-t) var(--sgb-ease),
             transform var(--sgb-t) var(--sgb-ease), border-color var(--sgb-t) var(--sgb-ease)}
.sgb-slider.is-dragging .sgb-thumb{transition:opacity var(--sgb-t) var(--sgb-ease),
  transform var(--sgb-t) var(--sgb-ease), border-color var(--sgb-t) var(--sgb-ease)}
.sgb-slider.is-dragging .sgb-track{cursor:grabbing}
/* Until it holds a value the thumb must not swallow clicks aimed at the track —
   that made a dead zone in the middle of every untouched slider. */
.sgb-slider.is-set .sgb-thumb{opacity:1; transform:scale(1); border-color:var(--sgb-accent);
  border-width:2px; pointer-events:auto}
.sgb-track:hover .sgb-thumb{opacity:1; transform:scale(1)}

/* Hovering an untouched slider rocks the handle left and right. A client who has
   never met a slider needs to be shown that this thing moves, not told. */
@keyframes sgb-nudge{
  0%,100%{transform:translateX(-15px) scale(1)}
  50%    {transform:translateX(15px) scale(1)}
}
@media (hover:hover){
  .sgb-slider:not(.is-set):hover .sgb-thumb{
    opacity:1;
    animation:sgb-nudge 1.6s ease-in-out infinite;
  }
  .sgb-slider:not(.is-set):hover .sgb-track::before{opacity:.9}
}
@media (hover:none){
  .sgb-slider:not(.is-set).is-onscreen .sgb-thumb{
    opacity:1;
    animation:sgb-nudge 1.6s ease-in-out infinite;
  }
  .sgb-slider:not(.is-set).is-onscreen .sgb-track::before{opacity:.9}
}
.sgb-thumb:active{cursor:grabbing}
.sgb-slider-help{font-size:var(--sgb-fs-xs); color:var(--sgb-ink-3); margin-top:calc(var(--sgb-1) * -1)}

/* ---------- nav ---------- */
.sgb-nav{display:flex; align-items:center; gap:var(--sgb-3); margin-top:var(--sgb-8);
  padding-top:var(--sgb-4); border-top:1px solid var(--sgb-line)}
.sgb-nav-meta{margin-inline-start:auto; font-size:var(--sgb-fs-xs); color:var(--sgb-ink-3)}
.sgb-btn{font:inherit; font-size:var(--sgb-fs-sm); font-weight:600; cursor:pointer;
  padding:12px var(--sgb-6); border-radius:var(--sgb-r-sm); border:1px solid transparent;
  transition:all var(--sgb-t) var(--sgb-ease)}
.sgb-btn--primary{background:var(--sgb-accent); color:var(--sgb-accent-ink)}
.sgb-btn--primary:hover{filter:brightness(1.08)}
.sgb-btn--ghost{background:transparent; color:var(--sgb-ink-2); border-color:var(--sgb-line-strong); padding-inline:var(--sgb-4)}
.sgb-btn--ghost:hover{color:var(--sgb-ink); border-color:var(--sgb-ink-3)}
.sgb-btn[disabled]{opacity:.55; cursor:default; filter:none}

.sgb-errors{background:var(--sgb-danger-bg); border:1px solid var(--sgb-danger);
  color:var(--sgb-danger); border-radius:var(--sgb-r-sm); padding:var(--sgb-3) var(--sgb-4); font-size:var(--sgb-fs-sm)}

/* ---------- done ---------- */
.sgb-done{text-align:center; padding:var(--sgb-16) var(--sgb-4); display:grid; gap:var(--sgb-3); justify-items:center}
.sgb-done-mark{color:var(--sgb-accent)}
.sgb-done p{color:var(--sgb-ink-2); max-width:44ch}

@media (prefers-reduced-motion:reduce){
  .sgb *{animation:none!important; transition-duration:1ms!important}
}

/* ---------- picked-colour lists ---------- */
.sgb-colorlist{display:flex; flex-wrap:wrap; gap:var(--sgb-gap); align-items:center; margin-top:var(--sgb-3)}
.sgb-colorlist-items{display:flex; flex-wrap:wrap; gap:var(--sgb-gap)}
.sgb-colorchip{display:inline-flex; align-items:center; gap:var(--sgb-2); height:34px;
  padding:0 var(--sgb-1) 0 var(--sgb-3); border-radius:var(--sgb-r-full);
  border:1px solid var(--sgb-line); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.sgb-colorchip b{font-size:var(--sgb-fs-xs); font-weight:600; letter-spacing:.02em; font-variant-numeric:tabular-nums}
.sgb-colorchip button{width:22px; height:22px; border:0; border-radius:var(--sgb-r-full); cursor:pointer;
  background:rgba(255,255,255,.25); color:inherit; font-size:15px; line-height:1;
  display:grid; place-items:center; transition:background var(--sgb-t) var(--sgb-ease)}
.sgb-colorchip button:hover{background:rgba(255,255,255,.5)}

.sgb-addcolor{display:inline-flex; align-items:center; gap:var(--sgb-2); height:34px; padding:0 var(--sgb-3);
  font:inherit; font-size:var(--sgb-fs-xs); font-weight:600; color:var(--sgb-ink-2); cursor:pointer;
  background:var(--sgb-s0); border:1px dashed var(--sgb-line-strong); border-radius:var(--sgb-r-full);
  transition:all var(--sgb-t) var(--sgb-ease)}
.sgb-addcolor:hover{border-color:var(--sgb-accent); color:var(--sgb-accent); border-style:solid}
.sgb-addcolor-dot{width:14px; height:14px; border-radius:var(--sgb-r-full);
  background:conic-gradient(#e23d3d,#f2c230,#3fa96a,#2fa8a8,#3b7dd8,#8155d6,#e23d3d)}

/* ---------- the picker popover ---------- */
.sgb{position:relative}
.sgb-picker{position:absolute; z-index:200; width:260px; padding:var(--sgb-3);
  /* minmax(0,1fr) stops the foot row's min-content from widening the column */
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sgb-3);
  background:var(--sgb-s0); border:1px solid var(--sgb-line-strong); border-radius:var(--sgb-r-md);
  box-shadow:0 12px 32px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08)}
@media (prefers-color-scheme:dark){
  .sgb-picker{box-shadow:0 12px 32px rgba(0,0,0,.6)}
}

.sgb-picker-sv{position:relative; height:132px; border-radius:var(--sgb-r-sm); cursor:crosshair;
  touch-action:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sgb-picker-sv-thumb{position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px;
  border-radius:var(--sgb-r-full); border:2px solid #fff; pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3)}

.sgb-picker-hue{position:relative; height:14px; border-radius:var(--sgb-r-full); cursor:pointer; touch-action:none;
  background:linear-gradient(to right,#f00,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sgb-picker-hue-thumb{position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:var(--sgb-r-full); background:transparent; border:3px solid #fff; cursor:grab;
  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3)}

.sgb-picker-foot{display:flex; align-items:center; gap:var(--sgb-2)}
.sgb-picker-preview{flex:none; width:30px; height:30px; border-radius:var(--sgb-r-sm);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.sgb-picker-hex{flex:1 1 0; min-width:0; width:0!important; padding:6px var(--sgb-2)!important;
  font-size:var(--sgb-fs-xs)!important; font-variant-numeric:tabular-nums; text-transform:uppercase}
.sgb-picker-eye{flex:none; width:30px; height:30px; display:grid; place-items:center; cursor:pointer;
  background:var(--sgb-s0); color:var(--sgb-ink-2);
  border:1px solid var(--sgb-line-strong); border-radius:var(--sgb-r-sm);
  transition:all var(--sgb-t) var(--sgb-ease)}
.sgb-picker-eye:hover{border-color:var(--sgb-accent); color:var(--sgb-accent)}
.sgb-picker-ok{flex:none; padding:7px var(--sgb-4)!important; font-size:var(--sgb-fs-xs)!important}

@media (max-width:420px){ .sgb-picker{width:min(260px, calc(100vw - 48px))} }

/* ---------- chip icons ---------- */
.sgb-ico{flex:none; color:var(--sgb-ink-3); transition:color var(--sgb-t) var(--sgb-ease)}
.sgb-chip:hover .sgb-ico{color:var(--sgb-accent)}
.sgb-chip input:checked + span .sgb-ico{color:currentColor}

/* ---------- multi-select dropdown ---------- */
.sgb-ms{position:relative; z-index:0}
.sgb-ms.is-open{z-index:200}
.sgb-ms-toggle{display:flex; align-items:center; gap:var(--sgb-2); width:100%; font:inherit;
  font-size:var(--sgb-fs-md); text-align:left; cursor:pointer; color:var(--sgb-ink);
  background:var(--sgb-s0); border:1px solid var(--sgb-line-strong); border-radius:var(--sgb-r-sm);
  padding:12px var(--sgb-3); transition:border-color var(--sgb-t) var(--sgb-ease)}
.sgb-ms-toggle:hover{border-color:var(--sgb-accent)}
.sgb-ms-toggle svg{flex:none; margin-inline-start:auto; color:var(--sgb-ink-3);
  transition:transform var(--sgb-t) var(--sgb-ease)}
.sgb-ms-toggle[aria-expanded=true]{border-color:var(--sgb-accent)}
.sgb-ms-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.sgb-ms-summary{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.sgb-ms-summary.is-empty{color:var(--sgb-ink-3)}
.sgb-ms.is-filled .sgb-ms-toggle{border-color:var(--sgb-accent)}

.sgb-ms-panel{position:absolute; z-index:120; inset-inline:0; top:calc(100% + 6px);
  max-height:290px; overflow-y:auto; padding:var(--sgb-1);
  background:var(--sgb-s0); border:1px solid var(--sgb-line-strong); border-radius:var(--sgb-r-md);
  box-shadow:0 12px 32px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.07)}
@media (prefers-color-scheme:dark){ .sgb-ms-panel{box-shadow:0 12px 32px rgba(0,0,0,.6)} }

.sgb-ms-opt{display:flex; align-items:center; gap:var(--sgb-3); cursor:pointer;
  padding:9px var(--sgb-2); border-radius:var(--sgb-r-sm); font-size:var(--sgb-fs-sm);
  color:var(--sgb-ink-2); transition:background var(--sgb-t) var(--sgb-ease)}
.sgb-ms-opt:hover{background:var(--sgb-s1)}
.sgb-ms-opt input{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.sgb-ms-box{flex:none; display:grid; place-items:center; width:19px; height:19px; border-radius:5px;
  border:1.5px solid var(--sgb-line-strong); background:var(--sgb-s0); color:transparent;
  transition:all var(--sgb-t) var(--sgb-ease)}
.sgb-ms-opt input:checked + .sgb-ms-box{background:var(--sgb-accent); border-color:var(--sgb-accent);
  color:var(--sgb-accent-ink)}
.sgb-ms-opt input:checked ~ span{color:var(--sgb-ink); font-weight:550}
.sgb-ms-opt input:focus-visible + .sgb-ms-box{outline:2px solid var(--sgb-accent); outline-offset:2px}
.sgb-ms-other{padding:var(--sgb-1) var(--sgb-2) var(--sgb-2) calc(19px + var(--sgb-3) + var(--sgb-2))}

/* ---------- priced options ---------- */
.sgb-notice{font-size:var(--sgb-fs-xs); line-height:1.5; color:var(--sgb-ink);
  background:var(--sgb-warn-bg); border:1px solid var(--sgb-warn); border-left-width:3px;
  border-radius:var(--sgb-r-sm); padding:var(--sgb-2) var(--sgb-3); margin-top:var(--sgb-1)}

/* ---------- money input ---------- */
.sgb-money{position:relative; display:flex; align-items:center}
.sgb-money-sym{position:absolute; left:var(--sgb-3); font-size:var(--sgb-fs-md);
  color:var(--sgb-ink-3); pointer-events:none}
.sgb-money input{padding-left:calc(var(--sgb-3) + 1.1em)!important; font-variant-numeric:tabular-nums}
.sgb-money input::-webkit-outer-spin-button,
.sgb-money input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.sgb-money input[type=number]{-moz-appearance:textfield}

/* ---------- input widths matched to their content ---------- */
.sgb-w-sm{max-width:180px}
.sgb-w-md{max-width:320px}
.sgb-w-lg{max-width:460px}
.sgb-money{max-width:180px}

/* ---------- progressive disclosure ---------- */
.sgb-more{display:grid; gap:var(--sgb-3)}
.sgb-more-btn{display:inline-flex; align-items:center; gap:var(--sgb-2); align-self:start;
  justify-self:start; min-height:40px; padding:0 var(--sgb-3); font:inherit; font-size:var(--sgb-fs-sm); font-weight:600;
  color:var(--sgb-accent); cursor:pointer; background:transparent;
  border:1px dashed var(--sgb-line-strong); border-radius:var(--sgb-r-full);
  transition:border-color var(--sgb-t) var(--sgb-ease), background var(--sgb-t) var(--sgb-ease)}
.sgb-more-btn:hover{border-color:var(--sgb-accent); border-style:solid; background:var(--sgb-accent-soft)}
.sgb-more-btn svg{flex:none}
.sgb-more-body{display:grid; gap:var(--sgb-2); animation:sgb-reveal var(--sgb-t-in) var(--sgb-ease) both}
@keyframes sgb-reveal{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
[data-reflist]{display:grid; gap:var(--sgb-gap)}
[data-reflist] .sgb-ref{margin:0; animation:sgb-reveal var(--sgb-t-in) var(--sgb-ease) both}

/* ---------- radio group with a free-text escape hatch ---------- */
.sgb-pick{display:grid; gap:var(--sgb-2)}
.sgb-pick-other{animation:sgb-reveal var(--sgb-t-in) var(--sgb-ease) both}
.sgb-pick-other input{max-width:460px}

/* ---- states themes like to repaint ----
   Kept at the end, and specific enough to beat a theme's button:focus rules. */
.sgb .sgb-notch,
.sgb .sgb-notch:is(:hover,:focus,:active,:focus-visible){
  background:none; box-shadow:none; outline:none; border:0
}
.sgb .sgb-thumb{background:var(--sgb-s0)}
/* Deliberately NOT giving .sgb-step a z-index: that would trap the dropdown and
   the colour picker inside a low stacking context, below the nav. */
.sgb .sgb-nav{position:relative; z-index:0}
.sgb .sgb-chip span,
.sgb .sgb-ms-opt,
.sgb .sgb-card-body{line-height:1.4}

/* ---- buttons a theme must not repaint ----
   Themes commonly set button{background} and button:hover{background} with
   !important; these are specific enough and matched in every state. */
.sgb .sgb-btn--primary,
.sgb .sgb-btn--primary:is(:hover,:focus,:active,:focus-visible){
  background:var(--sgb-accent)!important; color:var(--sgb-accent-ink)!important; border-color:transparent!important
}
.sgb .sgb-btn--ghost,
.sgb .sgb-btn--ghost:is(:hover,:focus,:active,:focus-visible){
  background:var(--sgb-s0)!important; color:var(--sgb-ink-2)!important; border-color:var(--sgb-line-strong)!important
}
.sgb :is(.sgb-addcolor,.sgb-ms-toggle),
.sgb :is(.sgb-addcolor,.sgb-ms-toggle):is(:hover,:focus,:active){
  background:var(--sgb-s0)!important; color:var(--sgb-ink-2)!important
}
.sgb :is(.sgb-more-btn,.sgb-picker-eye),
.sgb :is(.sgb-more-btn,.sgb-picker-eye):is(:hover,:focus,:active){
  background:var(--sgb-s0)!important; color:var(--sgb-accent)!important
}
.sgb .sgb-addcolor:hover, .sgb .sgb-ms-toggle:hover{color:var(--sgb-accent)!important}
.sgb .sgb-picker-ok, .sgb .sgb-picker-ok:is(:hover,:focus,:active){color:inherit}
.sgb .sgb-colorchip button,
.sgb .sgb-colorchip button:is(:hover,:focus,:active){background:rgba(255,255,255,.3)!important; color:inherit!important}