/* The score guess (templates/site/hooks/_score_guess.html, assets/lp/js/hooks/score_guess.js).
   One hero, the dial; everything else is the kit's type, list rows, buttons and gate. The card lays
   itself out by its own width (a container query), so the same widget reads right in the 720px blog
   column, beside a card page's full row and on a 390px phone. Palette: the brand blue family and
   white at opacities; green only in the gate's own done line, red only in the kit's error banner. */

.sg { container-type: inline-size; }
.sg-card { position: relative; border-radius: 24px; padding: 32px 36px; }
.sg-grid { display: flex; flex-direction: column; gap: 24px; }
.sg-side { display: contents; }
.sg-intro { order: 1; }
.sg-dialcol { order: 2; display: flex; justify-content: center; }
.sg-act { order: 3; }
.sg-out { order: 4; }

/* the kicker the site's sections open with (.bxc-kicker), in the widget's words */
.sg-kicker { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 5px 14px 5px 12px; margin: 0 0 16px; border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 15px; line-height: 20px; color: #FFFFFF; }
.sg-kicker svg { width: 16px; height: 16px; color: var(--bx-peri); flex: none; }
.sg-intro .bxc-h2 { margin: 0 0 10px; }
.sg-intro .bxc-sub { max-width: 520px; }

/* ---------- the dial ---------- */
.sg-dial { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%;
    touch-action: none; cursor: grab; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.sg.is-drag .sg-dial { cursor: grabbing; }
.sg.is-locked .sg-dial { cursor: default; touch-action: auto; }
.sg-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sg-track { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 14; stroke-linecap: round; }
.sg-fill { fill: none; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 603.19 603.19;
    filter: drop-shadow(0 0 10px rgba(38, 75, 255, .5)); transition: stroke-dashoffset .45s var(--bx-ease); }
.sg-tick { stroke: rgba(255, 255, 255, .16); stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: center;
    transition: stroke .3s var(--bx-ease); }
.sg-tick--major { stroke: rgba(255, 255, 255, .32); stroke-width: 2.4; }
.sg-tick.is-on { stroke: rgba(185, 195, 255, .6); }
.sg-tick--major.is-on { stroke: #FFFFFF; }
.sg-tick.is-pulse { animation: sg-pulse .34s var(--bx-ease); }
@keyframes sg-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.5); stroke: #FFFFFF; } 100% { transform: scale(1); } }
.sg-end { font: 500 12px/1 var(--bx-font); letter-spacing: 0; fill: rgba(255, 255, 255, .45); }

/* the thumb rides the arc: a group turned around the dial's centre, so no trigonometry reaches the page */
.sg-thumb { transform-box: view-box; transform-origin: 160px 160px; transition: transform .45s var(--bx-ease); }
.sg.is-drag .sg-thumb, .sg.is-drag .sg-fill { transition: none; }
.sg-thumb__halo { fill: rgba(133, 133, 233, 0); stroke: rgba(185, 195, 255, 0); stroke-width: 2; transition: fill .3s var(--bx-ease), stroke .3s var(--bx-ease); }
.sg-thumb__knob { fill: #FFFFFF; filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5)) drop-shadow(0 0 14px rgba(38, 75, 255, .6)); transition: r .2s var(--bx-ease); }
.sg-thumb__dot { fill: #264BFF; transition: fill .3s var(--bx-ease); }
.sg-dial:hover .sg-thumb__halo { fill: rgba(133, 133, 233, .16); }
.sg.is-drag .sg-thumb__halo { fill: rgba(133, 133, 233, .26); }
.sg.is-drag .sg-thumb__knob { r: 16.5; }
.sg-dial:focus-visible .sg-thumb__halo { fill: rgba(133, 133, 233, .18); stroke: #B9C3FF; }
.sg.is-locked .sg-dial:hover .sg-thumb__halo { fill: rgba(133, 133, 233, 0); }
.sg.is-locked .sg-thumb__dot { fill: #8585E9; }

.sg-read { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
    pointer-events: none; text-align: center; white-space: nowrap; }
.sg-num { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 68px; line-height: 70px; letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums; color: #FFFFFF; }
.sg-word { margin-top: 4px; font-size: 17px; line-height: 22px; font-weight: 500; color: var(--bx-peri); }
.sg-range { font-size: 13px; line-height: 18px; color: var(--bx-text-3); }

/* ---------- lock ---------- */
.sg-act { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sg .sg-lockbtn { min-width: 232px; }
.sg-note { margin: 0; }
.sg-locked { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; font-size: 15px; line-height: 20px; color: var(--bx-text-2); }
.sg-locked b { font-family: var(--bx-font-numbers); font-weight: 500; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.sg-locked .bxc-textbtn { padding: 12px 8px; }

/* ---------- the answer ---------- */
.sg-out { display: flex; flex-direction: column; gap: 16px; min-width: 0; animation: sg-rise .4s var(--bx-ease) both; }
.sg-outhead .bxc-small { margin-top: 6px; min-height: 20px; }
.sg-outhead .bxc-small:empty { display: none; }
/* the answer is brought up under the site header, not behind it, with the guess line above it */
.sg-locked, .sg-out { scroll-margin-top: 96px; }
@keyframes sg-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sg-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sg-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sg-list li { margin: 0; padding: 0; list-style: none; }
.sg-row { color: #FFFFFF; text-decoration: none; min-height: 64px; transition: background .3s var(--bx-ease), box-shadow .3s var(--bx-ease), transform 75ms var(--bx-ease); }
a.sg-row:hover { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .45); }
a.sg-row:active { transform: scale(.99); }
a.sg-row:focus-visible { outline: 2px solid var(--bx-peri); outline-offset: 2px; }
.sg-row .mx-row__txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-row .mx-row__n { font-variant-numeric: tabular-nums; flex: none; }
.sg-row.is-here { background: rgba(38, 75, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .5); }
.sg-art { overflow: hidden; background: rgba(255, 255, 255, .06); }
.sg-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-art--mark { background: rgba(255, 255, 255, .92); }
.sg-art--mark img { object-fit: contain; padding: 5px 7px; }
.sg-here { align-self: flex-start; height: 22px; margin-bottom: 4px; font-size: 11px; }

.sg-next { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding: 16px 16px 16px 20px; border-radius: 16px;
    background: rgba(38, 75, 255, .10); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .35); }
.sg-next__txt { flex: 1; min-width: 0; }
.sg-next__txt b { display: block; font-weight: 500; font-size: 16px; line-height: 22px; }
.sg-next__txt i { display: block; margin-top: 2px; font-style: normal; font-size: 14px; line-height: 20px; color: var(--bx-text-2); }
.sg-next .btn { flex: none; }
.sg-src { margin: 0; }

/* loading: the rows' own shape, never a spinner */
.sg-sk-line { display: block; height: 12px; width: 62%; border-radius: 6px; margin-top: 4px; }
.sg-skrow { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .03);
    box-shadow: inset 0 0 0 1px var(--bx-line-8); }
.sg-skrow__art { width: 54px; height: 34px; flex: none; border-radius: 6px; }
.sg-skrow__txt { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sg-skrow__txt .bxc-sk { height: 12px; border-radius: 6px; }
.sg-skrow__txt .bxc-sk:first-child { width: 58%; }
.sg-skrow__txt .bxc-sk:last-child { width: 34%; }
.sg-skrow__n { width: 44px; height: 22px; flex: none; border-radius: 6px; }

/* empty and error */
.sg-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 16px;
    background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--bx-line-8); }
.sg-empty .bxc-ico { width: 40px; height: 40px; border-radius: 12px; }
.sg-empty .bxc-ico svg { width: 20px; height: 20px; }
.sg-empty__txt b { display: block; font-weight: 500; font-size: 16px; line-height: 22px; }
.sg-empty__txt .bxc-small { margin-top: 4px; }
.sg-err { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sg-err .bxc-banner { align-self: stretch; }

/* ---------- wide: the words and the answer on the left, the dial beside them, like the site's own sections ---------- */
@container (min-width: 900px) {
    .sg-grid { flex-direction: row; align-items: stretch; gap: 48px; }
    .sg-dialcol { flex: none; width: 320px; align-items: center; }
    /* with the answer open the dial rides along beside it, clear of the site header */
    .sg.is-out .sg-dialcol { align-self: flex-start; position: sticky; top: 120px; }
    .sg-side { display: flex; flex-direction: column; justify-content: center; gap: 24px; flex: 1; min-width: 0; }
}
@container (max-width: 899px) {
    .sg-act { align-items: stretch; text-align: center; }
    .sg .sg-lockbtn { width: 100%; min-width: 0; }
    .sg-locked { justify-content: center; }
}
@container (max-width: 560px) {
    .sg-card { padding: 22px 18px 24px; }
    .sg-grid { gap: 20px; }
    .sg-kicker { margin-bottom: 14px; }
    .sg-num { font-size: 60px; line-height: 62px; }
    .sg-next { flex-direction: column; align-items: stretch; padding: 16px; }
    .sg-next .btn { width: 100%; }
    .sg-row { gap: 12px; padding: 12px; }
    .sg-row .mx-row__txt b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .sg-of { display: none; }
    /* the one action of an empty or failed answer is the thumb's full width, like every primary action on a phone */
    .sg-empty .btn, .sg-err .btn { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    .sg-fill, .sg-thumb, .sg-tick, .sg-thumb__halo, .sg-thumb__knob, .sg-thumb__dot, .sg-row { transition: none; }
    .sg-tick.is-pulse, .sg-out { animation: none; }
}