/* Shop concierge: the sheet (SHEET builder). Mobile styles only; host.css owns >= 768 px, cards.css owns .sc-card*,
   host.css owns .sc-voicebar*. Sizes are CSS px at a 393 px phone (SCREENS-SPEC.md). Flat: hairlines, no shadows.
   Text shades that the reference draws below 4.5:1 are nudged darker (--sc-sh-*) so every line of text passes. */

.sc-sheet {
    --sc-sh-muted: #72716a;          /* welcome body, "Shopping as" (ref #7b7a74 / #767671) */
    --sc-sh-meta: #74726b;           /* eyebrow, SUNNY label, thinking, fold, AI line (ref #87857e..#939289) */
    --sc-sh-icon: #1d1f18;           /* header icons */
    --sc-sh-arrow: #373531;          /* suggestion arrows */
    --sc-sh-suggest-border: #e8e6e2;
    --sc-sh-suggest-active: #f5f3ee;
    --sc-sh-arch: #dedcd3;           /* welcome arch outline */
    --sc-sh-label-tile: #e2e1dd;     /* tiny label tile border */
    --sc-sh-dock-line: #f0efea;      /* hairline above the dock */
    --sc-sh-fold-line: #ebe9e7;
    --sc-sh-dots: #767470;
    --sc-sh-chip-ink: #181a0c;
    --sc-sh-chip-hint: #66675a;      /* ref #8e907f on the chip */
    --sc-sh-chip-x: #232617;
    --sc-sh-photo: #7d7e72;          /* photo-add glyph (ref #9a9b8e) */
    --sc-sh-placeholder: #74756c;    /* ref #898a83 */
    --sc-sh-input-ink: #17150f;
    --sc-sh-focus: var(--sc-olive);

    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--sc-bg);
    color: var(--sc-ink);
    font-family: var(--sc-sans);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    overscroll-behavior: contain;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
    outline: none;
}
.sc-sheet[hidden] { display: none !important; }
.sc-sheet.sc-sheet--open { transform: none; }
.sc-sheet *, .sc-sheet *::before, .sc-sheet *::after { box-sizing: border-box; }
.sc-sheet [hidden] { display: none !important; }
/* :where() keeps this reset at element weight, so every .sc-btn colour and type wins over it */
:where(.sc-sheet) button { font: inherit; color: inherit; }
.sc-sheet :focus-visible { outline: 2px solid var(--sc-sh-focus); outline-offset: 2px; }

html.sc-scroll-locked, html.sc-scroll-locked body { overflow: hidden; overscroll-behavior: none; }

