/* ── the template window ─────────────────────────────────────────────────
 *
 * Meta's "Create template" in the campaign window's frame (templates/
 * sections/window): the steps, the category and its type, the boxes of the
 * edit step as Meta groups them, the buttons, and Meta's "Template preview"
 * beside it all. The steps, the option cards and the chat bubble are the
 * campaign window's own (campaigns.css); what is here is only what a
 * template adds.
 *
 * Its own file for the reason the others have theirs: every name here
 * starts xc-tw.
 */

/* ── set up template ────────────────────────────────────────────────────── */

.xc-tw__cats span { font-weight: 500; }

/* The one type under a category: chosen already, as Meta shows it. */
.xc-tw__type {
    cursor: default;
    border-color: var(--acc);
    background: rgba(28, 28, 210, .045);
}

.xc-tw__type:hover { border-color: var(--acc); }

.xc-tw__type .xc-cmp__tick {
    opacity: 1;
    transform: none;
}

.xc-tw__type .xc-cmp__optname { white-space: normal; }

/* Meta's other types, not yet here: there, readable, and not choosable. */
.xc-tw__type--off,
.xc-tw__type--off:hover {
    cursor: not-allowed;
    border-color: var(--line);
    background: rgba(var(--ink), .02);
    box-shadow: none;
}

.xc-tw__type--off .xc-cmp__mark,
.xc-tw__type--off .xc-cmp__optname,
.xc-tw__type--off .xc-cmp__optsub { opacity: .5; }

.xc-tw__soon {
    margin-block-start: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(var(--ink), .62);
    text-wrap: pretty;
}

/* ── edit template ──────────────────────────────────────────────────────── */

