/**
 * Standalone pages — About, Contact, the legal documents.
 *
 * THE FILENAME CARRIES THE DESIGN VERSION, same rule as site-ui-v1.css:
 * Cloudflare on this site does not vary its cache on ?ver=, so a redesign
 * ships as site-ui-pages-v2.css with AIPR_UI_Assets::CSS_PAGES updated.
 *
 * Loaded only on a page this plugin renders, and only ever alongside
 * site-ui-v1.css — page takeover requires the site UI to be active — so the
 * tokens and @font-face declarations are taken as given here.
 *
 * Scope: everything under .aipr-ui-pg. bimber styles bare h1/h2/p/ul/li/a
 * aggressively and the Customizer's "additional CSS" adds !important rules of
 * its own, so nothing here relies on a browser default.
 */

.aipr-ui-pg {
    /* The reading column. 800px is not a fresh choice — it is the width the
       Customizer already locks .single-post .entry-content to, so a policy
       page and an article measure the same. */
    --aipr-ui-read: 800px;

    display: block;
    background: var(--aipr-ui-paper);
    color: var(--aipr-ui-body);
    font-family: var(--aipr-ui-sans);
}

.aipr-ui-pg *,
.aipr-ui-pg *::before,
.aipr-ui-pg *::after {
    box-sizing: border-box;
}

.aipr-ui-pg a {
    color: inherit;
    text-decoration: none;
}

/* ─── Shared document layout ──────────────────────────────────
   The one template that is not bespoke: legal text, read top to bottom or
   landed in the middle of from an anchor link. */

.aipr-ui-doc {
    max-width: var(--aipr-ui-read);
    margin: 0 auto;
    padding: 56px var(--aipr-ui-pad) 96px;
}

.aipr-ui-doc-head {
    margin: 0 0 40px;
    padding: 0 0 24px;
    border-bottom: 1px solid var(--aipr-ui-line);
}

.aipr-ui-doc-h1 {
    margin: 0;
    font-family: var(--aipr-ui-sans);
    font-size: 44px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--aipr-ui-ink);
}

/* The revision date is the single most consulted fact on a policy page —
   "is this the version I agreed to" — so it is a fixed element of the
   template rather than a bold line someone remembered to type. */
.aipr-ui-doc-updated {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aipr-ui-faint);
}

.aipr-ui-doc-body {
    font-size: 17px;
    line-height: 1.75;
}

.aipr-ui-doc-body p {
    margin: 0 0 20px;
    color: var(--aipr-ui-body);
}

/* Lede: the paragraph before the first heading carries the document's scope,
   and on both of these pages it is the one paragraph a reader actually has to
   read. */
.aipr-ui-doc-body > p:first-child {
    font-size: 19px;
    line-height: 1.65;
    color: var(--aipr-ui-mute);
    margin-bottom: 32px;
}

.aipr-ui-doc-body h2 {
    margin: 48px 0 14px;
    font-family: var(--aipr-ui-sans);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--aipr-ui-ink);
}

.aipr-ui-doc-body h3 {
    margin: 32px 0 10px;
    font-family: var(--aipr-ui-sans);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--aipr-ui-ink);
}

/* Anchored headings are landed on from outside links, so leave the sticky
   header room rather than putting the heading under it. */
.aipr-ui-doc-body h2[id],
.aipr-ui-doc-body h3[id] {
    scroll-margin-top: calc(var(--aipr-ui-h) + var(--aipr-ui-top) + 16px);
}

.aipr-ui-doc-body ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.aipr-ui-doc-body li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 22px;
    list-style: none;
}

.aipr-ui-doc-body li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: .68em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--aipr-ui-accent);
}

.aipr-ui-doc-body a {
    color: var(--aipr-ui-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    /* Long addresses and URLs must not push the column wider than the page. */
    overflow-wrap: anywhere;
}

.aipr-ui-doc-body a:hover {
    color: var(--aipr-ui-ink);
}

.aipr-ui-doc-body strong {
    font-weight: 600;
    color: var(--aipr-ui-ink);
}

.aipr-ui-doc-body hr {
    margin: 40px 0;
    border: 0;
    border-top: 1px solid var(--aipr-ui-line);
}

@media (max-width: 600px) {
    .aipr-ui-doc {
        padding: 36px 20px 72px;
    }
    .aipr-ui-doc-h1 {
        font-size: 32px;
    }
    .aipr-ui-doc-body {
        font-size: 16px;
    }
    .aipr-ui-doc-body > p:first-child {
        font-size: 17px;
    }
    .aipr-ui-doc-body h2 {
        font-size: 21px;
        margin-top: 40px;
    }
}

/* ─── Brand ───────────────────────────────────────────────────
   Not a document — a list of things to take. The layout is a label column and
   a content column, repeated, so a reader scanning for "colour" or "name"
   finds it down the left edge without a table of contents. Everything is flat:
   one hairline between blocks, no cards, no radius, no shadow. The only
   filled shapes on the page are the logo previews and the colour swatches,
   which is the whole point of it. */

.aipr-ui-brand {
    max-width: 1000px;
    margin: 0 auto;
    padding: 48px var(--aipr-ui-pad) 96px;
}

.aipr-ui-brand-hero {
    padding: 0 0 40px;
}

.aipr-ui-brand-h1 {
    margin: 0;
    font-family: var(--aipr-ui-sans);
    font-size: 44px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-dek {
    margin: 14px 0 0;
    max-width: 46ch;
    font-size: 19px;
    line-height: 1.5;
    color: var(--aipr-ui-mute);
    text-wrap: pretty;
}

.aipr-ui-brand-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 28px 0 0;
}

.aipr-ui-brand-actions-note {
    max-width: 48ch;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--aipr-ui-mute);
}

