/* Shop concierge: HOST (line 30721). The voice bar (SCREENS-SPEC.md component 14, 161524 / 161628 / 161746), the wide layout
   (>= 768 px: the sheet becomes a panel, on the LEFT since line 30838, with the Live Human on the right), Sunny's avatar dock
   and the sprocket popover. Concatenated last (base, sheet, cards, host), so it wins ties. Flat: hairlines, never a shadow.
   Light is the reference; dark rides base.css's tokens. */

/* ---- voice bar (48 tall, sage, radius 10) ------------------------------------------------------------------------- */
.sc-voicebar {
    --sc-vb-btn: #656d5b;            /* Mute / End ink (4.8:1 on the sage) */
    --sc-vb-hover: rgba(124, 134, 101, .14);
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 3px 8px 3px 14px;       /* 48 tall for one or two lines of her words; a third line grows it */
    border: 1px solid var(--sc-sage-border);
    border-radius: 10px;
    background: var(--sc-sage);
    color: var(--sc-sage-ink);
    font: 400 14px/18px var(--sc-sans);
}
.sc-voicebar[hidden] { display: none !important; }
.sc-voicebar__wave {
    flex: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 22px;
    height: 20px;
    color: var(--sc-wave);
    opacity: .4;                      /* still and dim until she speaks or the shopper talks (162328) */
    transition: opacity 160ms ease;
}
.sc-voicebar__wave i {
    display: block;
    width: 1.75px;
    height: 12px;
    border-radius: 1px;
    background: currentColor;
    transform-origin: 50% 50%;
}
.sc-voicebar__wave i:nth-child(1) { height: 8px; }
.sc-voicebar__wave i:nth-child(2) { height: 16px; }
.sc-voicebar__wave i:nth-child(3) { height: 20px; }
.sc-voicebar__wave i:nth-child(4) { height: 12px; }
.sc-voicebar__wave i:nth-child(5) { height: 18px; }
.sc-voicebar__wave i:nth-child(6) { height: 10px; }
.sc-voicebar[data-sc-voice-state="listening"] .sc-voicebar__wave,
.sc-voicebar[data-sc-voice-state="speaking"] .sc-voicebar__wave { opacity: 1; }
.sc-voicebar[data-sc-wave="on"] .sc-voicebar__wave i { animation: sc-vb-wave 920ms ease-in-out infinite; }
.sc-voicebar[data-sc-wave="on"] .sc-voicebar__wave i:nth-child(2) { animation-delay: -140ms; }
.sc-voicebar[data-sc-wave="on"] .sc-voicebar__wave i:nth-child(3) { animation-delay: -320ms; }
.sc-voicebar[data-sc-wave="on"] .sc-voicebar__wave i:nth-child(4) { animation-delay: -520ms; }
.sc-voicebar[data-sc-wave="on"] .sc-voicebar__wave i:nth-child(5) { animation-delay: -220ms; }
.sc-voicebar[data-sc-wave="on"] .sc-voicebar__wave i:nth-child(6) { animation-delay: -440ms; }
@keyframes sc-vb-wave {
    0%, 100% { transform: scaleY(.45); }
    50% { transform: scaleY(1); }
}
/* line 31111 item 6 (tester: "Sun ny…" in French): her words wrap only between words and are never clamped; where they would not
   sit whole beside the buttons' words, voice.js fit() marks the bar tight */
