/* browser-extension.html: download Verse for Chrome, Edge, Brave or Opera.
   The page wears the extension's own design tokens (verse-browser-extension shared/common/theme.css): neutral
   surfaces, hairline borders, one desaturated cyan meaning "Verse is acting", amber meaning only "needs you".
   Archivo throughout, run wide (font-stretch) for the headline as the extension's wordmark is; IBM Plex Mono only
   for addresses typed into the browser. Bump ?v= in browser-extension.html on every edit. */

:root {
    color-scheme: dark;
    --bx-font: 'Archivo', 'Segoe UI', system-ui, sans-serif;
    --bx-mono: 'IBM Plex Mono', Consolas, monospace;

    --bx-surface-0: #13171c;
    --bx-surface-1: #191e24;
    --bx-surface-2: #20262d;
    --bx-border: rgba(255, 255, 255, 0.08);
    --bx-border-strong: rgba(255, 255, 255, 0.15);
    --bx-fill: rgba(255, 255, 255, 0.09);
    --bx-fill-strong: rgba(255, 255, 255, 0.22);
    --bx-code: rgba(255, 255, 255, 0.07);

    --bx-text: #e6e9ec;
    --bx-text-2: #a9b1ba;
    --bx-text-3: #7a838d;

    --bx-accent: #7fc8d3;
    --bx-accent-strong: #6bb8c4;
    --bx-accent-soft: rgba(127, 200, 211, 0.13);
    --bx-accent-contrast: #0c2226;
    --bx-warn: #d9a441;
    --bx-warn-soft: rgba(217, 164, 65, 0.13);

    --bx-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 28px 64px -24px rgba(0, 0, 0, 0.7);
    --bx-T: 4.6s; /* the example's one timeline */
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --bx-surface-0: #f4f6f8;
        --bx-surface-1: #ffffff;
        --bx-surface-2: #ebeff3;
        --bx-border: rgba(16, 24, 32, 0.1);
        --bx-border-strong: rgba(16, 24, 32, 0.18);
        --bx-fill: rgba(16, 24, 32, 0.08);
        --bx-fill-strong: rgba(16, 24, 32, 0.2);
        --bx-code: rgba(16, 24, 32, 0.06);

        --bx-text: #1a2027;
        --bx-text-2: #4f5a66;
        --bx-text-3: #626d79;

        --bx-accent: #0f6b78;
        --bx-accent-strong: #12808f;
        --bx-accent-soft: rgba(18, 128, 143, 0.11);
        --bx-accent-contrast: #ffffff;
        --bx-warn: #9a6a0e;
        --bx-warn-soft: rgba(154, 106, 14, 0.1);

        --bx-shadow: 0 1px 2px rgba(16, 24, 32, 0.08), 0 28px 64px -28px rgba(16, 24, 32, 0.28);
    }
}

* { box-sizing: border-box; }

body.bx {
    margin: 0;
    background: var(--bx-surface-0);
    color: var(--bx-text);
    font: 400 17px/1.6 var(--bx-font);
    -webkit-font-smoothing: antialiased;
}

.bx a { color: var(--bx-accent); text-underline-offset: 3px; }
.bx a:focus-visible,
.bx button:focus-visible { outline: 2px solid var(--bx-accent); outline-offset: 3px; border-radius: 4px; }