/* ---- header (66) ------------------------------------------------------------------------------------------- */
.sc-sheet__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 66px;
    padding: 0 6px 0 12px;
    border-bottom: 1px solid var(--sc-hairline);
    background: var(--sc-bg);
}
.sc-sheet__head .sc-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 40px;
    border-radius: 18px 18px 2px 2px;
    background: var(--sc-tile);
    color: var(--sc-sparkle);
}
.sc-sheet__head .sc-mark svg { width: 22px; height: 22px; }
.sc-sheet__who { flex: 1 1 auto; min-width: 0; }
.sc-sheet__name {
    margin: 0;
    font-family: var(--sc-serif);
    font-size: 32px;
    line-height: 1;
    font-weight: 500;
    color: var(--sc-ink-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-sheet__as {
    /* block, not flex: a flex row's bare text never takes text-overflow, so a long line was cut with no ellipsis */
    display: block;
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 16px;
    color: var(--sc-sh-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-sheet__as::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px 2px 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}
.sc-sheet__tools { flex: 0 0 auto; display: flex; align-items: center; }
.sc-icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--sc-sh-icon);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sc-sheet .sc-icon-btn { color: var(--sc-sh-icon); }
.sc-icon-btn:active { background: var(--sc-tile); }
.sc-badge {
    position: absolute;
    top: 5px;
    right: 4px;
    min-width: 18px;
    min-height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--sc-olive);
    color: #fff;
    /* Line 30980: 13 px type floor; the badge grows to hold it */
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

/* ---- scroll body --------------------------------------------------------------------------------------------- */
.sc-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---- welcome --------------------------------------------------------------------------------------------------- */
.sc-welcome { padding: 32px 20px 24px; }
.sc-welcome .sc-mark--lg {
    display: grid;
    place-items: center;
    width: 34px;
    height: 32px;
    border: 1px solid var(--sc-sh-arch);
    border-radius: 17px 17px 2px 2px;
    color: var(--sc-sparkle);
}
.sc-welcome .sc-mark--lg svg { width: 20px; height: 20px; }
.sc-welcome .sc-eyebrow {
    margin: 20px 0 0;
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sc-sh-meta);
}
.sc-welcome__title {
    margin: 14px 0 0;
    max-width: 22ch;
    font-family: var(--sc-serif);
    font-size: 28px;
    line-height: 32px;
    font-weight: 400;
    color: var(--sc-ink);
    text-wrap: balance;
}
.sc-welcome__hello {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 25px;
    color: var(--sc-sh-muted);
}
.sc-suggest { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.sc-suggest__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid var(--sc-sh-suggest-border);
    border-radius: 3px;
    background: var(--sc-suggest-bg);
    font-size: 14px;
    line-height: 20px;
    color: var(--sc-ink);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sc-sheet .sc-suggest__row { color: var(--sc-ink); }
.sc-suggest__row span { min-width: 0; overflow-wrap: anywhere; }
.sc-suggest__row svg { flex: 0 0 auto; width: 12px; height: 12px; color: var(--sc-sh-arrow); }
.sc-suggest__row:active, .sc-suggest__row:hover { background: var(--sc-sh-suggest-active); }

/* ---- stream ----------------------------------------------------------------------------------------------------- */
.sc-stream { display: flex; flex-direction: column; gap: 20px; padding: 20px 12px 24px; }
.sc-stream:empty { display: none; }
.sc-turn { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sc-msg { min-width: 0; }
.sc-msg p { margin: 0; }
.sc-msg--user {
    align-self: flex-end;
    max-width: 88%;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--sc-bubble);
    color: var(--sc-ink);
    font-size: 16px;
    line-height: 24px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.sc-msg--user + .sc-msg { margin-top: 4px; }
.sc-msg__photo { display: block; }
.sc-msg__photo img {
    display: block;
    width: auto;
    max-width: min(200px, 100%);
    max-height: 200px;
    border-radius: 8px;
    object-fit: cover;
}
.sc-msg__photo + p { margin-top: 10px; }
.sc-msg--agent { align-self: stretch; color: var(--sc-ink); }
.sc-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sc-sh-meta);
}
.sc-msg p.sc-label { margin: 0 0 8px; }
.sc-label__mark {
    display: grid;
    place-items: center;
    width: 12px;
    height: 12px;
    border: 1px solid var(--sc-sh-label-tile);
    border-radius: 2px;
    color: var(--sc-sparkle);
}
.sc-label__mark svg { width: 8px; height: 8px; }
.sc-text { font-size: 16px; line-height: 24px; color: var(--sc-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-text p + p { margin-top: 12px; }
/* Line 30811: her formatting (public/js/chat/rich-text.js) reads like her words: bold, a short list, a small table. */
.sc-text--rich { white-space: normal; }
.sc-msg .sc-text--rich > * + * { margin: 12px 0 0; }
.sc-text--rich ul, .sc-text--rich ol { padding-left: 22px; }
.sc-text--rich li + li { margin-top: 4px; }
.sc-text--rich strong { font-weight: 600; }
.sc-text--rich table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.sc-text--rich th, .sc-text--rich td { padding: 6px 12px 6px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sc-sh-fold-line); }
.sc-text--rich th { font-weight: 600; }
.sc-text--rich code { font: 14px/20px ui-monospace, SFMono-Regular, Menlo, monospace; }
.sc-msg--card { margin-top: 4px; }

/* thinking line */
.sc-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    font-size: 13px;
    line-height: 16px;
    color: var(--sc-sh-meta);
}
.sc-dots { display: inline-flex; align-items: center; gap: 3px; }
.sc-dots i {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--sc-sh-dots);
    animation: sc-dot 1.2s ease-in-out infinite;
}
.sc-dots i:nth-child(2) { animation-delay: .2s; }
.sc-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes sc-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* line 31033 (CHANGES 6): a turn that failed or ran out of time says so in one plain line, with one tap to send it again */
.sc-retry-row { display: flex; margin-top: -8px; }
.sc-retry {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--sc-border);
    border-radius: 22px;
    background: var(--sc-bg);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    cursor: pointer;
}
.sc-sheet .sc-retry { color: var(--sc-ink); }
.sc-retry:hover { background: var(--sc-sh-suggest-active); }