.sc-voicebar__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--sc-sage-ink);    /* 4.5:1 on the sage */
    overflow-wrap: normal;
}
.sc-voicebar__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.sc-voicebar .sc-voicebar__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--sc-vb-btn);
    font: 400 14px/18px var(--sc-sans);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms ease;
}
.sc-voicebar .sc-voicebar__btn[hidden] { display: none !important; }
.sc-voicebar .sc-voicebar__btn:hover { background: var(--sc-vb-hover); }
.sc-voicebar .sc-voicebar__btn:focus-visible { outline: 2px solid var(--sc-olive); outline-offset: 1px; }
.sc-voicebar .sc-voicebar__btn[aria-pressed="true"] { color: var(--sc-ink); background: var(--sc-vb-hover); }
.sc-voicebar__end { margin-left: 2px; }   /* 20 px between Mute and End (6 + 8 + 6) */
/* line 31840: Looks beside Talk (voice.js): the word in a small pill of its own; it opens her nine-look pop-up */
.sc-voicebar .sc-voicebar__looks { padding: 0 12px; border: 1px solid currentColor; border-radius: 999px; font-weight: 600; }
.sc-voicebar__icon { display: inline-flex; width: 18px; height: 18px; }
.sc-voicebar__icon svg { display: block; width: 18px; height: 18px; }
@media (max-width: 359.98px) {
    .sc-voicebar { gap: 6px; padding-left: 10px; }
    .sc-voicebar__mute .sc-voicebar__text, .sc-voicebar__quiet .sc-voicebar__text, .sc-voicebar__end .sc-voicebar__text {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
}
/* tight (voice.js fit()), one button at a time: "quiet" Quiet Sunny goes icon-only (its speaker says it), then "end" End, then
   "mute" Mute mic, each name kept for a screen reader and a tooltip; at "wave" the wave steps aside too, and a word that still
   would not sit whole wraps rather than hides */
.sc-voicebar[data-sc-tight] { gap: 6px; }
.sc-voicebar[data-sc-tight~="quiet"] .sc-voicebar__quiet .sc-voicebar__text,
.sc-voicebar[data-sc-tight~="end"] .sc-voicebar__end .sc-voicebar__text,
.sc-voicebar[data-sc-tight~="mute"] .sc-voicebar__mute .sc-voicebar__text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sc-voicebar[data-sc-tight~="wave"] .sc-voicebar__wave { display: none; }
.sc-voicebar[data-sc-tight~="wave"] .sc-voicebar__label { overflow-wrap: break-word; }

/* ---- tablet and desktop: the sheet is a LEFT panel (line 30838: Sunny on the left, the Live Human on the right) ------ */
@media (min-width: 768px) {
    .sc-sheet {
        inset: var(--sc-panel-top, 0px) auto 0 0;
        width: 400px;
        max-width: 100%;
        height: auto;
        border-right: 1px solid var(--sc-hairline);
        transform: translateX(-100%);
    }
    .sc-sheet.sc-sheet--open { transform: none; }
    body.sc-avatar-top .sc-sheet { border-top: 1px solid var(--sc-hairline); }
    /* tablet: a light scrim over the page (the panel overlays it) */
    body.sc-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(28, 29, 22, .16);
        pointer-events: none;
    }
}
/* a 400 px tablet panel: the header's five tools sit a little closer so "Shopping as a guest" reads whole */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .sc-sheet__tools .sc-icon-btn { width: 36px; }
}
@media (min-width: 1024px) {
    .sc-sheet { width: 440px; }
    /* desktop: no scrim; the page makes room for the panel */
    body.sc-open::before { content: none; display: none; }
    body.sc-page { transition: padding-left 240ms cubic-bezier(.2, .8, .2, 1); }
    body.sc-open { padding-left: 440px; }
}
/* desktop with the panel open and only 584-839 px left for the page: fewer columns, a smaller hero line */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    body.sc-open .sc-kits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.sc-open .sc-hero__title { font-size: 56px; line-height: 62px; }
}
/* Line 31678 (test station 0166 at 1536: her panel and "Meet Sunny" both showed; law 65, one agent per page, never stacked): on a
   tablet or computer one Sunny shows. While her panel is open, or stepped down to its own "still with you" bar (container.css),
   the Meet bar's Sunny (her face and name, her live words, her gear) steps aside and the bar keeps only the Live Human on the
   right. Closed, the Meet bar is her again, with the last words of the same conversation (alive-stage.js paintWords). A phone
   keeps its bar: her open sheet covers the screen and her stepped-down bar lies over it. */
