/* STL Auto Results — board styles
   Scoped under .stl-board so nothing leaks into your theme. */

.stl-board{
  --stl-ink:#10233F;
  --stl-rule:#D6DEE9;
  --stl-muted:#6B7A8F;
  --stl-ok:#1E7A5A;
  --stl-head:#EAF0F7;
  margin:0 0 22px;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Clears a sticky header when the board is used as an anchor target.
     Override per-shortcode with offset="120", or globally by changing this. */
  scroll-margin-top:90px;
}

/* Individual rows can also be targeted, e.g. #results .stl-draw:first-child */
.stl-draw{scroll-margin-top:90px}

@media (max-width:782px){
  .stl-board,
  .stl-draw{scroll-margin-top:70px}
}

.stl-board *{box-sizing:border-box}

.stl-draw{
  background:#fff;
  border:1px solid var(--stl-rule);
  border-radius:6px;
  margin:0 0 12px;
  overflow:hidden;
}

.stl-draw__head{
  margin:0;
  padding:12px 16px;
  background:var(--stl-head);
  border-bottom:1px solid var(--stl-rule);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--stl-ink);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
}

.stl-draw__head small{
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--stl-muted);
}

.stl-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 16px;
  border-bottom:1px solid #EDF1F6;
}
.stl-row:last-child{border-bottom:0}

.stl-time{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--stl-muted);
  min-width:74px;
  flex-shrink:0;
}

.stl-balls{display:flex;gap:7px}

.stl-ball{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--stl-ink);
  color:#fff;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.28);
}

.stl-ball--pending{
  background:#E4EAF2;
  color:#9DAEC4;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.05);
}

.stl-tag{
  margin-left:auto;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  font-weight:600;
  color:var(--stl-ok);
  flex-shrink:0;
}
.stl-tag--muted{color:var(--stl-muted)}


.stl-stamp{
  margin:0 0 22px;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  color:#6B7A8F;
}

@media (max-width:560px){
  .stl-ball{width:34px;height:34px;font-size:16px}
  .stl-row{gap:10px;padding:11px 13px}
  .stl-time{min-width:64px;font-size:12px}
  .stl-draw__head{font-size:12px;padding:11px 13px}
}