/* /addons/sf-speed (src/sfspeed_page.js): the SF-Speed window and its tooltip drawn in HTML, from the addon's own
   colours (UI.lua Skin, LABEL_C / VALUE_C, Core.lua SECTIONS, Pace.lua THRESHOLDS). Sits on the site's app.css. */
.sfs-cta { margin-top: 14px; }
.sfs-cta .meta { margin: 8px 0 0; color: var(--muted); font-size: 0.88rem; }
.sfs-handoff { max-width: 360px; } .sfs-handoff .dl-ok { pointer-events: none; color: var(--green); } .sfs-handoff .dl-miss { color: var(--amber); }
.sfs-show { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-start; justify-content: center; margin: 18px 0 4px;
  padding: 26px 16px; border-radius: 14px; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 30% 20%, rgba(90, 120, 70, 0.35), transparent 60%), linear-gradient(160deg, #1d2a1c, #10160f 60%, #0b0f0b); }
.sfs-show figure { margin: 0; display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
.sfs-show figcaption { color: #c9cfbf; font-size: 0.84rem; max-width: 330px; }
/* the window: dark translucent panel, 1 px grey border, Friz-like bold sans */
.sfs-win { position: relative; width: 330px; max-width: 100%; box-sizing: border-box; padding: 6px 8px 10px; background: rgba(10, 10, 13, 0.82);
  border: 1px solid rgba(89, 89, 97, 0.9); font: 600 12.5px/1.25 "Barlow", system-ui, sans-serif; color: #f2f2f2; text-shadow: 1px -1px 0 #000;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); }
.sfs-win img { width: 16px; height: 16px; border-radius: 2px; flex: 0 0 auto; }
.sfs-win .t { display: flex; align-items: center; gap: 6px; padding: 0 0 4px; }
.sfs-win .t b { color: #0070dd; font-size: 13.5px; }
.sfs-win .t small { color: #9ea3b3; font-weight: 600; }
.sfs-win .t .cog { margin-left: auto; width: 14px; height: 14px; opacity: 0.9; }
.sfs-win .onyou { display: flex; align-items: center; gap: 7px; margin: 2px 0 4px; color: #ffd100; font-size: 18px; }
.sfs-win .onyou img { width: 22px; height: 22px; }
.sfs-win .onyou b { color: #ffd100; font-size: 22px; }
.sfs-win .sec { margin-top: 5px; }
.sfs-win .sec .h { display: flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: 0.08em; margin: 0 0 2px; }
.sfs-win .sec .h i { flex: 1; height: 1px; background: currentColor; opacity: 0.35; }
.sfs-win .s-pull .h { color: #ff8c40; } .sfs-win .s-session .h { color: #73bfff; } .sfs-win .s-level .h { color: #c794ff; } .sfs-win .s-pace .h { color: #66e680; }
.sfs-win .r { display: grid; grid-template-columns: 18px 76px 1fr; align-items: center; gap: 5px; padding: 1px 0; }
.sfs-win .r .l { color: #9ea3b3; white-space: nowrap; }
.sfs-win .r .v { color: #f2f2f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfs-win .live { color: #ff8040; }
.sfs-win .m, .sfs-tip .m { color: #9ea3b3; font-style: normal; }
.sfs-win .xph { color: #80c0ff; font-weight: 600; }
.sfs-win .grip { position: absolute; right: 2px; bottom: 2px; width: 10px; height: 10px; opacity: 0.5;
  background: linear-gradient(135deg, transparent 50%, #aaa 50%, #aaa 60%, transparent 60%, transparent 75%, #aaa 75%, #aaa 85%, transparent 85%); }
.p-dark { color: #1ab838; } .p-light { color: #8cff73; } .p-yellow { color: #ffe633; } .p-orange { color: #ff8c1a; } .p-red { color: #ff3838; }
.sfs-win b[class^="p-"], .sfs-tip b[class^="p-"] { font-weight: 600; }
/* the game tooltip */
.sfs-tip { width: 300px; max-width: 100%; box-sizing: border-box; padding: 9px 11px; background: rgba(5, 8, 22, 0.94); border: 1px solid #5f6680;
  border-radius: 4px; font: 500 12.5px/1.35 "Barlow", system-ui, sans-serif; color: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); }
.sfs-tip .tt { font-size: 14px; display: block; margin-bottom: 4px; }
.sfs-tip p { margin: 0 0 6px; color: #ffd100; }
.sfs-tip p.g { margin: 6px 0 0; color: #9ea3b3; }
.sfs-tip .tl { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.sfs-tip .tl.you { color: #fff; }
/* the rest of the page */
.sfs-feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 18px; }
.sfs-feat > div { display: flex; gap: 10px; align-items: flex-start; }
.sfs-feat img { width: 32px; height: 32px; border-radius: 5px; border: 1px solid var(--line2); flex: 0 0 auto; }
.sfs-feat p { margin: 0; color: var(--muted); font-size: 0.93rem; } .sfs-feat b { display: block; color: var(--text); }
.sfs-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.sfs-steps code, .sfs-feat code { overflow-wrap: anywhere; }
.sfs-steps small { color: var(--muted); display: inline-block; margin-top: 3px; }
.sfs-log h3 { margin: 0 0 6px; font-size: 1.05rem; } .sfs-log h3 small { color: var(--muted); font-weight: 500; margin-left: 6px; }
.sfs-log h3:not(:first-child) { margin-top: 16px; }
.sfs-log ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
@media (max-width: 560px) { .sfs-show { padding: 16px 10px; } .sfs-win { font-size: 11.5px; } .sfs-win .r { grid-template-columns: 18px 64px 1fr; } .sfs-win .r .v { white-space: normal; } }

/* the product icon beside the title (site/public/products/, art/brand/tools/build_products.py) */
.sfs-title { display: flex; align-items: center; gap: 16px; }
.sfs-title .pic { width: 88px; height: 88px; flex: none; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); }
@media (max-width: 600px) { .sfs-title { gap: 12px; } .sfs-title .pic { width: 64px; height: 64px; } }
/* /downloads: the window above SF-Speed's download button, a link to its page; a dark game-world backdrop like .sfs-show */
.sfs-dl-pic { display: flex; justify-content: center; margin: 4px 0 2px; padding: 18px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 30% 20%, rgba(90, 120, 70, 0.35), transparent 60%), linear-gradient(160deg, #1d2a1c, #10160f 60%, #0b0f0b);
  text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.sfs-dl-pic:hover, .sfs-dl-pic:focus-visible { border-color: var(--gold, #c9a34a); }
.sfs-dl-pic .sfs-win { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .sfs-dl-pic { transition: none; } }
.sfs-cta .dl-hash { text-align: left; margin-top: 4px; font-size: 0.74rem; }