@media (min-width: 768px) {
    body.sc-open .sc-meetbar .sc-meet,
    body.sc-open .sc-meetbar .sc-meet-words,
    body.sc-open .sc-meetbar .sc-stage-gear,
    body:has(#sc-sheet.sc-sheet--open) .sc-meetbar .sc-meet,
    body:has(#sc-sheet.sc-sheet--open) .sc-meetbar .sc-meet-words,
    body:has(#sc-sheet.sc-sheet--open) .sc-meetbar .sc-stage-gear { display: none !important; }
    body.sc-open .sc-meetbar .sc-meet-human,
    body:has(#sc-sheet.sc-sheet--open) .sc-meetbar .sc-meet-human { margin-left: auto; }
}

/* ---- Sunny's avatar dock (>= 768; s/m/l = 72/96/128; avatar-dock.js sets left/top/size inline) ---------------------- */
.sc-avatar-dock {
    position: fixed;
    z-index: 61;
    display: block;
    box-sizing: border-box;
    width: 96px;
    height: 96px;
    padding: 4px;
    border: 1px solid var(--sc-hairline);
    border-radius: 50% 50% 12px 12px / 42% 42% 12px 12px;   /* the arch tile, flat */
    background: var(--sc-tile);
    color: var(--sc-ink);
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
    transition: border-color 160ms ease;
}
.sc-avatar-dock[hidden] { display: none !important; }
.sc-avatar-dock[data-sc-size="s"] { width: 72px; height: 72px; padding: 3px; }
.sc-avatar-dock[data-sc-size="l"] { width: 128px; height: 128px; padding: 5px; }
.sc-avatar-dock[data-sc-voice-state="speaking"] { border-color: var(--sc-olive); }
.sc-avatar-dock[data-sc-voice-state="listening"] { border-color: var(--sc-sage-border); }
.sc-avatar-dock > alive-agent,
.sc-avatar-dock > alive-agent[data-mode] {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    background: transparent !important;
    --alive-agent-size: 100%;
    --alive-agent-free-size: 100%;
}
.sc-avatar-dock:has(> alive-agent[data-sc-host="live"]) > alive-agent[data-sc-host="preview"] { display: none !important; }
/* line 30838: her conversation closed, her face sits in the bar's slot on the left (a round face, at every width) */
.sc-avatar-dock[data-sc-place="bar"] {
    z-index: 21;
    padding: 2px;
    border-color: rgba(246, 245, 239, .75);
    border-radius: 50%;
}
.sc-avatar-dock [data-alive-quiet-mic],
.sc-avatar-dock [data-alive-looks],
.sc-avatar-dock .ak-caption,
.sc-avatar-dock .ak-back,
.sc-avatar-dock .ak-menu-btn,
.sc-avatar-dock .ak-menu { display: none !important; }

/* ---- the sprocket popover (div.sc-settings) ---------------------------------------------------------------------- */
.sc-settings {
    position: fixed;
    z-index: 70;
    top: 72px;
    right: 16px;
    box-sizing: border-box;
    width: 248px;
    max-width: calc(100vw - 16px);
    padding: 14px 14px 16px;
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    background: var(--sc-surface);
    color: var(--sc-ink);
    font: 400 14px/20px var(--sc-sans);
}
.sc-settings[style*="left"] { right: auto; }
.sc-settings[hidden] { display: none !important; }
.sc-settings *, .sc-settings *::before, .sc-settings *::after { box-sizing: border-box; }
.sc-settings__title { margin: 0 0 6px; font: 500 20px/26px var(--sc-serif); color: var(--sc-ink-strong); }
.sc-settings__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    border-bottom: 1px solid var(--sc-hairline);
}
.sc-settings__group { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
.sc-settings__label { font: 500 13px/18px var(--sc-sans); color: var(--sc-ink); }
.sc-settings .sc-switch {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sc-settings .sc-switch::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 8px;
    width: 44px;
    height: 24px;
    border: 1px solid var(--sc-muted-2);   /* 3:1 for the control's edge */
    border-radius: 12px;
    background: var(--sc-surface-raised);
    transition: background-color 140ms ease, border-color 140ms ease;
}
.sc-switch__knob {
    position: absolute;
    left: 5px;
    top: 12px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--sc-muted-2);
    transition: transform 140ms ease, background-color 140ms ease;
}
.sc-settings .sc-switch[aria-checked="true"]::before { background: var(--sc-olive); border-color: var(--sc-olive); }
.sc-settings .sc-switch[aria-checked="true"] .sc-switch__knob { transform: translateX(20px); background: #fff; }
.sc-seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    border: 1px solid var(--sc-border-input);
    border-radius: 4px;
    overflow: hidden;
}
.sc-settings .sc-seg__btn {
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-left: 1px solid var(--sc-border-input);
    border-radius: 0;
    background: transparent;
    color: var(--sc-ink);
    font: 500 14px/20px var(--sc-sans);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sc-settings .sc-seg__btn:first-child { border-left: 0; }
.sc-settings .sc-seg__btn:hover { background: var(--sc-tile); }
.sc-settings .sc-seg__btn[aria-pressed="true"] { background: var(--sc-olive-btn); color: var(--sc-on-dark); }
.sc-settings :focus-visible { outline: 2px solid var(--sc-olive); outline-offset: 2px; }

/* ---- phones: her face only in the bar's slot (lit, line 30891: or the open sheet's head); no popover, no sprocket ------ */
@media (max-width: 767.98px) {
    .sc-avatar-dock:not([data-sc-place="bar"]):not([data-sc-place="head"]), .sc-settings { display: none !important; }
    .sc-wide-only { display: none !important; }
}

/* ---- dark ---------------------------------------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    .sc-voicebar { --sc-vb-btn: #c4cab8; --sc-vb-hover: rgba(163, 173, 138, .16); }
    body.sc-open::before { background: rgba(0, 0, 0, .32); }
    .sc-settings .sc-switch[aria-checked="true"] .sc-switch__knob { background: #f6f5ef; }
}
@media (prefers-color-scheme: dark) and (min-width: 1024px) {
    body.sc-open::before { content: none; display: none; }
}

/* ---- reduced motion: the bars stay still, nothing slides ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sc-voicebar[data-sc-wave="on"] .sc-voicebar__wave i { animation: none !important; transform: none; }
    .sc-voicebar__wave, .sc-voicebar .sc-voicebar__btn, .sc-avatar-dock, .sc-switch__knob,
    .sc-settings .sc-switch::before, body.sc-page { transition: none !important; }
}

/* ---- line 30891: Sunny's alive stage (ai.features.shop_concierge_alive_stage; alive-stage.js, avatar-dock.js) ----------- */
/* a computer, her panel open: she stands in her left container, larger, her captions under her face, her panel below */
/* line 31089 8: a tablet whose visitor picked Top gets the same container (her panel is 400 px wide there) */
@media (min-width: 768px) {
    body.sc-alive-stage::after {
        content: "";
        position: fixed;
        z-index: 59;
        top: 0;
        left: 0;
        width: 400px;
        height: var(--sc-panel-top, 0px);
        background: var(--sc-bg);
        border-right: 1px solid var(--sc-hairline);
        pointer-events: none;
    }
}
@media (min-width: 1024px) {
    body.sc-alive-stage::after { width: 440px; }
}
.sc-avatar-dock[data-sc-stage] {
    padding: 6px;
    border-radius: 50% 50% 20px 20px / 44% 44% 20px 20px;
}
/* line 31089 8b: the grip between her face and her chat (avatar-dock.js paintGrip): drag to size her stage, tap for her largest
   face or compact (her face beside her name); a tablet's and a computer's only */
.sc-stage-grip {
    position: fixed;
    z-index: 62;
    box-sizing: border-box;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.sc-stage-grip[hidden] { display: none !important; }
.sc-stage-grip::before {
    content: "";
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--sc-hairline);
    background: color-mix(in srgb, var(--sc-ink) 26%, transparent);
    transition: width 120ms ease, background-color 120ms ease;
}
.sc-stage-grip:hover::before, .sc-stage-grip:active::before { width: 56px; background: color-mix(in srgb, var(--sc-ink) 48%, transparent); }
.sc-stage-grip:focus-visible { outline: 2px solid var(--sc-olive); outline-offset: -2px; }
@media (max-width: 767.98px) { .sc-stage-grip { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sc-stage-grip::before { transition: none; } }
/* a phone, her conversation open: her face stays in sight in the sheet's head, beside her name, at its own small size */
body.sc-alive .sc-sheet__head .sc-mark[data-sc-head-slot] { width: 44px; height: 44px; border-radius: 50%; }
.sc-avatar-dock[data-sc-place="head"] {
    z-index: 61;
    padding: 2px;
    border-radius: 50%;
}
/* her captions: YOU and SUNNY while she answers; aria-hidden (the conversation stream reads every line) */
.sc-captions {
    position: fixed;
    z-index: 62;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--sc-hairline);
    border-radius: 12px;
    background: var(--sc-bg);
    color: var(--sc-ink);
    font: 400 14px/20px var(--sc-sans);
    pointer-events: none;
}
.sc-captions[hidden] { display: none !important; }
.sc-captions[data-sc-place="top"] { border: 0; padding: 0 4px; background: transparent; text-align: center; }
.sc-captions__line { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* her stage's band (CAPTION_BAND) holds three lines: the visitor's one, hers two */
.sc-captions[data-sc-place="top"] .sc-captions__line[data-who="you"] { -webkit-line-clamp: 1; line-clamp: 1; }
.sc-captions__line[hidden] { display: none; }
.sc-captions__line + .sc-captions__line { margin-top: 2px; }
.sc-captions__who {
    margin-right: 6px;
    font: 600 13px/20px var(--sc-sans);
    letter-spacing: .08em;
    color: var(--sc-olive);
}
.sc-captions__line[data-who="you"] .sc-captions__who { color: var(--sc-muted); }
.sc-captions__line[data-who="you"] .sc-captions__text { color: var(--sc-muted); }
/* line 30905: the same live words in the footer bar's empty middle (tablet and computer): Meet Sunny shrinks to its content and
   the words take the space before her gear and Live Human. Each line says who (the labels keep a column); your line keeps its
   start, and so does her line (line 31111 CHANGES 3(d): it leads with her answer, alive-stage.js answerLine, top-anchored); a phone
   never shows them */
.sc-meetbar[data-sc-words] .sc-meet { flex: 0 1 auto; }
.sc-meet-words {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    gap: 2px 6px;
    margin: 0;
    padding: 6px 16px;
    border-left: 1px solid rgba(246, 245, 239, .18);
    color: var(--sc-on-dark);
    font: 400 13px/16px var(--sc-sans);
    pointer-events: none;
}
.sc-meet-words[hidden] { display: none !important; }
/* a tablet: her open sheet covers Meet Sunny, so the words start after its edge (alive-stage.js sets the inset); its edge is the line */
.sc-meet-words[data-sc-inset] { border-left-color: transparent; padding-left: 4px; }
.sc-meet-words__line { display: contents; margin: 0; }
.sc-meet-words__line[hidden] { display: none; }
.sc-meet-words__who { font: 600 13px/16px var(--sc-sans); letter-spacing: .08em; color: var(--sc-on-dark); white-space: nowrap; }
/* Line 30980: the px clip stays as the fallback; 2lh/1lh follow the line-height so enlarged text is not cut */
.sc-meet-words__clip { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; max-height: 32px; max-height: 2lh; overflow: hidden; }
.sc-meet-words__text { display: block; flex: none; }
.sc-meet-words__line[data-who="you"] .sc-meet-words__clip { display: block; max-height: 16px; max-height: 1lh; }
.sc-meet-words__line[data-who="you"] .sc-meet-words__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sc-meet-words__line[data-who="you"] .sc-meet-words__who, .sc-meet-words__line[data-who="you"] .sc-meet-words__text { color: var(--sc-on-dark-2); }
@media (max-width: 767.98px) { .sc-meet-words { display: none !important; } }
/* her voice in the Sprocket: the NetShow proxy's voices, one pick */
.sc-settings__voices { display: block; }
.sc-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 196px; margin-top: 6px; overflow-x: hidden; overflow-y: auto; }
.sc-voice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    background: transparent;
    color: var(--sc-ink);
    text-align: left;
    cursor: pointer;
}
.sc-voice[aria-checked="true"] { border-color: var(--sc-olive); background: var(--sc-tile); }
.sc-voice:focus-visible { outline: 2px solid var(--sc-olive); outline-offset: 2px; }
.sc-voice__name { font: 500 13px/18px var(--sc-sans); }
/* Line 30980: 13 px floor; the voice line wraps to two lines at 390 px rather than cut */
.sc-voice__desc { font: 400 13px/16px var(--sc-sans); color: var(--sc-muted); white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.sc-settings__said { margin: 6px 0 0; min-height: 16px; font: 400 13px/16px var(--sc-sans); color: var(--sc-muted); }
@media (prefers-reduced-motion: reduce) {
    .sc-captions { transition: none !important; }
}

/* ---- line 30969 (shop_concierge_shows_how): set free, the Sprocket's new rows, captions off, her side window's link ------ */
.sc-avatar-dock[data-sc-glide] {
    transition: left 800ms cubic-bezier(.2, .7, .2, 1), top 800ms cubic-bezier(.2, .7, .2, 1), width 800ms ease, height 800ms ease, border-color 160ms ease;
}
.sc-settings:has(.sc-settings__more) { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
/* the Sprocket opens over her side window (the house content window's layer, 2147483001), never under it */
.sc-settings:has(.sc-settings__more):not([hidden]) { z-index: 2147483002; }
.sc-settings__more { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--sc-hairline); }
/* line 31111 item 8: under Set free, where she is now in plain words and one tap back to her panel (a phone keeps no Set free) */
.sc-settings__where { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 0 12px; border-bottom: 1px solid var(--sc-hairline); }
.sc-settings__where[hidden], .sc-settings .sc-settings__back[hidden] { display: none; }
.sc-settings__where-text { margin: 0; font: 400 13px/18px var(--sc-sans); color: var(--sc-ink); }
.sc-settings .sc-settings__back {
    min-height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--sc-border-input);
    border-radius: 4px;
    background: transparent;
    color: var(--sc-ink);
    font: 500 14px/20px var(--sc-sans);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sc-settings .sc-settings__back:hover { background: var(--sc-tile); }
@media (max-width: 767.98px) {
    .sc-settings--phone .sc-settings__where { display: none; }
}
html[data-sc-captions-off] .sc-captions,
html[data-sc-captions-off] .sc-meet-words { display: none !important; }
/* line 30991: while Clear chat asks (in her sheet, under its head), her caption band never lies over the question */
body.sc-open:has(#sc-clear:not([hidden])) .sc-captions { display: none !important; }
/* line 30992: under her sheet's head (a phone) her caption band never lies over the conversation: once she has talked, the body
   keeps the band's height free at its top (alive-stage.js --sc-cap-room); not while Clear chat asks (the band steps aside then) */
html:not([data-sc-captions-off]) body.sc-open:has(.sc-captions[data-sc-place="head"]):has(#sc-sheet [data-sc-stream]:not(:empty)):not(:has(#sc-clear:not([hidden]))) #sc-sheet .sc-sheet__body { padding-top: var(--sc-cap-room, 0px); }
[data-ns-content-window][data-sc-side] .sc-side__link { align-self: flex-start; margin: 6px 16px 12px; font: 500 14px/20px var(--sc-sans, system-ui, sans-serif); color: #1a73e8; }
/* Line 30980: a video opens under its poster and a short "Here it comes..." line (shows-how.js posterOn), gone once the player
   has loaded (8 s at most); the poster fills the window body, its line on a dark scrim in light and dark */
[data-ns-content-window][data-sc-side="video"] .ns-cw-body { position: relative; }
[data-ns-content-window] .sc-side__poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: var(--sc-forest, #26322a);
    pointer-events: none; /* a tap still reaches the player and Turn sound on */
    transition: opacity 200ms ease;
}
[data-ns-content-window] .sc-side__poster[data-sc-leaving] { opacity: 0; }
[data-ns-content-window] .sc-side__poster-img { position: absolute; inset: 0; flex: none; width: 100%; height: 100%; min-height: 0; object-fit: cover; background: transparent; }
[data-ns-content-window] .sc-side__poster-line {
    position: relative;
    margin: 0;
    padding: 12px 16px;
    background: rgba(20, 20, 14, .72);
    color: var(--sc-on-dark, #f6f5ef);
    font: 500 15px/20px var(--sc-sans, system-ui, sans-serif);
}
@media (prefers-reduced-motion: reduce) {
    [data-ns-content-window] .sc-side__poster { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sc-avatar-dock[data-sc-glide] { transition: none; }
}