/* earlier-conversation fold */
.sc-earlier { border-bottom: 1px solid var(--sc-sh-fold-line); }
.sc-stream > .sc-earlier:first-child { margin-top: -12px; }
.sc-earlier__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    font-size: 13px;
    line-height: 16px;
    color: var(--sc-sh-meta);
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sc-earlier__summary::-webkit-details-marker { display: none; }
.sc-earlier__summary::marker { content: ""; }
.sc-earlier__icon, .sc-earlier__chevron { display: inline-grid; place-items: center; }
.sc-earlier__icon svg { width: 13px; height: 13px; }
.sc-earlier__chevron svg { width: 10px; height: 10px; transition: transform 160ms ease; }
.sc-earlier[open] .sc-earlier__chevron svg { transform: rotate(180deg); }
.sc-earlier__turns { display: flex; flex-direction: column; gap: 20px; padding: 8px 0 20px; }
/* line 31111 CHANGES 2(b): under an earlier conversation folded at open, one quiet way to forget it */
.sc-fresh { display: flex; justify-content: center; margin: 0; }
.sc-fresh__btn {
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--sc-sh-meta);
    font-size: 13px;
    line-height: 16px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sc-fresh__btn:hover { color: var(--sc-ink); }

/* ---- foot (dock) ----------------------------------------------------------------------------------------------- */
.sc-sheet__foot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 7px calc(4px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--sc-sh-dock-line);
    background: var(--sc-bg);
}