.aipr-ui-brand-actions-note a {
    color: var(--aipr-ui-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

/* Same button the header uses: ink, square, no shadow.
   The element selector is load-bearing: .aipr-ui-pg a sets color:inherit at
   (0,1,1) and a bare .aipr-ui-brand-btn at (0,1,0) loses to it, which paints
   ink text on an ink button. */
.aipr-ui-pg a.aipr-ui-brand-btn {
    display: inline-block;
    flex: 0 0 auto;
    padding: 11px 18px;
    background: var(--aipr-ui-ink);
    color: var(--aipr-ui-paper);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.005em;
    transition: opacity 120ms ease;
}

.aipr-ui-pg a.aipr-ui-brand-btn:hover {
    opacity: .85;
}

/* ─── Blocks ─────────────────────────────────────────────── */

.aipr-ui-brand-blk {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    padding: 34px 0;
    border-top: 1px solid var(--aipr-ui-line);
}

.aipr-ui-brand-blk-head h2 {
    margin: 0 0 6px;
    font-family: var(--aipr-ui-sans);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-blk-head p {
    margin: 0;
    max-width: 26ch;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--aipr-ui-faint);
}

/* ─── Asset rows ─────────────────────────────────────────── */

.aipr-ui-brand-asset {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--aipr-ui-line);
}

.aipr-ui-brand-asset:first-child {
    padding-top: 0;
}

.aipr-ui-brand-asset:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* The preview plate is the only place on the site where the logo is shown as
   an object rather than used as one, so it gets a frame and nothing else. */
.aipr-ui-brand-pv {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    padding: 14px 22px;
    border: 1px solid var(--aipr-ui-line);
    background: var(--aipr-ui-paper);
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-pv svg,
.aipr-ui-brand-pv img {
    display: block;
    max-width: 100%;
    height: auto;
}

.aipr-ui-brand-pv--logo-reversed,
.aipr-ui-brand-pv--wordmark-reversed {
    background: var(--aipr-ui-band);
    border-color: var(--aipr-ui-band);
    color: #fff;
    --aipr-ui-wedge: #a99bff;
}

/* The one-colour variant: the wedge stops being the brand colour. */
.aipr-ui-brand-pv--logo-black {
    --aipr-ui-wedge: var(--aipr-ui-ink);
}

.aipr-ui-brand-asset-meta b {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-asset-meta span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--aipr-ui-faint);
}

.aipr-ui-brand-files {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.aipr-ui-pg .aipr-ui-brand-chip {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--aipr-ui-ink);
    background: none;
    color: var(--aipr-ui-ink);
    font-family: var(--aipr-ui-sans);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.aipr-ui-pg .aipr-ui-brand-chip:hover {
    background: var(--aipr-ui-ink);
    color: var(--aipr-ui-paper);
}

.aipr-ui-pg .aipr-ui-brand-chip--quiet {
    border-color: var(--aipr-ui-line);
    color: var(--aipr-ui-mute);
}

.aipr-ui-pg .aipr-ui-brand-copied,
.aipr-ui-pg .aipr-ui-brand-copied:hover {
    border-color: var(--aipr-ui-accent);
    background: none;
    color: var(--aipr-ui-accent);
}

.aipr-ui-brand-copied::after {
    content: ' ✓';
}

/* ─── Colour ─────────────────────────────────────────────── */

.aipr-ui-brand-colours {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.aipr-ui-brand-colour {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--aipr-ui-line);
    background: none;
    font-family: var(--aipr-ui-sans);
    text-align: left;
    cursor: pointer;
}

.aipr-ui-brand-colour i {
    display: block;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
}

.aipr-ui-brand-colour b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-colour code {
    display: block;
    margin-top: 1px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--aipr-ui-mute);
}

.aipr-ui-brand-colour.aipr-ui-brand-copied {
    border-color: var(--aipr-ui-accent);
}

.aipr-ui-brand-line {
    margin: 16px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--aipr-ui-mute);
}

