/*
 * The console's plans and prices (screens/admin/pricing): two doors, the
 * plans as cards, a sheet for each, the AI prices, the review and every
 * version.
 *
 * Its own file for the reason the others are: shell.css is long enough that
 * a new class name in it is a collision waiting to happen. Everything here
 * is `xc-pc`.
 *
 * The brand's colours: Infinity Blue, Ink, White and Graphite; Periwinkle
 * for accents on dark, Blue 50 for tints on light. The Conversion Gradient
 * is the page's one accent, the rule over the list in force, and never sits
 * under words. The website's highlighted plan is drawn as the website draws
 * it: Ink. Green, amber and red say what they say everywhere on the
 * console: live or saved, waiting or a warning, wrong.
 *
 * A plan's own colour (Tier::COLORS, from the same family) arrives as
 * `--tint`, an "r,g,b" triple: a rule, a dot, never a ground under its
 * words.
 *
 * The accent is the console's own --brand (tokens.css): Infinity Blue on
 * light, Periwinkle on dark, and its wash the brand at eight per cent.
 * Green and amber are the console's --green and --amber, as triples.
 */

.xc-pc {
    --pc-accent: var(--brand);
    --pc-wash: rgba(var(--brand), .08);
    --pc-wash-2: rgba(var(--brand), .14);
    --pc-ink: #0D0D0D;
    --pc-night: var(--rail);
    --pc-dark-card: #16161B;
    --pc-good: 0, 128, 106;
    --pc-warn: 169, 108, 20;
    --pc-bad: 214, 69, 69;
    --pc-radius: 22px;
    padding: 8px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* On dark the rail is the page's own Ink: what is drawn as night here is Graphite. */
[data-theme="dark"] .xc-pc {
    --pc-night: #212129;
    --pc-good: 0, 168, 134;
    --pc-warn: 232, 163, 61;
}

.xc-pc__sr {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.xc-pc__eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(var(--ink), .55);
}

[dir="rtl"] .xc-pc__eyebrow { font-family: inherit; font-size: 12px; letter-spacing: 0; }

.xc-pc__flash {
    margin: 0;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    color: rgb(var(--pc-good));
    background: rgba(var(--pc-good), .1);
}

.xc-pc__flash--bad { color: rgb(var(--pc-bad)); background: rgba(var(--pc-bad), .1); }

/* ── the list in force ───────────────────────────────────────────────── */

.xc-pc__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 22px;
    padding: 26px 26px 24px;
    border-radius: 26px;
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
}

/* The gradient, as the page's one accent: a rule, never under words. */
.xc-pc__hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    block-size: 4px;
    background: linear-gradient(90deg, #1C1CD2, #5B5BF0);
}

.xc-pc__hero-main { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }

.xc-pc__hero-title {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.xc-pc__hero-sub,
.xc-pc__hero-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(var(--ink), .6); text-wrap: pretty; }

.xc-pc__hero-note { font-size: 12.5px; color: rgba(var(--ink), .5); }

.xc-pc__hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 4px; }

.xc-pc__hero-chips > * {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.xc-pc__chip-live { color: rgb(var(--pc-good)); background: rgba(var(--pc-good), .12); }
.xc-pc__chip-live i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: rgb(var(--pc-good)); box-shadow: 0 0 0 4px rgba(var(--pc-good), .2); }
.xc-pc__chip-warn { color: rgb(var(--pc-warn)); background: rgba(var(--pc-warn), .13); }
a.xc-pc__chip-warn:hover { background: rgba(var(--pc-warn), .2); }
.xc-pc__chip-wait { color: rgb(var(--pc-accent)); background: var(--pc-wash); }
a.xc-pc__chip-wait:hover { background: var(--pc-wash-2); }

.xc-pc__hero-stats {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.xc-pc__hero-stats > div {
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--pc-wash);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.xc-pc__hero-stats dt { font-size: 12px; color: rgba(var(--ink), .6); }

.xc-pc__hero-stats dd {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: rgb(var(--pc-accent));
    font-variant-numeric: tabular-nums;
}

.xc-pc__hero-stats small { font-family: inherit; font-size: 12px; font-weight: 500; color: rgba(var(--ink), .5); margin-inline-start: 3px; }

/* ── cards around the form ───────────────────────────────────────────── */

.xc-pc__card {
    padding: 20px 22px;
    border-radius: var(--pc-radius);
    border: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xc-pc__card--wait { border-color: rgba(var(--pc-warn), .45); }

.xc-pc__card-head { display: flex; align-items: flex-start; gap: 14px; }

.xc-pc__card-glyph {
    flex: none;
    inline-size: 42px;
    block-size: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--tint));
    background: rgba(var(--tint), .1);
}

.xc-pc__card-title { margin: 0; font-size: 17px; font-weight: 600; }
.xc-pc__card-sub { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(var(--ink), .58); text-wrap: pretty; }

.xc-pc__inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0; }
.xc-pc__grow { flex: 1; min-inline-size: 240px; }

/* ── the review ──────────────────────────────────────────────────────── */

.xc-pc__review {
    padding: 22px 24px;
    border-radius: 24px;
    border: 1.5px solid rgba(var(--pc-accent), .45);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 18px 44px rgba(28, 28, 210, .1);
}