/* attachment chip */
.sc-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 8px 4px 8px 12px;
    border-radius: 4px;
    background: var(--sc-chip);
}
.sc-chip__thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 36px;
    border-radius: 2px;
    object-fit: contain;
    background: var(--sc-tile);
}
.sc-chip__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-chip__name {
    font-size: 14px;
    line-height: 18px;
    color: var(--sc-sh-chip-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-chip__hint { font-size: 13px; line-height: 16px; color: var(--sc-sh-chip-hint); }
.sc-chip__remove {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}
.sc-sheet .sc-chip__remove { color: var(--sc-sh-chip-x); }

/* composer */
.sc-composer {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 54px;
    margin: 0;
    padding: 6px 6px 6px 4px;
    border: 1px solid var(--sc-border-input);
    border-radius: 10px;
    background: var(--sc-surface-raised);
}
.sc-composer:focus-within { border-color: var(--sc-sage-ink); }
.sc-composer__photo {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    color: var(--sc-sh-photo);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sc-composer__photo:active { background: var(--sc-tile); }
.sc-composer__photo svg { width: 22px; height: 22px; }
.sc-composer__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    max-height: 88px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--sc-sh-input-ink);
    font-family: var(--sc-sans);
    font-size: 16px;               /* 16 keeps iOS from zooming the page on focus (ref 14) */
    line-height: 22px;
    resize: none;
    overflow-y: hidden;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
.sc-sheet .sc-composer__input:focus-visible { outline: none; }
.sc-composer__input::placeholder { color: var(--sc-sh-placeholder); opacity: 1; }
.sc-send {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--sc-olive);
    cursor: pointer;
    transition: background-color 120ms ease;
}
.sc-sheet .sc-send { color: #fff; }
.sc-sheet .sc-send:disabled { background: var(--sc-send-off); color: var(--sc-send-off-ink); cursor: default; }
.sc-send svg { width: 16px; height: 16px; }

.sc-ai-line {
    margin: 0;
    padding: 0 8px;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: var(--sc-sh-meta);
}
/* line 30838: a person is one tap away from her conversation's last line too */
.sc-sheet .sc-ai-line__human {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 0 0 0 4px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--sc-ink);
    font-size: 13px;
    line-height: 16px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* ---- line 30838: "Welcome back" where she left off; the phone sheet stepping aside while she shows the page ---------- */
.sc-back {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 20px 6px;
    font-size: 13px;
    line-height: 16px;
    color: var(--sc-sh-meta);
}
.sc-back::before, .sc-back::after { content: ""; flex: 1 1 0; height: 1px; background: var(--sc-sh-fold-line); }
.sc-unpeek {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    border: 0;
    background: var(--sc-forest);
    color: var(--sc-on-dark);
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.sc-unpeek__text { min-width: 0; font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-unpeek__go {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(246, 245, 239, .6);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}
/* line 31033 (CHANGES 7): stepping aside never moves her chat box: the sheet sits at the bottom as the "Back to Sunny" bar
   over the same composer (the finger and the keyboard stay), and only the conversation steps aside until the bar or the
   visitor's own next words bring it back */
.sc-sheet.sc-sheet--open.sc-sheet--peek { top: auto; height: auto; padding-top: 0; transform: none; }
.sc-sheet--peek .sc-sheet__head, .sc-sheet--peek .sc-clear { display: none; }
.sc-sheet--peek .sc-sheet__body { display: none; }
.sc-sheet--peek .sc-unpeek { min-height: 56px; padding-bottom: 8px; }
/* line 31033 (class 1): her answer of this turn stays in sight between the bar and her chat box while she shows the store */
.sc-peek-said { display: none; }
.sc-sheet--peek .sc-peek-said:not([hidden]) { display: block; flex: 0 1 auto; max-height: 34vh; overflow-y: auto; overscroll-behavior: contain; padding: 12px 20px 4px; }
.sc-peek-said .sc-text { font-size: 15px; line-height: 22px; }
/* and her stage's caption band (alive-stage.js) never lies over the card she shows then: her words are in sight below it */
body.sc-open:has(#sc-sheet.sc-sheet--peek [data-sc-peek-said]:not([hidden])) .sc-captions { display: none !important; }

/* ---- line 30906: Clear chat's one question (shop_concierge_remembers), the welcome back line, hold to talk ----------- */
.sc-clear {
    flex: 0 0 auto;
    padding: 14px 16px 16px;
    border-bottom: 1px solid var(--sc-hairline);
    background: var(--sc-tile);
}
.sc-clear__ask { margin: 0; font-size: 15px; line-height: 22px; color: var(--sc-ink); }
.sc-clear__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.sc-clear__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--sc-border);
    border-radius: 4px;
    background: var(--sc-bg);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    cursor: pointer;
}
.sc-sheet .sc-clear__btn { color: var(--sc-ink); }
.sc-sheet .sc-clear__btn--yes { border-color: var(--sc-olive-btn); background: var(--sc-olive-btn); color: var(--sc-on-dark); }
.sc-sheet .sc-clear__btn--yes:hover { background: var(--sc-forest); }
.sc-welcome__back { margin: 10px 0 0; font-size: 15px; line-height: 22px; color: var(--sc-ink); }
.sc-hold-slot { flex: 0 0 auto; padding: 0 16px 8px; }
.sc-hold-slot:empty,
.sc-sheet:not([data-sc-voice-state="listening"]):not([data-sc-voice-state="speaking"]):not([data-sc-voice-state="muted"]) .sc-hold-slot { display: none; }
.sc-hold {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: 26px;
    background: var(--sc-olive-btn);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.sc-sheet .sc-hold { color: var(--sc-on-dark); }
.sc-hold[aria-pressed="true"] { background: var(--sc-forest); outline: 4px solid var(--sc-sh-suggest-border); outline-offset: 0; }

/* ---- phone-only bits -------------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .sc-wide-only { display: none !important; }
}
@media (max-width: 359.98px) {
    .sc-sheet__head { padding-left: 8px; gap: 6px; }
    .sc-sheet__name { font-size: 28px; }
    .sc-welcome { padding-left: 16px; padding-right: 16px; }
}

/* ---- dark --------------------------------------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    .sc-sheet {
        --sc-sh-muted: #b4b1a6;
        --sc-sh-meta: #a9a79c;
        --sc-sh-icon: #ece9df;
        --sc-sh-arrow: #d6d3c8;
        --sc-sh-suggest-border: #3a3d30;
        --sc-sh-suggest-active: #2a2d22;
        --sc-sh-arch: #4a4d40;
        --sc-sh-label-tile: #45483b;
        --sc-sh-dock-line: #2c2f25;
        --sc-sh-fold-line: #33362b;
        --sc-sh-dots: #a9a79c;
        --sc-sh-chip-ink: #ece9df;
        --sc-sh-chip-hint: #b8b5aa;
        --sc-sh-chip-x: #ece9df;
        --sc-sh-photo: #a9aa9c;
        --sc-sh-placeholder: #9d9b90;
        --sc-sh-input-ink: #f2efe6;
        --sc-sh-focus: #b9c79c;
    }
}

/* ---- reduced motion --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sc-sheet { transition: none; }
    .sc-dots i { animation: none; opacity: .7; }
    .sc-earlier__chevron svg, .sc-send { transition: none; }
}

/* line 31361: her tools are running ("Looking that up", beside her dots) and the one divider line after a language switch */
.sc-thinking__say { color: var(--sc-sh-meta); }
.sc-turn--lang { margin: 4px 0; }
.sc-langline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    color: var(--sc-sh-meta);
}
.sc-langline::before,
.sc-langline::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: currentColor;
    opacity: .3;
}