/* ── top line ── */
.bx-top {
    max-width: 1120px;
    margin: 0 auto;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bx .bx-brand {
    color: var(--bx-text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 650;
    font-stretch: 125%;
    letter-spacing: 0.01em;
}
.bx .bx-toplink { color: var(--bx-text-2); text-decoration: none; font-size: 15px; }
.bx .bx-toplink:hover { color: var(--bx-text); text-decoration: underline; }

main { max-width: 1120px; margin: 0 auto; padding: 0 24px 40px; }

/* ── hero ── */
.bx-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 56px;
    align-items: center;
    padding: 36px 0 76px;
    border-bottom: 1px solid var(--bx-border);
}

.bx-hero h1 {
    margin: 0 0 22px;
    font-size: clamp(2.6rem, 3.4vw + 1.1rem, 4.1rem);
    font-weight: 650;
    font-stretch: 125%;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.bx-lede {
    margin: 0 0 34px;
    max-width: 33em;
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--bx-text-2);
}

/* the browser choice: four radio buttons dressed as one row of choices */
.bx-pick { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.bx-pick legend { padding: 0; margin: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--bx-text-2); }
.bx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bx-chip {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--bx-border-strong);
    border-radius: 8px;
    background: var(--bx-surface-1);
    color: var(--bx-text);
    font-size: 15px;
    font-weight: 550;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.bx-chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.bx-chip:hover { border-color: color-mix(in srgb, var(--bx-accent) 50%, var(--bx-border-strong)); }
.bx-chip:has(input:checked) { border-color: var(--bx-accent); background: var(--bx-accent-soft); }
.bx-chip:has(input:focus-visible) { outline: 2px solid var(--bx-accent); outline-offset: 2px; }
.bx-here { display: none; font-size: 12.5px; font-weight: 400; color: var(--bx-text-3); }
html[data-seen="chrome"] #c-chrome .bx-here,
html[data-seen="edge"] #c-edge .bx-here,
html[data-seen="brave"] #c-brave .bx-here,
html[data-seen="opera"] #c-opera .bx-here { display: inline; }

/* a browser Verse can't run in: amber, because it needs the visitor to do something */
.bx-note {
    display: none;
    max-width: 33em;
    margin: 0 0 22px;
    padding: 11px 14px;
    border-left: 2px solid var(--bx-warn);
    border-radius: 0 8px 8px 0;
    background: var(--bx-warn-soft);
    font-size: 15px;
}
html[data-device="other"] .bx-note[data-note="other"],
html[data-device="phone"] .bx-note[data-note="phone"] { display: block; }

/* Only the chosen browser's button and steps show. Without :has, all four show, each under its heading. */
.bx [data-for] { display: none; }
.bx:has(#b-chrome:checked) .bx-download[data-for="chrome"],
.bx:has(#b-edge:checked) .bx-download[data-for="edge"],
.bx:has(#b-brave:checked) .bx-download[data-for="brave"],
.bx:has(#b-opera:checked) .bx-download[data-for="opera"] { display: inline-flex; }
.bx:has(#b-chrome:checked) .bx-way[data-for="chrome"],
.bx:has(#b-edge:checked) .bx-way[data-for="edge"],
.bx:has(#b-brave:checked) .bx-way[data-for="brave"],
.bx:has(#b-opera:checked) .bx-way[data-for="opera"] { display: block; }

.bx-download {
    align-items: center;
    gap: 10px;
    padding: 15px 24px 15px 20px;
    border-radius: 8px;
    background: var(--bx-accent-strong);
    color: var(--bx-accent-contrast);
    font-size: 17px;
    font-weight: 650;
    text-decoration: none;
    transition: background-color 0.15s;
}
.bx a.bx-download { color: var(--bx-accent-contrast); }
.bx-download:hover { background: var(--bx-accent); }
.bx-download svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.bx-release { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 18px 0 0; font-size: 14px; }
.bx-release div { display: flex; gap: 8px; }
.bx-release dt { color: var(--bx-text-3); }
.bx-release dd { margin: 0; color: var(--bx-text-2); }

/* ── the example: a browser window with Verse's panel beside the page ── */
.bx-demo { margin: 0; min-width: 0; }
.bx-window {
    border: 1px solid var(--bx-border-strong);
    border-radius: 12px;
    background: var(--bx-surface-1);
    box-shadow: var(--bx-shadow);
    overflow: hidden;
}
.bx-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bx-border);
    background: var(--bx-surface-2);
}
.bx-dots { display: flex; gap: 6px; }
.bx-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--bx-fill-strong); }
.bx-url {
    flex: 0 1 250px;
    min-width: 0;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--bx-surface-1);
    color: var(--bx-text-3);
    font: 12.5px var(--bx-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bx-body { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); min-height: 410px; }

/* the page Verse works on, drawn as blocks; the outline is the one the extension draws round its working tab */
.bx-site {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 18px;
    animation: bx-ring var(--bx-T) ease-out both;
}
.bx-site-h { width: 72%; height: 12px; border-radius: 4px; background: var(--bx-fill-strong); }
.bx-toggle {
    align-self: flex-start;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--bx-border-strong);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.4;
}
.bx-toggle span { padding: 3px 10px; border-radius: 999px; color: var(--bx-text-3); }
.bx-monthly { animation: bx-monthly var(--bx-T) ease-out both; }
.bx-toggle .bx-yearly { background: var(--bx-accent-soft); color: var(--bx-accent); animation: bx-yearly var(--bx-T) ease-out both; }
.bx-plans { display: grid; gap: 10px; }
.bx-plan { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--bx-border); border-radius: 8px; }
.bx-plan b { display: block; width: 46%; height: 10px; border-radius: 3px; background: var(--bx-fill-strong); animation: bx-price var(--bx-T) ease-out both; }
.bx-plan i { display: block; width: 82%; height: 6px; border-radius: 3px; background: var(--bx-fill); }
.bx-plan i + i { width: 58%; }

/* Verse's panel */
.bx-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 13px 16px 12px;
    border-left: 1px solid var(--bx-border);
    background: var(--bx-surface-0);
    font-size: 13.5px;
    line-height: 1.45;
}
.bx-panel p { margin: 0; }
.bx-panel-top { display: flex; align-items: center; justify-content: space-between; }
.bx-mark { font-size: 14px; font-weight: 650; font-stretch: 125%; letter-spacing: 0.02em; }
.bx-mode { padding: 1px 9px; border: 1px solid var(--bx-border-strong); border-radius: 999px; font-size: 11.5px; color: var(--bx-text-2); }
.bx-panel .bx-ask {
    align-self: flex-end;
    max-width: 86%;
    padding: 7px 11px;
    border-radius: 10px 10px 3px 10px;
    background: var(--bx-surface-2);
}

/* the step trace: numbered steps in a gutter, joined by one rule (cyan: Verse is acting) */
.bx-trace { position: relative; display: grid; gap: 10px; margin: 2px 0 0; padding: 0; list-style: none; }
.bx-trace::before {
    content: '';
    position: absolute;
    left: 10.5px;
    top: 11px;
    bottom: 11px;
    width: 1px;
    background: color-mix(in srgb, var(--bx-accent) 65%, transparent);
    transform-origin: top;
    animation: bx-rule var(--bx-T) linear both;
}
.bx-t { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; }
.bx-n {
    grid-row: 1 / span 2;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--bx-border-strong);
    border-radius: 50%;
    background: var(--bx-surface-0);
    color: var(--bx-text-2);
    font-size: 11px;
    font-weight: 600;
}
.bx-tt { grid-column: 2; font-weight: 600; }
.bx-td { grid-column: 2; color: var(--bx-text-3); font-size: 12.5px; }
.bx-t:nth-child(1) { animation: bx-t1 var(--bx-T) ease-out both; }
.bx-t:nth-child(2) { animation: bx-t2 var(--bx-T) ease-out both; }
.bx-t:nth-child(3) { animation: bx-t3 var(--bx-T) ease-out both; }
.bx-t-ask .bx-n { animation: bx-dot var(--bx-T) ease-out both; }

/* step 2: the question, then what came of it, in one cell so nothing below moves */
.bx-swap { position: relative; grid-column: 2; }
.bx-q {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--bx-warn) 45%, transparent);
    border-radius: 8px;
    background: var(--bx-warn-soft);
    opacity: 0;
    visibility: hidden;
    animation: bx-q var(--bx-T) ease-out both;
}
.bx-qt { font-size: 12.5px; }
.bx-btns { display: flex; gap: 6px; }
.bx-b { padding: 2px 9px; border: 1px solid var(--bx-border-strong); border-radius: 6px; background: var(--bx-surface-2); font-size: 11.5px; }
.bx-b-yes { animation: bx-yes var(--bx-T) ease-out both; }
.bx-after { display: block; animation: bx-after var(--bx-T) ease-out both; }

