/* The suggestions list on the Brands tab (suggested.js). */
.sg-top{display:flex;flex-direction:column;gap:12px}
.sg-full{margin:0;padding:12px 14px;border-radius:16px;font-size:14px;font-weight:600;line-height:1.4} /* its yellow is in problems.css */
.sg-top .add input:disabled{opacity:.55;cursor:default}
.sg-none{margin:0;font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.sg-looking{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--soft)}
.sg-looking span{min-width:0;overflow-wrap:anywhere}
.sg-looking i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green-deep);animation:blink 1.2s infinite}
@media (prefers-reduced-motion:reduce){.sg-looking i{animation:none}}
/* A pitch on its way: the line on the Brands tab, its pill, and the card on the brand. */
button.sg-looking{width:100%;min-height:40px;padding:0;border:0;background:none;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.sg-looking.bad{color:var(--red)}
.sg-looking.ask{color:var(--orange-deep)}
.sg-looking.bad i,.sg-looking.ask i{background:currentColor;animation:none}
.sg-looking.done{color:var(--green-deep)}
.sg-card .sg-warn{font-size:13.5px;color:var(--orange-deep)}
.sg-looking.done i{animation:none}
.st.busy::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--green-deep);vertical-align:1px;animation:blink 1.2s infinite}
@media (prefers-reduced-motion:reduce){.st.busy::before{animation:none}}
.sg-job p{overflow-wrap:anywhere}
.sg-empty{padding:16px 0}
.sg-empty .btn{align-self:flex-start}

.sg-card p,.sg-sheet p{margin:0;overflow-wrap:anywhere}
.sg-card .btn:not(.dark){background:var(--white)} /* the card is the same colour as a plain button */
.sg-name{display:flex;align-items:center;gap:12px;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left}
.sg-title{flex:1;min-width:0;display:flex;flex-direction:column}
.sg-title b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-why{font-size:14px;color:var(--soft)}
.sg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;font-size:12.5px}
.sg-choice .btn{flex:1}
.sg-first{display:flex;flex-direction:column;gap:4px}
.sg-alt{display:flex;flex-wrap:wrap;gap:0 20px}
.sg-alt .linkish{display:inline-flex;align-items:center;min-height:40px;margin:0;padding:0}
.sg-ask{display:flex;flex-direction:column;gap:12px}
.sg-card .sg-ask .seg{background:var(--white)} /* the card is the colour the control usually is */
.sg-card .sg-ask .seg button[aria-pressed="true"]{background:var(--hush);box-shadow:none}
.sg-no{display:flex;flex-direction:column;gap:10px}
.sg-no-top{display:flex;align-items:center;justify-content:space-between;margin:-6px 0}
.sg-no-x{flex:none;width:44px;height:44px;margin-right:-12px;border:0;background:none;color:var(--soft);display:grid;place-items:center}
.sg-no-x svg{width:18px;height:18px}
.sg-reasons{display:flex;flex-wrap:wrap;gap:8px}
.sg-reasons .chip{min-height:40px;cursor:pointer}
.sg-card .sg-reasons .chip,.sg-card .sg-no input{background:var(--white)} /* the card is the colour they usually are */

.sg-links{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 2px;max-width:100%}
.sg-mark{display:inline-grid;place-items:center;width:40px;height:40px;color:var(--c,var(--mute))}
.sg-mark svg{width:20px;height:20px}
.sg-mark:first-child{margin-left:-10px} /* lines the mark itself up with the text above it */
.sg-site{display:inline-flex;align-items:center;min-height:40px;max-width:100%;padding-right:8px;font-size:13px;color:var(--soft);overflow-wrap:anywhere}

.sg-sheet{display:flex;flex-direction:column;gap:12px;font-size:15.5px}

.sg-rest .preview{display:none} /* brands you already have: the name and where it stands */

.sg-auto{display:flex;flex-direction:column;gap:14px}
.sg-auto:has(input:not(:checked)) .grid2{display:none} /* how often and how many only matter when it's on */