/* What was set up, at the top of the page, as Meta heads it. */
.xc-tw__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.xc-tw__cardwords {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xc-tw__cardname,
.xc-tw__cardsub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.xc-tw__cardname {
    font-size: 14.5px;
    font-weight: 600;
}

.xc-tw__cardname > span:first-child {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

.xc-tw__cardsub {
    font-size: 12.5px;
    color: rgba(var(--ink), .55);
}

/* One of Meta's boxes: a heading, a line under it, and its fields. */
.xc-tw__box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.xc-tw__stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.xc-tw__h {
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.xc-tw__p {
    margin: -8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(var(--ink), .55);
    text-wrap: pretty;
}

.xc-tw__pair {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.xc-tw__mono { font-family: 'JetBrains Mono', monospace; font-size: 13px; }

.xc-tw__narrow { max-inline-size: 260px; }

/* The media sample's choices, each with its glyph beside the word. */
.xc-tw__media span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.xc-tw__media svg { flex: none; }

.xc-tw__body {
    min-block-size: 132px;
    line-height: 1.55;
    resize: vertical;
}

/* The file already kept, and the box for another. */
.xc-tw__file { gap: 10px; }

.xc-tw__drop-old {
    margin-inline-start: auto;
    cursor: pointer;
    font-size: 12.5px;
}

.xc-tw__drop-old input {
    inline-size: 14px;
    block-size: 14px;
    accent-color: #d64545;
}

/* ── the marks and the variables ────────────────────────────────────────── */

.xc-tw__tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-start: 2px;
}

.xc-tw__toolgap { flex: 1; }

.xc-tw__tool {
    appearance: none;
    inline-size: 32px;
    block-size: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: rgba(var(--ink), .72);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.xc-tw__tool:hover { background: rgba(var(--ink), .05); color: var(--text); }
.xc-tw__tool:focus-visible { outline: 2px solid var(--peri); outline-offset: 2px; }

.xc-tw__tool--bold { font-weight: 700; }
.xc-tw__tool--italic { font-style: italic; font-family: Georgia, serif; }
.xc-tw__tool--strike { text-decoration: line-through; }
.xc-tw__tool--mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }

.xc-tw__vars,
.xc-tw__addbtn {
    position: relative;
}

.xc-tw__add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 9px;
    color: var(--acc);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.xc-tw__add::-webkit-details-marker,
.xc-tw__addbtn > summary::-webkit-details-marker { display: none; }

.xc-tw__addbtn > summary { list-style: none; cursor: pointer; }

.xc-tw__add:hover { background: rgba(28, 28, 210, .06); }
.xc-tw__add:focus-visible { outline: 2px solid var(--peri); outline-offset: 2px; }

/* The header's one variable is there: its + rests. */
.xc-tw__vars[data-full] > .xc-tw__add,
.xc-tw__addbtn[data-full] > summary {
    opacity: .4;
    cursor: not-allowed;
}

.xc-tw__menu {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 5;
    inline-size: min(300px, 86vw);
    max-block-size: 290px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}

/* At the start of their row — the header's "+ Add variable", "Add button" —
   the list opens inward from that side rather than off the edge. */
.xc-tw__addbtn .xc-tw__menu,
.xc-tw__vars[data-tw-one] .xc-tw__menu { inset-inline: 0 auto; }

.xc-tw__menuhead {
    padding: 6px 8px 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(var(--ink), .6);
}

.xc-tw__menusub {
    padding: 0 8px 4px;
    font-size: 11.5px;
    color: rgba(var(--ink), .45);
    text-wrap: pretty;
}

.xc-tw__pick {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    text-align: start;
    cursor: pointer;
}

.xc-tw__pick:hover:not(:disabled) { background: rgba(var(--ink), .05); }
.xc-tw__pick:disabled { opacity: .4; cursor: not-allowed; }
.xc-tw__pick .xc-tw__menusub { padding: 0; }

/* A kind of button, with its glyph, as Meta's menu lists them. */
.xc-tw__pick--mark {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.xc-tw__pickmark {
    flex: none;
    margin-block-start: 1px;
    color: rgba(var(--ink), .62);
}

.xc-tw__pickwords {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.xc-tw__token {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--peri);
    unicode-bidi: plaintext;
}

/* ── a sample per variable ──────────────────────────────────────────────── */

.xc-tw__samples {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(var(--ink), .035);
}

.xc-tw__sample { gap: 5px; }

/* ── the buttons ────────────────────────────────────────────────────────── */

.xc-tw__btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.xc-tw__addbtn { align-self: flex-start; }

.xc-tw__blist {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xc-tw__blist:empty { display: none; }

.xc-tw__bgroup {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xc-tw__bhead {
    font-size: 13.5px;
    font-weight: 600;
}

.xc-tw__bsub {
    margin-block-start: -5px;
    font-size: 12.5px;
    color: rgba(var(--ink), .52);
}

.xc-tw__brow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(var(--ink), .02);
}

.xc-tw__bfields {
    flex: 1;
    min-inline-size: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.xc-tw__bfields > .xc-f__err { grid-column: 1 / -1; }

/* A value the row cannot change: Custom, or Meta's words on an offer code. */
.xc-tw__fixed {
    display: flex;
    align-items: center;
    background: rgba(var(--ink), .04);
    color: rgba(var(--ink), .7);
    cursor: default;
}

.xc-tw__url {
    display: flex;
    align-items: center;
    gap: 6px;
}

.xc-tw__url > .xc-field { flex: 1; min-inline-size: 0; }

.xc-tw__phone {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(110px, 140px) minmax(0, 1fr);
    gap: 10px;
}

.xc-tw__bin {
    appearance: none;
    flex: none;
    inline-size: 32px;
    block-size: 32px;
    margin-block-start: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(var(--ink), .45);
    cursor: pointer;
}

.xc-tw__bin:hover { background: rgba(214, 69, 69, .08); color: #d64545; }
.xc-tw__bin:focus-visible { outline: 2px solid var(--peri); outline-offset: 2px; }

/* ── authentication ─────────────────────────────────────────────────────── */

.xc-tw__check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    cursor: pointer;
}

.xc-tw__check input {
    inline-size: 16px;
    block-size: 16px;
    flex: none;
    accent-color: rgb(var(--brand));
}

/* ── beside the steps: Meta's "Template preview" ───────────────────────── */

.xc-tw__aside,
.xc-tw__about {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* The example's picture: a picture's place, not somebody's photograph. */
.xc-tw__egmedia {
    min-block-size: 96px;
    background: linear-gradient(135deg, #E9D8F7, #D6E4FB);
    color: rgba(91, 51, 150, .6);
}

.xc-tw__fit {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.xc-tw__fit dt {
    font-size: 12.5px;
    font-weight: 600;
}

.xc-tw__fit dd {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(var(--ink), .58);
    text-wrap: pretty;
}

.xc-tw__pbtns {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.xc-tw__pbtns:empty { display: none; }

/* A video's or a document's name, under its kind. */
.xc-tw__filename {
    position: relative;
    max-inline-size: 90%;
    margin-block-start: 4px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.xc-cmp__media:has(.xc-tw__filename:not([hidden])) { flex-direction: column; }

/* WhatsApp's marks, drawn. */
.xc-cmp__words code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

/* ── the list: a card per template, like Workflows (sections/list) ──────── */

.xc-tl__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
    align-content: start;
}

.xc-tl__card {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}

.xc-tl__card:hover {
    border-color: rgba(var(--ink), .18);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .06);
    transform: translateY(-1px);
}

/* The picture: the template on WhatsApp's wallpaper, in the card's colour.
   Light whatever the theme — it is a chat on somebody's phone. */
.xc-tl__art {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-block-size: 148px;
    padding: 34px 14px 14px;
    box-sizing: border-box;
    background:
        linear-gradient(160deg, rgba(var(--tint), .26), rgba(var(--tint), .1)),
        #F3EEE6 url('../img/whatsapp-paper.svg') repeat;
    background-size: auto, 170px;
    color: #111B21;
    text-decoration: none;
}

.xc-tl__bubble {
    position: relative;
    max-inline-size: 90%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 9px;
    border-radius: 0 10px 10px 10px;
    background: #fff;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

[dir="rtl"] .xc-tl__bubble { border-radius: 10px 0 10px 10px; }

.xc-tl__bubble::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -7px;
    inline-size: 7px;
    block-size: 12px;
    background: #fff;
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

[dir="rtl"] .xc-tl__bubble::before { clip-path: polygon(0 0, 0 100%, 100% 0); }

.xc-tl__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 150px;
    block-size: 54px;
    border-radius: 6px;
    background: rgba(var(--tint), .16);
    color: rgb(var(--tint));
}

.xc-tl__head {
    font-size: 12.5px;
    unicode-bidi: plaintext;
}

.xc-tl__words {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.45;
    white-space: pre-line;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
}

.xc-tl__words code { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }

.xc-tl__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-inline-size: 90%;
}

.xc-tl__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 8px;
    background: #fff;
    color: #0A7CBF;
    font-size: 11.5px;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
    unicode-bidi: plaintext;
}

/* Its status, on the picture where the eye lands first. */
.xc-tl__state {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    padding: 3px 9px;
    border-radius: 20px;
    background: #fff;
    color: rgb(var(--state));
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .11em;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}

.xc-tl__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
}

.xc-tl__name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
    color: var(--text);
    text-decoration: none;
}

.xc-tl__name strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xc-tl__name > span {
    font-size: 12px;
    color: rgba(var(--ink), .45);
}

.xc-tl__foot {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-block-start: auto;
}

@media (prefers-reduced-motion: reduce) {
    .xc-tl__card { transition: none; }
    .xc-tl__card:hover { transform: none; }
}

/* ── a phone, with WhatsApp open on it (components/wa-phone) ────────────── */

/* Light whatever the theme: it is somebody's phone. A phone's width, not the
   panel's — centred in it, with a phone's proportions. */
.xc-waphone {
    inline-size: 100%;
    max-inline-size: 248px;
    margin-inline: auto;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 32px;
    background: #1D2024;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .12), inset 0 0 0 1.5px #3A3F45;
    color: #111B21;
}

.xc-waphone__screen {
    display: flex;
    flex-direction: column;
    min-block-size: 470px;
    border-radius: 26px;
    overflow: hidden;
    background: #EFEAE2;
}

.xc-waphone__status {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 16px 3px;
    background: #017561;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.xc-waphone__cam {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-start: calc(50% - 5px);
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: #0B0C0E;
}

.xc-waphone__sys {
    display: flex;
    align-items: center;
    gap: 4px;
}

.xc-waphone__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px 8px 6px;
    background: #008069;
    color: #fff;
}

[dir="rtl"] .xc-waphone__back { transform: scaleX(-1); }

.xc-waphone__bar svg { flex: none; }

.xc-waphone__face {
    inline-size: 30px;
    block-size: 30px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #DFE5E7;
    color: #54656F;
    font-size: 13px;
    font-weight: 600;
}

.xc-waphone__who {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.xc-waphone__name {
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.xc-waphone__sub {
    font-size: 10.5px;
    opacity: .82;
}

.xc-waphone__acts {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-inline-end: 2px;
}

.xc-waphone__chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 8px 12px;
    background: #EFEAE2 url('../img/whatsapp-paper.svg') repeat;
    background-size: 190px;
}

.xc-waphone__day {
    align-self: center;
    padding: 3px 9px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .94);
    color: #54656F;
    font-size: 10px;
    letter-spacing: .03em;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

/* What WhatsApp says at the top of every chat with a business. */
.xc-waphone__note {
    align-self: center;
    max-inline-size: 92%;
    padding: 5px 9px;
    border-radius: 7px;
    background: #FFEECD;
    color: #54656F;
    font-size: 10.5px;
    line-height: 1.4;
    text-align: center;
    text-wrap: pretty;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

.xc-waphone__compose {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 6px 10px;
    background: #EFEAE2;
}

.xc-waphone__field {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 22px;
    background: #fff;
    color: #8696A0;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

.xc-waphone__hint {
    flex: 1;
    min-inline-size: 0;
    font-size: 12.5px;
}

.xc-waphone__field svg { flex: none; }

.xc-waphone__mic {
    inline-size: 38px;
    block-size: 38px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00A884;
    color: #fff;
}

/* ── submit for review: the checks, what happens next ──────────────────── */

.xc-tw__checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xc-tw__checkrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 13.5px;
}

.xc-tw__checkmark {
    inline-size: 24px;
    block-size: 24px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 168, 134, .14);
    color: var(--green);
}

.xc-tw__checkrow[data-state="todo"] .xc-tw__checkmark {
    background: rgba(232, 163, 61, .16);
    color: var(--amber);
}

.xc-tw__checkwords {
    flex: 1;
    min-inline-size: 0;
}

.xc-tw__checkrow[data-state="todo"] .xc-tw__checkwords { font-weight: 600; }

/* Each row carries both of its sayings; its state shows one. */
.xc-tw__checkrow[data-state="ok"] .xc-tw__checktodo,
.xc-tw__checkrow[data-state="todo"] .xc-tw__checkok { display: none; }

.xc-tw__after {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: after;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.xc-tw__after li {
    counter-increment: after;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.2px;
    line-height: 1.5;
    color: rgba(var(--ink), .7);
    text-wrap: pretty;
}

.xc-tw__after li::before {
    content: counter(after);
    inline-size: 22px;
    block-size: 22px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(91, 91, 240, .12);
    color: var(--peri);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

/* What just became of it, in the dialog that shows it. */
.xc-tw__done {
    margin: 0;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(0, 168, 134, .1);
    color: var(--green);
    font-size: 13px;
}

/* ── a saved template, looked at (sections/view) ────────────────────────── */

.xc-tw__facts {
    margin: 0;
    gap: 0;
    padding-block: 4px;
}

.xc-tw__facts > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-block-end: 1px solid var(--line);
    font-size: 13.5px;
}

.xc-tw__facts > div:last-child { border-block-end: 0; }

.xc-tw__facts dt { color: rgba(var(--ink), .5); }

.xc-tw__facts dd {
    margin: 0;
    unicode-bidi: plaintext;
}

/* Meta's reason, word for word. */
.xc-tw__refused {
    margin: 0;
    padding: 10px 12px;
    border-radius: 11px;
    background: rgba(214, 69, 69, .08);
    border: 1px solid rgba(214, 69, 69, .22);
    color: #b83636;
    font-size: 12.5px;
    line-height: 1.5;
    text-wrap: pretty;
}

.xc-tw__costs { margin: 0; }

/* ── a video in the message ────────────────────────────────────────────── */

.xc-cmp__media:has(> .xc-tw__video:not([hidden])) { min-block-size: 150px; }

.xc-tw__video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    background: #000;
}

/* The glyph and the word give way to the video itself. */
.xc-cmp__media:has(> .xc-tw__video:not([hidden])) > .xc-cmp__mediakind { visibility: hidden; }

.xc-tw__play {
    appearance: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: auto;
    inline-size: 46px;
    block-size: 46px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 20, 26, .5);
    color: #fff;
    cursor: pointer;
}

.xc-tw__play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.xc-tw__vlen {
    position: absolute;
    inset-inline-start: 8px;
    inset-block-end: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    font-variant-numeric: tabular-nums;
}

/* ── narrow ─────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /* Three tabs across a phone: "Authentication" has to fit its pill. */
    .xc-tw__cats span { padding-inline: 6px; font-size: 13px; }

    .xc-tw__pair { grid-template-columns: 1fr; }
    .xc-tw__narrow { max-inline-size: none; }
    .xc-tw__box { padding: 14px 12px; }
    .xc-tw__phone { grid-template-columns: minmax(96px, 120px) minmax(0, 1fr); }
    .xc-tw__brow { padding: 10px; }
}

/* The footer on a phone, where its buttons are full width: Submit for
   review takes a row of its own, the others share the one above. */
@media (max-width: 820px) {
    .xc-sheet__foot:has(> [data-tw-discard]) { flex-wrap: wrap; }

    .xc-sheet__foot:has(> [data-tw-discard]) > button {
        padding-inline: 10px;
        white-space: nowrap;
    }

    .xc-sheet__foot:has(> [data-tw-discard]) > [data-wizard-done] {
        flex-basis: 100%;
        order: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .xc-tw__tool { transition: none; }
}