.bx-panel .bx-answer { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--bx-border); animation: bx-answer var(--bx-T) ease-out both; }
.bx-panel .bx-panel-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--bx-border); color: var(--bx-text-3); font-size: 11.5px; }

.bx-replay {
    margin-top: 14px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--bx-text-2);
    font: 500 14px var(--bx-font);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.bx-replay:hover { color: var(--bx-text); }

/* The timeline, 4.6 s: read (0.5 s), ask before clicking (1.3 s, amber), allowed (2.5 s), read the table (3.1 s),
   answer (3.7 s). Every element's own style is where it ends, so no animation means the finished turn. */
@keyframes bx-t1 { 0%, 11% { opacity: 0; transform: translateY(6px); } 19%, 100% { opacity: 1; transform: none; } }
@keyframes bx-t2 { 0%, 28% { opacity: 0; transform: translateY(6px); } 36%, 100% { opacity: 1; transform: none; } }
@keyframes bx-t3 { 0%, 67% { opacity: 0; transform: translateY(6px); } 75%, 100% { opacity: 1; transform: none; } }
@keyframes bx-answer { 0%, 80% { opacity: 0; transform: translateY(6px); } 89%, 100% { opacity: 1; transform: none; } }
@keyframes bx-rule { 0%, 11% { transform: scaleY(0); } 76%, 100% { transform: scaleY(1); } }
@keyframes bx-q {
    0%, 30% { opacity: 0; visibility: visible; }
    36%, 57% { opacity: 1; visibility: visible; }
    62%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes bx-after { 0%, 59% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes bx-yes {
    0%, 50% { background: var(--bx-surface-2); color: var(--bx-text); }
    52%, 58% { background: var(--bx-accent-strong); color: var(--bx-accent-contrast); }
    62%, 100% { background: var(--bx-surface-2); color: var(--bx-text); }
}
@keyframes bx-dot {
    0%, 29% { border-color: var(--bx-border-strong); color: var(--bx-text-2); background: var(--bx-surface-0); }
    32%, 57% { border-color: var(--bx-warn); color: var(--bx-warn); background: color-mix(in srgb, var(--bx-warn) 16%, var(--bx-surface-0)); }
    62%, 100% { border-color: var(--bx-border-strong); color: var(--bx-text-2); background: var(--bx-surface-0); }
}
@keyframes bx-ring {
    0%, 7% { box-shadow: inset 0 0 0 0 transparent; }
    11%, 29% { box-shadow: inset 0 0 0 2px var(--bx-accent); }
    32%, 57% { box-shadow: inset 0 0 0 2px var(--bx-warn); }
    61%, 90% { box-shadow: inset 0 0 0 2px var(--bx-accent); }
    97%, 100% { box-shadow: inset 0 0 0 0 transparent; }
}
@keyframes bx-yearly {
    0%, 29% { background: transparent; color: var(--bx-text-3); box-shadow: 0 0 0 0 transparent; }
    32%, 55% { background: transparent; color: var(--bx-text-2); box-shadow: 0 0 0 2px var(--bx-warn); }
    57%, 70% { background: var(--bx-accent-soft); color: var(--bx-accent); box-shadow: 0 0 0 2px var(--bx-accent); }
    77%, 100% { background: var(--bx-accent-soft); color: var(--bx-accent); box-shadow: 0 0 0 0 transparent; }
}
@keyframes bx-monthly { 0%, 55% { background: var(--bx-fill); color: var(--bx-text-2); } 58%, 100% { background: transparent; color: var(--bx-text-3); } }
@keyframes bx-price { 0%, 56% { width: 62%; } 63%, 100% { width: 46%; } }

.bx-still *,
.bx-still .bx-trace::before { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    .bx-demo *,
    .bx-demo .bx-trace::before { animation: none !important; }
}

/* ── the sections below: heading in a left column, text on the right ── */
.bx-section {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: 14px 56px;
    padding: 56px 0;
    border-bottom: 1px solid var(--bx-border);
}
.bx-section:last-child { border-bottom: 0; }
.bx-section > h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 620;
    font-stretch: 112%;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.bx-section-body { min-width: 0; }
.bx-text { margin: 0; max-width: 62ch; color: var(--bx-text-2); }
.bx-text + .bx-text { margin-top: 14px; }

/* each browser's steps: the extension's step trace again, a numbered gutter joined by one rule */
.bx-way-h {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.bx-steps { position: relative; max-width: 64ch; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: bx-step; }
.bx-steps::before {
    content: '';
    position: absolute;
    left: 15.5px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: var(--bx-border-strong);
}
.bx-steps li { position: relative; min-height: 32px; padding: 0 0 22px 52px; color: var(--bx-text-2); counter-increment: bx-step; }
.bx-steps li:last-child { padding-bottom: 0; }
.bx-steps li::before {
    content: counter(bx-step);
    position: absolute;
    left: 0;
    top: -2px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--bx-border-strong);
    border-radius: 50%;
    background: var(--bx-surface-0);
    color: var(--bx-text-2);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* the step where the browser asks something of you */
.bx-steps li.bx-attn::before { border-color: var(--bx-warn); color: var(--bx-warn); background: color-mix(in srgb, var(--bx-warn) 14%, var(--bx-surface-0)); }
.bx-steps strong { color: var(--bx-text); font-weight: 600; }

.bx code { padding: 2px 6px; border-radius: 5px; background: var(--bx-code); color: var(--bx-text); font: 0.86em var(--bx-mono); }
.bx kbd {
    padding: 1px 6px;
    border: 1px solid var(--bx-border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--bx-surface-1);
    color: var(--bx-text);
    font: 500 0.8em var(--bx-font);
}
.bx-copy {
    margin: 0 4px;
    padding: 1px 9px;
    border: 1px solid color-mix(in srgb, var(--bx-accent) 45%, transparent);
    border-radius: 6px;
    background: transparent;
    color: var(--bx-accent);
    font: 500 13px var(--bx-font);
    vertical-align: 1px;
    cursor: pointer;
}
.bx-copy:hover { background: var(--bx-accent-soft); }

.bx-rules { display: grid; max-width: 66ch; margin: 0; }
.bx-rules div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--bx-border); }
.bx-rules div:first-child { padding-top: 2px; border-top: 0; }
.bx-rules dt { font-weight: 600; }
.bx-rules dd { margin: 0; color: var(--bx-text-2); }

/* Without :has, every browser's button and steps show, each under its own heading. */
@supports not selector(:has(a)) {
    .bx .bx-download[data-for] { display: inline-flex; margin: 0 8px 8px 0; }
    .bx .bx-way[data-for] { display: block; }
    .bx .bx-way-h { position: static; width: auto; height: auto; margin: 26px 0 0; overflow: visible; clip: auto; font-size: 1rem; }
}

@media (max-width: 920px) {
    .bx-hero { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 12px; }
    .bx-section { grid-template-columns: minmax(0, 1fr); padding: 44px 0; }
}

@media (max-width: 560px) {
    body.bx { font-size: 16px; }
    .bx-top, main { padding-left: 16px; padding-right: 16px; }
    .bx-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .bx-site { display: none; }
    .bx-panel { border-left: 0; }
    .bx-rules div { grid-template-columns: minmax(0, 1fr); }
    .bx-steps li { padding-left: 46px; }
}