/* The three "bring more" features on the build page (extras.js). Tokens and .btn come from site.css. */
#slot-parts,#slot-paste,#slot-logo{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:18px;background:var(--card)}
#slot-parts[hidden],#slot-paste[hidden],#slot-logo[hidden]{display:none}
.x-h{font-size:19px;font-weight:600;line-height:1.2;letter-spacing:-.018em}
.x-h span{color:var(--soft)}
.x-in{width:100%;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--raised);color:var(--ink);font:400 17px/1.2 var(--text);letter-spacing:-.022em;outline:0;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.x-in::placeholder{color:var(--faint);opacity:1}
.x-in:focus-visible{border-color:var(--accent-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.x-area{height:auto;min-height:104px;padding:12px 14px;resize:vertical;font:400 13px/1.5 var(--mono);letter-spacing:0;white-space:pre;overflow:auto}
.x-seg{display:inline-flex;align-self:flex-start;gap:2px;max-width:100%;padding:3px;border-radius:980px;background:var(--fill-2);overflow-x:auto;scrollbar-width:none}
.x-seg button{flex:none;height:32px;padding:0 14px;border:0;border-radius:980px;background:none;color:var(--ink);font:400 14px/1 var(--text);letter-spacing:-.016em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .25s,box-shadow .25s,transform .12s var(--ease)}
.x-seg button:active{transform:scale(.96)}
.x-seg button[aria-pressed="true"]{background:var(--raised);box-shadow:0 1px 4px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.06);font-weight:500}
.x-say{color:var(--soft);font-size:14px;line-height:1.4}
.x-say:empty{display:none}
.x-fine{color:var(--faint);font-size:12px;line-height:1.4}
.x-rows{display:flex;flex-direction:column;max-height:340px;margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.x-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:12px 2px;border-top:1px solid var(--line)}
.x-rows li:first-child{border-top:0}
.x-row-t{min-width:0}
.x-row-t b{font-size:15px;font-weight:600;letter-spacing:-.016em}
.x-row-t small{margin-left:8px;color:var(--faint);font-size:12px}
.x-row-t p{color:var(--soft);font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.x-chips{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.x-hint{color:var(--soft);font-size:13px}
.x-chip{min-height:32px;padding:6px 12px;border:0;border-radius:980px;background:var(--raised);color:var(--ink);font:400 13px/1.2 var(--text);cursor:pointer;transition:background-color .2s,color .2s,transform .12s var(--ease),box-shadow .2s}
button.x-chip:hover{background:var(--accent);color:var(--on-accent)}
button.x-chip:active{transform:scale(.96)}
.x-chip.still{cursor:default}
.x-bring{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.x-bring[hidden],.x-switch-row[hidden]{display:none}
.x-switch-row{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}
.x-switch{position:relative;flex:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.x-switch::before{content:"";position:absolute;inset:10px 0;border-radius:99px;background:var(--silver);transition:background-color .3s}
.x-switch::after{content:"";position:absolute;top:12px;left:2px;width:20px;height:20px;border-radius:99px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.x-switch[aria-checked="true"]::before{background:var(--accent)}
.x-switch[aria-checked="true"]::after{transform:translateX(20px)}
#slot-logo .btn{align-self:flex-start;cursor:pointer}
#slot-logo input:focus-visible + .btn{outline:2px solid var(--accent-ink);outline-offset:3px}
.x-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.x-swatches:empty{display:none}
.x-swatch{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);cursor:pointer;transition:transform .3s var(--ease),box-shadow .2s}
.x-swatch:hover{transform:scale(1.1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 3px var(--bg),0 0 0 5px var(--c)}
.x-swatch:active{transform:scale(.94)}
@media (pointer:coarse),(max-width:899px){
  .x-seg button,.x-chip{min-height:44px}
  .x-seg button{padding:0 16px}
  #slot-logo .btn{height:44px}
}
.x-groups:empty{display:none}
.x-groups .x-chip[aria-pressed="true"]{background:var(--ink);color:var(--bg)}