/* ─── Rules and don'ts ───────────────────────────────────── */

.aipr-ui-brand-rules {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aipr-ui-brand-rules li {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--aipr-ui-line);
    font-size: 15px;
    line-height: 1.5;
    list-style: none;
}

.aipr-ui-brand-rules li:first-child {
    padding-top: 0;
}

.aipr-ui-brand-rules li:last-child {
    border-bottom: none;
}

.aipr-ui-brand-rules b {
    font-weight: 600;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-rules span {
    color: var(--aipr-ui-body);
}

.aipr-ui-brand-donts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 18px 0 0;
}

.aipr-ui-brand-dont {
    width: 156px;
    margin: 0;
    border: 1px solid var(--aipr-ui-line);
}

.aipr-ui-brand-dont-st {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 12px;
    overflow: hidden;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-dont-st svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.aipr-ui-brand-dont figcaption {
    padding: 6px 10px;
    border-top: 1px solid var(--aipr-ui-line);
    font-size: 12px;
    color: var(--aipr-ui-mute);
}

.aipr-ui-brand-dont figcaption::before {
    content: '✕ ';
    font-weight: 700;
    color: #b42318;
}

/* The three misuses, shown rather than described — each is the real wordmark
   put through the thing the rule forbids. */
.aipr-ui-brand-dont--stretched svg {
    transform: scaleX(1.45);
}

.aipr-ui-brand-dont--recoloured {
    color: #e8590c;
}

.aipr-ui-brand-dont--outlined {
    color: var(--aipr-ui-paper);
}

.aipr-ui-brand-dont--outlined svg {
    filter: drop-shadow(0 0 1px var(--aipr-ui-ink)) drop-shadow(0 0 1px var(--aipr-ui-ink))
        drop-shadow(0 0 1px var(--aipr-ui-ink));
}

/* ─── Name, descriptions, steps ──────────────────────────── */

.aipr-ui-brand-name {
    margin: 0;
    max-width: 60ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--aipr-ui-body);
}

.aipr-ui-brand-name b {
    font-weight: 600;
    color: var(--aipr-ui-ink);
}

.aipr-ui-brand-name s {
    color: var(--aipr-ui-faint);
}

.aipr-ui-brand-copy {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid var(--aipr-ui-line);
}

.aipr-ui-brand-copy:first-child {
    padding-top: 0;
}

.aipr-ui-brand-copy:last-child {
    border-bottom: none;
}

.aipr-ui-brand-copy-lab {
    padding-top: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aipr-ui-accent);
}

.aipr-ui-brand-copy p {
    margin: 0;
    max-width: 66ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--aipr-ui-body);
}

.aipr-ui-brand-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: aipr-ui-brand-step;
}

.aipr-ui-brand-steps li {
    counter-increment: aipr-ui-brand-step;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--aipr-ui-line);
    font-size: 15px;
    line-height: 1.5;
    list-style: none;
}

.aipr-ui-brand-steps li:first-child {
    padding-top: 0;
}

.aipr-ui-brand-steps li:last-child {
    border-bottom: none;
}

.aipr-ui-brand-steps li::before {
    content: counter(aipr-ui-brand-step, decimal-leading-zero);
    padding-top: 3px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--aipr-ui-faint);
}

.aipr-ui-brand-steps code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13.5px;
    background: var(--aipr-ui-tint);
    color: var(--aipr-ui-ink);
    padding: .1em .4em;
    overflow-wrap: anywhere;
}

.aipr-ui-brand-after {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--aipr-ui-faint);
}

.aipr-ui-brand-legal {
    margin: 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--aipr-ui-line);
    max-width: 80ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--aipr-ui-faint);
}

.aipr-ui-brand :focus-visible {
    outline: 2px solid var(--aipr-ui-accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .aipr-ui-pg a.aipr-ui-brand-btn,
    .aipr-ui-pg .aipr-ui-brand-chip {
        transition: none;
    }
}

/* ─── Narrow ─────────────────────────────────────────────── */

@media (max-width: 860px) {
    .aipr-ui-brand-blk {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .aipr-ui-brand-blk-head p {
        max-width: 52ch;
    }
    .aipr-ui-brand-rules li {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

@media (max-width: 600px) {
    .aipr-ui-brand {
        padding: 36px 20px 72px;
    }
    .aipr-ui-brand-h1 {
        font-size: 32px;
    }
    .aipr-ui-brand-dek {
        font-size: 17px;
    }
    /* The asset row stacks: plate, then what it is, then the files. Three
       columns at 375px would put two-character chips under a logo squeezed to
       80px, which is neither a preview nor a button. */
    .aipr-ui-brand-asset {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 0;
    }
    .aipr-ui-brand-files {
        justify-content: flex-start;
    }
    .aipr-ui-brand-copy {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .aipr-ui-brand-dont {
        width: calc(50% - 7px);
    }
}