/* ── The two Chrome Web Store pages (plan 2026-10-27, Task 7) ─────────────────
   /welcome-extension  welcome_extension.php + views/partials/welcome-extension-body.php
   /privacy            privacy.php + views/partials/privacy-body.php

   ONE SHEET FOR BOTH because they are one piece of copy: the privacy page
   prints the welcome card's sentences word for word, and the two should read
   as the same voice in the same type. Welcome rules are .wx-*, privacy rules
   are .pv-*.

   NO NEW COLOURS AND NO HARDCODED THEME VALUES. Every surface, border and text
   colour is one of the app's tokens (--card-bg, --border-color, --text-primary,
   --text-muted, --bs-primary, --success), all of which css/dark-mode.css
   already flips on .dark-mode, so neither page can grow a dark-mode bug of its
   own. The micro-label is the family's (the twin of .hh-k / .sg-k / .lcg-k). */

/* ── welcome card ─────────────────────────────────────────────────────────── */

.wx-page {
    max-width: 720px;
    margin: 2rem auto;
}

.wx-card {
    border-radius: var(--card-radius);
    box-shadow: var(--elev-2);
}

.wx-card .card-body {
    padding: 1.75rem;
}

.wx-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.wx-title-icon {
    color: var(--success);
}

/* LABELS, never sentences: uppercase, tracked, monospace. */
.wx-k {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.5rem 0 0.5rem;
}

.wx-list,
.wx-steps {
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.wx-list li,
.wx-steps li {
    margin-bottom: 0.35rem;
    line-height: var(--lh-base);
}

/* "Nothing from your terminal is sent until the extension is signed in" is
   the sentence a worried member is looking for, so it is the one that is not
   body weight. */
.wx-starts {
    font-weight: 600;
}

/* The switch sits in its own tinted box so it reads as the control the list
   above it talks about ("With the Share CATS screens switch on"). Bootstrap's .form-switch
   pulls the input left by 2.5em, so the left padding keeps that room. */
.wx-switch.form-check {
    padding: 0.75rem 1rem 0.75rem 3.5em;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bs-primary) 6%, var(--card-bg));
}

.wx-switch .form-check-label {
    font-weight: 600;
}

.wx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1.5rem;
}

/* Text links on both pages take the app's link token, not Bootstrap's default
   blue: measured 2026-10-27, Bootstrap's #0d6efd sits at 3.9:1 on the dark
   card (below 4.5:1), --primary-blue at 5.2:1 light and 7.0:1 dark. */
.wx-privacy-link,
.pv-page a {
    color: var(--primary-blue);
}

.wx-connect {
    margin-top: 1.25rem;
}

.wx-connect-missing {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* The answer to a Connect: body colour, because it is the line the member
   pressed the button to read. */
.wx-connect-result {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

/* ── privacy page ─────────────────────────────────────────────────────────── */

/* No navbar on this page (a signed-out reader has none), so one line of brand
   stands in for it, on the same column as the text. */
.pv-brand {
    max-width: 760px;
    margin: 1.5rem auto 0;
    padding: 0 1.5rem;
}

.pv-brand a {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}

.pv-brand a:hover,
.pv-brand a:focus-visible {
    color: var(--bs-primary);
}

.pv-page {
    max-width: 760px;
    margin: 0 auto 2rem;
}

.pv-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 1.25rem 0 0.25rem;
}

.pv-updated {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.pv-page h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.75rem 0 0.5rem;
}

.pv-page p,
.pv-page li {
    line-height: var(--lh-base);
}

.pv-page ul {
    padding-left: 1.25rem;
}

.pv-page li {
    margin-bottom: 0.35rem;
}