.xc-pc__review-head { display: flex; align-items: flex-start; gap: 14px; }
.xc-pc__review-head > div { display: flex; flex-direction: column; gap: 3px; }

.xc-pc__review-glyph {
    flex: none;
    inline-size: 46px;
    block-size: 46px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: #1C1CD2;
}

.xc-pc__review-title { margin: 0; font-family: Poppins, sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }

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

.xc-pc__change {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 10px 13px;
    border-radius: 12px;
    background: var(--surface-2);
    font-size: 13.5px;
}

.xc-pc__change-what { font-weight: 500; }
.xc-pc__delta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.xc-pc__delta svg { flex: none; color: rgba(var(--ink), .35); }
.xc-pc__was { color: rgb(var(--pc-bad)); text-decoration: line-through; opacity: .75; }
.xc-pc__now { padding: 3px 9px; border-radius: 8px; font-weight: 600; color: rgb(var(--pc-good)); background: rgba(var(--pc-good), .12); }

.xc-pc__alert {
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    color: rgb(var(--pc-warn));
    background: rgba(var(--pc-warn), .1);
    border: 1px solid rgba(var(--pc-warn), .3);
}

.xc-pc__alert ul { margin: 6px 0 0; padding-inline-start: 18px; }

.xc-pc__fold { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.xc-pc__fold > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.xc-pc__fold[open] > summary { margin-block-end: 10px; }

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

.xc-pc__when { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.xc-pc__when legend { margin-block-end: 8px; }

.xc-pc__seg { position: relative; display: inline-flex; }
.xc-pc__seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

.xc-pc__seg span {
    padding: 9px 15px;
    border-radius: 12px;
    border: 1px solid var(--line);
    font-size: 13.5px;
    font-weight: 500;
    background: var(--surface);
}

.xc-pc__seg input:checked + span { color: #FFFFFF; border-color: transparent; background: #1C1CD2; }
.xc-pc__seg input:focus-visible + span { outline: 2px solid rgb(var(--pc-accent)); outline-offset: 2px; }
.xc-pc__at { inline-size: auto; min-inline-size: 220px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ink), .04); }

/* Why a plan cannot be deleted: something is on it. */
.xc-pc__held { max-inline-size: 46ch; font-size: 12.5px; line-height: 1.45; color: rgba(var(--ink), .55); text-wrap: pretty; }

.xc-pc__drop svg { flex: none; vertical-align: -2px; margin-inline-end: 4px; }

.xc-pc__drop {
    appearance: none;
    border: 0;
    background: none;
    padding: 6px 2px;
    font: inherit;
    font-size: 13px;
    color: rgb(var(--pc-bad));
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── the two doors ───────────────────────────────────────────────────── */

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

.xc-pc__doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.xc-pc__door {
    appearance: none;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "glyph text go"
        "glyph meta go";
    align-items: center;
    gap: 6px 18px;
    padding: 24px 26px;
    border-radius: 26px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: transform 200ms cubic-bezier(.2, .8, .25, 1), box-shadow 200ms, border-color 200ms, background 200ms, color 200ms;
}

.xc-pc__door:hover { transform: translateY(-3px); border-color: rgba(var(--pc-accent), .4); box-shadow: 0 14px 32px rgba(28, 28, 210, .1); }
.xc-pc__door:focus-visible { outline: 3px solid rgba(var(--pc-accent), .45); outline-offset: 3px; }

/* The open door: Infinity Blue for the plans, Ink for the AI, white on both. */
.xc-pc__door--plans[aria-selected="true"] { background: #1C1CD2; }
.xc-pc__door--ai[aria-selected="true"] { background: var(--pc-night); }
.xc-pc__door[aria-selected="true"] { color: #FFFFFF; border-color: transparent; box-shadow: 0 18px 40px rgba(13, 13, 13, .18); }
[data-theme="dark"] .xc-pc__door--ai[aria-selected="true"] { box-shadow: 0 0 0 1.5px rgba(143, 143, 247, .6); }

.xc-pc__door-glyph {
    grid-area: glyph;
    inline-size: 58px;
    block-size: 58px;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--pc-accent));
    background: var(--pc-wash);
}

.xc-pc__door[aria-selected="true"] .xc-pc__door-glyph { color: #FFFFFF; background: rgba(255, 255, 255, .14); }
.xc-pc__door--ai[aria-selected="true"] .xc-pc__door-glyph { color: #8F8FF7; }

.xc-pc__door-text { grid-area: text; display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.xc-pc__door-text strong { font-family: Poppins, sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.xc-pc__door-text span { font-size: 13.5px; line-height: 1.45; opacity: .72; text-wrap: pretty; }

.xc-pc__door-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 6px; }

.xc-pc__door-meta > span {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: rgb(var(--pc-accent));
    background: var(--pc-wash);
}

.xc-pc__door[aria-selected="true"] .xc-pc__door-meta > span { color: #FFFFFF; background: rgba(255, 255, 255, .14); }
.xc-pc__door-meta > .xc-pc__door-fix,
.xc-pc__door[aria-selected="true"] .xc-pc__door-meta > .xc-pc__door-fix { color: #FFFFFF; background: rgb(var(--pc-bad)); }

.xc-pc__door-go { grid-area: go; opacity: .55; transition: transform 200ms, opacity 200ms; }
.xc-pc__door:hover .xc-pc__door-go { transform: translateX(3px); opacity: 1; }
[dir="rtl"] .xc-pc__door-go { transform: scaleX(-1); }
[dir="rtl"] .xc-pc__door:hover .xc-pc__door-go { transform: scaleX(-1) translateX(3px); }

/* One half at a time, once the script is there to switch; both without it. */
.xc-pc[data-pc-ready] .xc-pc__panel:not([data-pc-on]) { display: none; }

.xc-pc__panel { display: flex; flex-direction: column; gap: 18px; }
.xc-pc[data-pc-ready] .xc-pc__panel[data-pc-on] { animation: xc-pc-rise 260ms cubic-bezier(.2, .8, .25, 1) both; }

@keyframes xc-pc-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.xc-pc__panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.xc-pc__panel-head > div:first-child { display: flex; flex-direction: column; gap: 4px; max-inline-size: 78ch; }
.xc-pc__panel-title { margin: 0; font-family: Poppins, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.xc-pc__panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.xc-pc__extras-open[data-pc-errors] { border-color: rgba(var(--pc-bad), .6); }

/* ── a plan, as a card ───────────────────────────────────────────────── */

.xc-pc__plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }

.xc-pc__plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-block-end: 14px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    overflow: hidden;
    transition: transform 200ms cubic-bezier(.2, .8, .25, 1), box-shadow 200ms, border-color 200ms, filter 200ms, opacity 200ms;
}

/* Its colour: a rule along the top. */
.xc-pc__plan::before { content: ''; position: absolute; inset: 0 0 auto; block-size: 4px; background: rgb(var(--tint)); }

.xc-pc__plan:hover { transform: translateY(-4px); border-color: rgba(var(--pc-accent), .35); box-shadow: 0 18px 40px rgba(28, 28, 210, .12); }
.xc-pc__plan:focus-within { border-color: rgba(var(--pc-accent), .5); }

.xc-pc__plan-top { display: flex; flex-direction: column; gap: 6px; padding: 22px 16px 2px; }

.xc-pc__plan-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-block-size: 28px; }
.xc-pc__plan-name { font-family: Poppins, sans-serif; font-size: 17px; font-weight: 600; margin-inline-end: auto; overflow-wrap: anywhere; }

.xc-pc__plan-price { margin: 6px 0 0; display: flex; align-items: baseline; gap: 6px; }
.xc-pc__plan-amount { font-family: Poppins, sans-serif; font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.xc-pc__plan-per { font-size: 13px; color: rgba(var(--ink), .55); }
.xc-pc__plan-conv { margin: 0; min-block-size: 16px; font-size: 11.5px; color: rgba(var(--ink), .5); font-variant-numeric: tabular-nums; }

/* A month of a year paid at once, under the price — and a plan that is
 * quoted rather than listed, which says so where its price would be. */
.xc-pc__plan-yearly { margin: 2px 0 0; font-size: 12.5px; color: rgba(var(--ink), .62); font-variant-numeric: tabular-nums; }
.xc-pc__plan-quoted { display: none; margin: 6px 0 0; font-family: Poppins, sans-serif; font-size: 30px; font-weight: 600; line-height: 1.13; letter-spacing: -0.03em; }
.xc-pc__plan[data-quoted] .xc-pc__plan-quoted { display: block; }
.xc-pc__plan[data-quoted] .xc-pc__plan-price,
.xc-pc__plan[data-quoted] .xc-pc__plan-conv,
.xc-pc__plan[data-quoted] .xc-pc__plan-yearly { display: none; }
.xc-pc__plan[data-hot] .xc-pc__plan-yearly { color: rgba(255, 255, 255, .7); }

/* What a plan opens, in a line: nothing is drawn for a plan that opens nothing more. */
.xc-pc__plan-opens { margin: 0; padding-inline: 16px; font-size: 12.5px; line-height: 1.45; color: rgba(var(--ink), .72); }
.xc-pc__plan-opens span { font-weight: 600; color: rgb(var(--pc-accent)); }
.xc-pc__plan[data-hot] .xc-pc__plan-opens { color: rgba(255, 255, 255, .78); }
.xc-pc__plan[data-hot] .xc-pc__plan-opens span { color: #8F8FF7; }

.xc-pc__pill {
    display: none;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    color: rgba(var(--ink), .7);
    background: rgba(var(--ink), .07);
}

.xc-pc__pill--hot { color: #FFFFFF; background: #1C1CD2; }
.xc-pc__pill--changed { color: rgb(var(--pc-warn)); background: rgba(var(--pc-warn), .14); }
.xc-pc__pill--new { color: rgb(var(--pc-accent)); background: var(--pc-wash); }

.xc-pc__plan[data-hot] .xc-pc__pill--hot,
[data-retired] .xc-pc__pill--retired,
[data-new] .xc-pc__pill--new,
[data-pc-changed] .xc-pc__pill--changed { display: inline-flex; }

/* The website's highlighted plan, drawn as the website draws it: Ink, with Periwinkle. */
.xc-pc__plan[data-hot] { color: #FFFFFF; background: var(--pc-ink); border-color: var(--pc-ink); }
[data-theme="dark"] .xc-pc__plan[data-hot] { background: var(--pc-night); border-color: rgba(143, 143, 247, .6); box-shadow: 0 0 0 1px rgba(143, 143, 247, .3); }
.xc-pc__plan[data-hot] .xc-pc__plan-per,
.xc-pc__plan[data-hot] .xc-pc__plan-conv { color: rgba(255, 255, 255, .6); }
.xc-pc__plan[data-hot] .xc-pc__pill { color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .12); }
.xc-pc__plan[data-hot] .xc-pc__pill--hot { color: var(--pc-ink); background: #FFFFFF; }
.xc-pc__plan[data-hot] .xc-pc__pill--changed { color: #E8A33D; background: rgba(232, 163, 61, .16); }

.xc-pc__plan[data-retired] { filter: grayscale(.9); opacity: .72; }
.xc-pc__plan[data-retired]:hover { opacity: 1; filter: grayscale(.4); }
.xc-pc__plan[data-new] { border-style: dashed; border-color: rgba(var(--pc-accent), .55); }
.xc-pc__plan[data-pc-errors],
.xc-pc__aiplan[data-pc-errors] { box-shadow: 0 0 0 2px rgba(var(--pc-bad), .7); }

.xc-pc__dot { flex: none; inline-size: 10px; block-size: 10px; border-radius: 50%; background: rgb(var(--tint)); box-shadow: 0 0 0 3px rgba(var(--tint), .2); }

/* Graphite is a colour a plan may have: on dark it still needs an edge, and its rule a lift toward white. */
[data-theme="dark"] .xc-pc__dot,
.xc-pc__plan[data-hot] .xc-pc__dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 0 0 4px rgba(var(--tint), .25); }

[data-theme="dark"] .xc-pc__plan::before,
[data-theme="dark"] .xc-pc__aiplan::before,
[data-theme="dark"] .xc-pc__sheet-head::before { background: color-mix(in srgb, rgb(var(--tint)) 55%, #FFFFFF); }

/* The star: the website's highlighted plan, above the card's own button. */
.xc-pc__star {
    position: relative;
    z-index: 2;
    order: 1;
    display: inline-flex;
    padding: 5px;
    border-radius: 10px;
    color: rgba(var(--ink), .35);
    cursor: pointer;
    transition: color 150ms, background 150ms;
}

.xc-pc__star input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.xc-pc__star svg { fill: none; }
.xc-pc__star:hover { color: rgb(var(--pc-accent)); background: var(--pc-wash); }
.xc-pc__star:has(input:checked) { color: rgb(var(--pc-accent)); }
.xc-pc__star:has(input:checked) svg { fill: currentColor; }
.xc-pc__star:has(input:focus-visible) { outline: 2px solid rgb(var(--pc-accent)); outline-offset: 1px; }
.xc-pc__plan[data-hot] .xc-pc__star { color: #8F8FF7; }
.xc-pc__plan[data-hot] .xc-pc__star:hover { background: rgba(255, 255, 255, .1); }

.xc-pc__star-hint svg { vertical-align: -2px; color: rgb(var(--pc-accent)); fill: currentColor; }

.xc-pc__stats {
    margin: 0;
    padding-inline: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.xc-pc__stats > div {
    padding: 10px 11px;
    border-radius: 14px;
    background: var(--pc-wash);
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-inline-size: 0;
}

.xc-pc__stats dt { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: rgba(var(--ink), .58); }
.xc-pc__stats dt svg { flex: none; color: rgb(var(--pc-accent)); }
.xc-pc__stats dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.xc-pc__plan[data-hot] .xc-pc__stats > div { background: var(--pc-dark-card); }
.xc-pc__plan[data-hot] .xc-pc__stats dt { color: rgba(255, 255, 255, .6); }
.xc-pc__plan[data-hot] .xc-pc__stats dt svg { color: #8F8FF7; }

.xc-pc__plan-langs { display: flex; flex-wrap: wrap; gap: 5px; padding-inline: 16px; }

.xc-pc__plan-langs span {
    padding: 3px 8px;
    border-radius: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: rgb(var(--pc-accent));
    background: var(--pc-wash);
}

.xc-pc__plan[data-hot] .xc-pc__plan-langs span { color: #8F8FF7; background: rgba(143, 143, 247, .12); }

.xc-pc__plan-adv { margin: 0; padding: 0 16px; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: rgba(var(--ink), .75); }
.xc-pc__plan[data-hot] .xc-pc__plan-adv { color: rgba(255, 255, 255, .8); }
.xc-pc__plan-adv li { position: relative; padding-inline-start: 22px; line-height: 1.4; }

.xc-pc__plan-adv li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 2px;
    inline-size: 15px;
    block-size: 15px;
    border-radius: 50%;
    background: #1C1CD2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.xc-pc__plan[data-hot] .xc-pc__plan-adv li::before { background-color: #5B5BF0; }
.xc-pc__plan-adv li.xc-pc__plan-more { padding-inline-start: 22px; color: rgba(var(--ink), .5); font-size: 12px; }
.xc-pc__plan[data-hot] .xc-pc__plan-adv li.xc-pc__plan-more { color: rgba(255, 255, 255, .55); }
.xc-pc__plan-adv li.xc-pc__plan-more::before { display: none; }

.xc-pc__plan-open {
    appearance: none;
    margin: auto 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 0;
    border-radius: 13px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: rgb(var(--pc-accent));
    background: var(--pc-wash);
    cursor: pointer;
    transition: background 160ms;
}

/* The whole card is the button. */
.xc-pc__plan-open::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.xc-pc__plan-open:focus-visible { outline: 3px solid rgba(var(--pc-accent), .45); outline-offset: 2px; }
.xc-pc__plan:hover .xc-pc__plan-open { background: var(--pc-wash-2); }
.xc-pc__plan[data-hot] .xc-pc__plan-open { color: #8F8FF7; background: var(--pc-dark-card); }
.xc-pc__plan-open > span:first-child { margin-inline-end: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xc-pc__go { flex: none; transition: transform 200ms; }
.xc-pc__plan:hover .xc-pc__go { transform: translateX(3px); }
[dir="rtl"] .xc-pc__go { transform: scaleX(-1); }
[dir="rtl"] .xc-pc__plan:hover .xc-pc__go { transform: scaleX(-1) translateX(3px); }

.xc-pc__fix {
    display: none;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
    background: rgb(var(--pc-bad));
}

[data-pc-errors] .xc-pc__fix { display: inline-flex; }

/* Adding one. */
.xc-pc__add {
    appearance: none;
    min-block-size: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    border-radius: 24px;
    border: 2px dashed rgba(var(--pc-accent), .25);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 200ms, background 200ms, transform 200ms;
}

.xc-pc__add:hover { border-color: rgba(var(--pc-accent), .6); background: var(--pc-wash); transform: translateY(-3px); }
.xc-pc__add:focus-visible { outline: 3px solid rgba(var(--pc-accent), .45); outline-offset: 3px; }

.xc-pc__add-plus {
    inline-size: 54px;
    block-size: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: #1C1CD2;
    margin-block-end: 6px;
    transition: transform 200ms;
}

.xc-pc__add:hover .xc-pc__add-plus { transform: rotate(90deg); }
.xc-pc__add strong { font-size: 15px; }
.xc-pc__add > span:last-child { font-size: 12.5px; color: rgba(var(--ink), .55); max-inline-size: 26ch; line-height: 1.45; }

/* The free trial, beside the plans. */
.xc-pc__extras { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

.xc-pc__extra {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--surface);
    transition: border-color 200ms, box-shadow 200ms;
}

.xc-pc__extra:hover { border-color: rgba(var(--pc-accent), .35); box-shadow: 0 12px 30px rgba(28, 28, 210, .08); }

.xc-pc__extra-glyph {
    flex: none;
    inline-size: 46px;
    block-size: 46px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--pc-accent));
    background: var(--pc-wash);
}

.xc-pc__extra-text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 3px; }
.xc-pc__extra-text strong { font-family: Poppins, sans-serif; font-size: 15.5px; font-weight: 600; }
.xc-pc__extra-text > span { font-size: 13px; color: rgba(var(--ink), .6); line-height: 1.45; }
.xc-pc__extra-text .xc-pc__pill { vertical-align: 2px; margin-inline-start: 4px; font-family: inherit; }

.xc-pc__extra-open {
    appearance: none;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: rgb(var(--pc-accent));
    background: var(--surface);
    cursor: pointer;
}

.xc-pc__extra-open::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.xc-pc__extra-open:focus-visible { outline: 3px solid rgba(var(--pc-accent), .45); outline-offset: 2px; }

/* ── the AI prices ───────────────────────────────────────────────────── */

/* Dollars, and today's rates: Ink with Periwinkle, as the open door above it. */
.xc-pc__rates {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 20px 22px;
    border-radius: 22px;
    color: #FFFFFF;
    background: var(--pc-night);
}

[data-theme="dark"] .xc-pc__rates { box-shadow: 0 0 0 1px rgba(143, 143, 247, .25); }

.xc-pc__rates-text { flex: 1; min-inline-size: 260px; display: flex; flex-direction: column; gap: 5px; }
.xc-pc__rates-text strong { font-family: Poppins, sans-serif; font-size: 17px; font-weight: 600; }
.xc-pc__rates-text > span { font-size: 13px; color: rgba(255, 255, 255, .72); line-height: 1.5; }
.xc-pc__rates-list { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 4px; }

.xc-pc__rates-list span {
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: #8F8FF7;
    background: var(--pc-dark-card);
}

.xc-pc__rates-pick { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .8); }

.xc-pc__rates-pick select {
    appearance: none;
    padding: 10px 36px 10px 14px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-ink);
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 14px no-repeat;
    cursor: pointer;
}

[dir="rtl"] .xc-pc__rates-pick select { padding: 10px 14px 10px 36px; background-position: left 12px center; }

.xc-pc__aiplans { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }

.xc-pc__aiplan {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: var(--surface);
    position: relative;
    overflow: hidden;
}

.xc-pc__aiplan::before { content: ''; position: absolute; inset: 0 0 auto; block-size: 4px; background: rgb(var(--tint)); }
.xc-pc__aiplan:focus { outline: 3px solid rgba(var(--pc-accent), .45); outline-offset: 2px; }
.xc-pc__aiplan[data-retired] { opacity: .7; }
.xc-pc__aiplan[data-pc-flash] { animation: xc-pc-flash 1.2s ease-out; }

@keyframes xc-pc-flash {
    0% { box-shadow: 0 0 0 0 rgba(28, 28, 210, .45); }
    100% { box-shadow: 0 0 0 16px rgba(28, 28, 210, 0); }
}

.xc-pc__aiplan-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xc-pc__aiplan-head strong { font-size: 15px; margin-inline-end: auto; }
.xc-pc__aiplan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.xc-pc__table-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.xc-pc__table { inline-size: 100%; border-collapse: collapse; min-inline-size: 720px; }

.xc-pc__table th,
.xc-pc__table td { padding: 12px 14px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); }

.xc-pc__table thead th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(var(--ink), .6);
    background: var(--pc-wash);
}

[dir="rtl"] .xc-pc__table thead th { font-family: inherit; font-size: 12px; letter-spacing: 0; }
.xc-pc__table thead small { font-family: inherit; text-transform: none; letter-spacing: 0; font-weight: 400; }
.xc-pc__table tbody tr:last-child > * { border-block-end: 0; }
.xc-pc__table tbody tr:hover { background: rgba(var(--pc-accent), .03); }
.xc-pc__table tbody th { padding-block-start: 22px; }
.xc-pc__table tr[data-any] { background: rgba(var(--pc-accent), .04); }
.xc-pc__table .xc-pc__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.xc-pc__model { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600; }
.xc-pc__table .xc-pc__hint { display: block; margin-block-start: 4px; max-inline-size: 30ch; }

.xc-pc__settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 18px;
    align-items: start;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: var(--surface);
}

/* ── fields ──────────────────────────────────────────────────────────── */

.xc-pc__field { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.xc-pc__plain { border: 0; margin: 0; padding: 0; }
.xc-pc__plain > legend { padding: 0; margin-block-end: 6px; }

.xc-pc__label { font-size: 12.5px; font-weight: 600; color: rgba(var(--ink), .72); }
/* Some labels are the review's words, which start lowercase inside a sentence. */
.xc-pc__label::first-letter { text-transform: uppercase; }
.xc-pc__hint { font-size: 12px; line-height: 1.45; color: rgba(var(--ink), .52); text-wrap: pretty; }
.xc-pc__count { font-variant-numeric: tabular-nums; font-weight: 600; }
.xc-pc__count[data-over] { color: rgb(var(--pc-bad)); }

.xc-pc__box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-inline: 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: rgba(var(--ink), .05);
    transition: border-color 160ms, background 160ms, box-shadow 160ms;
}

.xc-pc__box:focus-within { border-color: rgba(var(--pc-accent), .6); background: var(--surface); box-shadow: 0 0 0 4px rgba(var(--pc-accent), .12); }
.xc-pc__box[data-wrong],
.xc-pc__step[data-wrong] { border-color: rgba(var(--pc-bad), .7); background: rgba(var(--pc-bad), .05); }

.xc-pc__in {
    flex: 1;
    min-inline-size: 0;
    inline-size: 100%;
    padding-block: 10px;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.xc-pc__in:disabled { color: rgba(var(--ink), .6); }
select.xc-pc__in { cursor: pointer; }
.xc-pc__sign { font-weight: 600; color: rgba(var(--ink), .45); }
.xc-pc__suffix { flex: none; font-size: 12.5px; color: rgba(var(--ink), .5); white-space: nowrap; }
.xc-pc__conv { min-block-size: 15px; font-size: 11.5px; color: rgba(var(--ink), .58); font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
[dir="rtl"] .xc-pc__conv { text-align: end; }

.xc-pc__area {
    inline-size: 100%;
    box-sizing: border-box;
    min-block-size: 64px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: rgba(var(--ink), .05);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    resize: vertical;
    outline: none;
    transition: border-color 160ms, background 160ms, box-shadow 160ms;
}

.xc-pc__area:focus { border-color: rgba(var(--pc-accent), .6); background: var(--surface); box-shadow: 0 0 0 4px rgba(var(--pc-accent), .12); }
.xc-pc__area[aria-invalid="true"] { border-color: rgba(var(--pc-bad), .7); }

.xc-pc__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; align-items: start; }

.xc-pc__price-field .xc-pc__box { padding-block: 4px; }
.xc-pc__price-field .xc-pc__in { font-family: Poppins, sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.xc-pc__price-field .xc-pc__sign { font-family: Poppins, sans-serif; font-size: 22px; }
.xc-pc__price-field .xc-pc__conv { font-size: 12.5px; }

/* − 3 + */
.xc-pc__step {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 13px;
    border: 1px solid transparent;
    background: rgba(var(--ink), .05);
    inline-size: fit-content;
    max-inline-size: 100%;
}

.xc-pc__step button {
    appearance: none;
    flex: none;
    inline-size: 34px;
    block-size: 34px;
    border: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--pc-accent));
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(var(--ink), .08);
    cursor: pointer;
    transition: background 150ms, transform 150ms;
}

.xc-pc__step button:hover:not(:disabled) { background: var(--pc-wash); }
.xc-pc__step button:active:not(:disabled) { transform: scale(.94); }
.xc-pc__step button:disabled { opacity: .45; cursor: default; }

.xc-pc__step input {
    inline-size: 64px;
    border: 0;
    outline: none;
    background: transparent;
    text-align: center;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* Choosing languages: chips that tick. */
.xc-pc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xc-pc__chip { position: relative; display: inline-flex; }
.xc-pc__chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }

.xc-pc__chip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 13.5px;
    font-weight: 500;
    transition: background 150ms, border-color 150ms, color 150ms;
}

.xc-pc__chip span::before {
    content: '';
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(var(--ink), .3);
    box-sizing: border-box;
    transition: background 150ms, border-color 150ms;
}

.xc-pc__chip input:checked + span { color: rgb(var(--pc-accent)); border-color: rgba(var(--pc-accent), .45); background: var(--pc-wash); font-weight: 600; }

.xc-pc__chip input:checked + span::before {
    border-color: transparent;
    background: #1C1CD2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.xc-pc__chip input:focus-visible + span { outline: 2px solid rgb(var(--pc-accent)); outline-offset: 2px; }

/* A plan's colour. The ring is the accent: Graphite's own would vanish on dark. */
.xc-pc__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.xc-pc__swatch { position: relative; display: inline-flex; }
.xc-pc__swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }

.xc-pc__swatch::before {
    content: '';
    inline-size: 32px;
    block-size: 32px;
    border-radius: 50%;
    background: rgb(var(--sw));
    box-shadow: inset 0 0 0 1px rgba(var(--ink), .12);
    transition: transform 150ms, box-shadow 150ms;
}

.xc-pc__swatch:hover::before { transform: scale(1.08); }
.xc-pc__swatch:has(input:checked)::before { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px rgb(var(--pc-accent)); }
.xc-pc__swatch:has(input:focus-visible)::before { outline: 2px solid rgb(var(--pc-accent)); outline-offset: 5px; }

/* On and off. */
.xc-pc__switch { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.xc-pc__switch > input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }

.xc-pc__switch-track {
    flex: none;
    position: relative;
    inline-size: 42px;
    block-size: 24px;
    margin-block-start: 1px;
    border-radius: 999px;
    background: rgba(var(--ink), .18);
    transition: background 180ms;
}

.xc-pc__switch-track span {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: inset-inline-start 180ms;
}

.xc-pc__switch > input:checked + .xc-pc__switch-track { background: #1C1CD2; }
[data-theme="dark"] .xc-pc__switch > input:checked + .xc-pc__switch-track { background: #5B5BF0; }
.xc-pc__switch > input:checked + .xc-pc__switch-track span { inset-inline-start: 21px; }
.xc-pc__switch > input:focus-visible + .xc-pc__switch-track { outline: 2px solid rgb(var(--pc-accent)); outline-offset: 3px; }
.xc-pc__switch > input:disabled + .xc-pc__switch-track { opacity: .5; }
.xc-pc__switch-text { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.xc-pc__switch-text span { font-size: 12.5px; line-height: 1.45; color: rgba(var(--ink), .55); }

/* A tab per language. */
.xc-pc__tabs { display: flex; flex-direction: column; gap: 14px; }
.xc-pc__tablist { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(var(--ink), .05); inline-size: fit-content; }

.xc-pc__tab {
    appearance: none;
    position: relative;
    padding: 8px 16px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(var(--ink), .65);
    cursor: pointer;
}

.xc-pc__tab[aria-selected="true"] { color: var(--text); font-weight: 600; background: var(--surface); box-shadow: 0 1px 3px rgba(var(--ink), .12); }
.xc-pc__tab[data-wrong]::after { content: ''; position: absolute; inset-block-start: 6px; inset-inline-end: 6px; inline-size: 7px; block-size: 7px; border-radius: 50%; background: rgb(var(--pc-bad)); }
.xc-pc__pane { display: flex; flex-direction: column; gap: 14px; }
.xc-pc[data-pc-ready] .xc-pc__pane:not([data-pc-on]) { display: none; }

/* ── the sheets ──────────────────────────────────────────────────────── */

dialog.xc-pc__sheet {
    inline-size: 100%;
    max-inline-size: min(720px, 94vw);
    max-block-size: none;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    overflow: visible;
}

dialog.xc-pc__sheet--wide { max-inline-size: min(980px, 96vw); }
dialog.xc-pc__sheet--small { max-inline-size: min(500px, 94vw); }
dialog.xc-pc__sheet::backdrop { background: rgba(13, 13, 13, .55); backdrop-filter: blur(3px); }
dialog.xc-pc__sheet[open] { animation: xc-pc-in 240ms cubic-bezier(.2, .8, .25, 1) both; }

@keyframes xc-pc-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    dialog.xc-pc__sheet[open],
    .xc-pc[data-pc-ready] .xc-pc__panel[data-pc-on],
    .xc-pc__aiplan[data-pc-flash] { animation: none; }
}

.xc-pc__sheet-box {
    display: flex;
    flex-direction: column;
    max-block-size: 88vh;
    border-radius: 26px;
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 44px 96px rgba(0, 0, 0, .42);
}

/* Its words on the surface; its colour a rule. */
.xc-pc__sheet-head {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 22px 18px;
    border-block-end: 1px solid var(--line);
    background: var(--surface);
}

.xc-pc__sheet-head::before { content: ''; position: absolute; inset: 0 0 auto; block-size: 4px; background: rgb(var(--tint)); }

.xc-pc__sheet-glyph {
    flex: none;
    inline-size: 46px;
    block-size: 46px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: #1C1CD2;
}

[data-theme="dark"] .xc-pc__sheet-glyph { color: #8F8FF7; background: var(--pc-night); }

.xc-pc__sheet-title { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.xc-pc__sheet-title h2 { margin: 0; font-family: Poppins, sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }

.xc-pc__x {
    appearance: none;
    flex: none;
    display: flex;
    padding: 9px;
    border: 0;
    border-radius: 12px;
    color: rgba(var(--ink), .55);
    background: rgba(var(--ink), .06);
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.xc-pc__x:hover { color: var(--text); background: rgba(var(--ink), .1); }
.xc-pc__x:focus-visible { outline: 2px solid rgb(var(--pc-accent)); outline-offset: 2px; }

.xc-pc__sheet-body { flex: 1; min-block-size: 0; overflow-y: auto; padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 22px; }

.xc-pc__sheet-foot {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 14px 22px;
    border-block-start: 1px solid var(--line);
    background: var(--surface-2);
}

.xc-pc__sheet-note { flex: 1; min-inline-size: 180px; font-size: 12.5px; color: rgba(var(--ink), .5); }

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

.xc-pc__group-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgb(var(--pc-accent));
}

[dir="rtl"] .xc-pc__group-title { font-family: inherit; font-size: 12.5px; letter-spacing: 0; }
.xc-pc__group-title::after { content: ''; flex: 1; block-size: 1px; background: var(--line); }

.xc-pc__aside {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--pc-wash);
}

.xc-pc__aside-glyph { flex: none; inline-size: 38px; block-size: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #8F8FF7; background: var(--pc-night); }
.xc-pc__aside-text { flex: 1; min-inline-size: 200px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.xc-pc__aside-text span { font-size: 12.5px; color: rgba(var(--ink), .6); }

/* ── what is not saved yet ───────────────────────────────────────────── */

.xc-pc__bar {
    position: sticky;
    inset-block-end: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    padding-inline-start: 18px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 44px rgba(13, 13, 13, .16);
    transition: border-color 200ms, box-shadow 200ms;
}

.xc-pc__bar[data-dirty] { border-color: rgba(var(--pc-warn), .5); }
.xc-pc__bar-dot { flex: none; inline-size: 10px; block-size: 10px; border-radius: 50%; background: rgb(var(--pc-good)); box-shadow: 0 0 0 4px rgba(var(--pc-good), .18); }
.xc-pc__bar[data-dirty] .xc-pc__bar-dot { background: rgb(var(--pc-warn)); box-shadow: 0 0 0 4px rgba(var(--pc-warn), .2); }
.xc-pc__bar[data-bad] { border-color: rgba(var(--pc-bad), .45); }
.xc-pc__bar[data-bad] .xc-pc__bar-dot { background: rgb(var(--pc-bad)); box-shadow: 0 0 0 4px rgba(var(--pc-bad), .2); }
.xc-pc__bar-text { flex: 1; min-inline-size: 0; font-size: 13.5px; font-weight: 500; }

/* ── every version ───────────────────────────────────────────────────── */

.xc-pc__timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }

.xc-pc__moment { --dot: 120, 120, 135; position: relative; padding-inline-start: 26px; padding-block-end: 4px; }
.xc-pc__moment[data-state="current"] { --dot: var(--pc-good); }
.xc-pc__moment[data-state="scheduled"] { --dot: var(--pc-warn); }
.xc-pc__moment[data-state="cancelled"] { --dot: var(--pc-bad); }
.xc-pc__moment::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 6px; inline-size: 2px; background: var(--line); }
.xc-pc__moment:last-child::before { inset-block-end: auto; block-size: 20px; }

.xc-pc__moment::after {
    content: '';
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 1px;
    inline-size: 12px;
    block-size: 12px;
    border-radius: 50%;
    background: rgb(var(--dot));
    box-shadow: 0 0 0 4px rgba(var(--dot), .2);
}

.xc-pc__version { padding: 8px 12px 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 10px; transition: background 150ms; }
.xc-pc__version[open] { background: var(--surface-2); }
.xc-pc__version > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13.5px; }
.xc-pc__state { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: rgb(var(--dot)); background: rgba(var(--dot), .13); }
.xc-pc__moment-meta { font-size: 12.5px; color: rgba(var(--ink), .55); }
.xc-pc__moment-why { flex-basis: 100%; font-size: 12.5px; color: rgba(var(--ink), .65); }

/* ── narrower ────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .xc-pc__hero { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
    .xc-pc { padding-inline: 16px; }
    .xc-pc__doors,
    .xc-pc__settings { grid-template-columns: minmax(0, 1fr); }
    .xc-pc__door { padding: 18px; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "glyph text" "meta meta"; }
    .xc-pc__door-go { display: none; }
    .xc-pc__aiplan-grid { grid-template-columns: minmax(0, 1fr); }
    .xc-pc__extra { flex-wrap: wrap; }
}