/* Sponsors (public/sponsors.js; DESIGN.md "Sponsors"). Ten equal spots: --ui-* tokens only,
   light and dark, hairlines, 14px corners, no shadows at rest, purple only for focus.
   Layouts: grid (homepage and /free-tools/: 5 × 2, 2 × 5 on tablets and phones), rail (the
   Resources sidebar: one column), strip (the tools' loading card: compact, as many as fit). */
.sps{--sps-tile:#fff;--sps-tile-line:var(--ui-line);box-sizing:border-box;width:100%;margin:0;color:var(--ui-text);font-family:var(--ui-font);text-align:left}
[data-theme=dark] .sps{--sps-tile:#F2F1F4;--sps-tile-line:transparent}
.sps *,.sps *::before,.sps *::after{box-sizing:border-box}
.sps-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;margin:0 0 10px;padding:0 2px}
.sps-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 11px/1.2 var(--ui-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ui-faint)}
.sps-join{display:inline-flex;align-items:center;gap:4px;padding:2px 0;color:var(--ui-dim);font:500 13px/1.2 var(--ui-font);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:color var(--ui-t-exit,.15s)}
.sps-join:hover{color:var(--ui-text)}
.sps-join svg{transition:transform var(--ui-t-exit,.15s) var(--ui-ease,ease)}
.sps-join:hover svg{transform:translate(1px,-1px)}
.sps-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sps-list li{display:flex;min-width:0}

/* One spot: the logo on a light tile, the name, the short line, an arrow. */
.sps-spot{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 12px 12px 12px;border:.8px solid var(--ui-line);border-radius:14px;background:var(--ui-card);color:var(--ui-text);text-decoration:none;transition:border-color var(--ui-t-exit,.15s),background-color var(--ui-t-exit,.15s)}
.sps-spot:hover{border-color:var(--ui-line-strong)}
.sps-spot:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.sps-logo{display:grid;place-items:center;flex:none;width:40px;height:40px;border:.8px solid var(--sps-tile-line);border-radius:10px;background:var(--sps-tile);overflow:hidden}
.sps-logo img{display:block;width:100%;height:100%;object-fit:contain}
.sps-logo i{font:600 16px/1 var(--ui-font);font-style:normal;color:#17151C}
.sps-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.sps-text b{overflow:hidden;font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.015em;white-space:nowrap;text-overflow:ellipsis}
.sps-text small{display:-webkit-box;overflow:hidden;font-size:12.5px;line-height:1.4;letter-spacing:-.005em;color:var(--ui-dim);-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sps-go{align-self:start;display:grid;place-items:center;width:16px;height:16px;color:var(--ui-faint);transition:color var(--ui-t-exit,.15s),transform var(--ui-t-exit,.15s) var(--ui-ease,ease)}
.sps-spot:hover .sps-go{color:var(--ui-text);transform:translate(1px,-1px)}

/* An open spot: a dashed edge, a dashed plus tile, quiet words. */
.sps-open{grid-template-columns:auto minmax(0,1fr);border-style:dashed;border-color:var(--ui-line-strong);background:transparent}
.sps-open:hover{border-color:var(--ui-btn2-line);background:var(--ui-card)}
.sps-open .sps-logo{border:.8px dashed var(--ui-line-strong);background:transparent;color:var(--ui-faint)}
.sps-open:hover .sps-logo{color:var(--ui-link);border-color:var(--ui-btn2-line)}
.sps-open .sps-text b{color:var(--ui-dim);font-weight:500}
.sps-open .sps-text small{color:var(--ui-faint)}

/* Grid: the homepage and /free-tools/, under the link box and as wide as it (920px). Five
   across, two rows; the whole spot is the link (no arrow, so names get the room). */
.sps-grid{width:min(920px,100%);margin:20px auto 0}
.sps-grid .sps-list{grid-template-columns:repeat(5,minmax(0,1fr))}
.sps-grid .sps-spot{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;min-height:82px;padding:12px}
.sps-grid .sps-logo{width:36px;height:36px;border-radius:9px}
.sps-grid .sps-text b{font-size:14px}
.sps-grid .sps-open{align-items:center}
.sps-grid .sps-open .sps-text b{white-space:normal;line-height:1.35}
.sps-grid .sps-open .sps-text small{display:none}
.sps-grid .sps-go{display:none}
@media (max-width:899px){
  .sps-grid .sps-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .sps-grid{margin-top:16px}
  .sps-grid .sps-list{gap:6px}
  .sps-grid .sps-spot{gap:10px;min-height:60px;padding:10px;border-radius:12px}
  .sps-grid .sps-logo{width:34px;height:34px;border-radius:9px}
  .sps-grid .sps-text b{font-size:14px}
  .sps-grid .sps-text small{font-size:12px;-webkit-line-clamp:1}
  .sps-head{margin-bottom:8px}
  .sps-join{font-size:12.5px}
  .sps-label{font-size:10.5px;letter-spacing:.04em}
}
@media (max-width:360px){.sps-grid .sps-logo{width:30px;height:30px}.sps-grid .sps-spot{gap:8px;padding:9px}}

/* Rail: the Resources sidebar (one column, compact rows). */
.sps-rail .sps-list{gap:6px}
.sps-rail .sps-spot{gap:10px;min-height:56px;padding:9px 10px;border-radius:12px}
.sps-rail .sps-logo{width:34px;height:34px;border-radius:9px}
.sps-rail .sps-text b{font-size:14px}
.sps-rail .sps-text small{font-size:12px;-webkit-line-clamp:1}
.sps-rail .sps-go{align-self:center}
.sps-rail .sps-open .sps-text small{-webkit-line-clamp:1}
.sps-rail .sps-head{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:10px;padding:0 2px}
/* Resources on tablets and phones: the same spots as a grid above the list. */
.sps-band .sps-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.sps-band .sps-spot{gap:8px;min-height:52px;padding:8px 10px;border-radius:12px}
.sps-band .sps-logo{width:30px;height:30px;border-radius:8px}
.sps-band .sps-text b{font-size:13.5px}
.sps-band .sps-text small,.sps-band .sps-go{display:none}
@media (max-width:760px){.sps-band .sps-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Strip: inside the tools' loading card, under the stage and the steps. */
.sps-strip{margin:8px 0 0;padding:14px 16px 16px;border-radius:14px;background:var(--ui-well)}
.sps-strip .sps-head{margin-bottom:10px}
.sps-strip .sps-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.sps-strip .sps-spot{gap:10px;min-height:52px;padding:8px 10px;border-radius:12px}
.sps-strip .sps-logo{width:32px;height:32px;border-radius:8px}
.sps-strip .sps-text b{font-size:13.5px}
.sps-strip .sps-text small{font-size:12px;-webkit-line-clamp:1}
.sps-strip .sps-go{align-self:center}
@media (max-width:640px){
  .sps-strip{margin-top:6px;padding:12px 10px 10px}
  .sps-strip .sps-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sps-strip .sps-text small,.sps-strip .sps-go{display:none}
}
/* The strip's place in the card: the full width, under both columns. */
.ftp-sps{grid-column:1/-1;min-width:0}
.ftp-sps:empty,.ftp[data-state=error] .ftp-sps{display:none}
/* While a tool works under the link box, its loading card carries the sponsors, so the block under
   the link box steps aside until the card has gone (never the same spots twice on one screen). */
.ftp ~ .sps-grid{display:none}

@media (prefers-reduced-motion:reduce){.sps-go,.sps-join svg{transition:color .15s}}