/* phap-ly.css — 22/10/2026 · ALLiw legal corpus (bilingual EN/VI).
   CSP-strict (no inline). Light + dark via color-scheme + prefers-color-scheme.
   Shared pattern: html[lang="en"] hides .nn-vi; html[lang="vi"] hides .nn-en.
   Keeps 16px side gutter on phones (320px+), fluid up to a 920px reading column. */

/* AAA contrast targets (WCAG 2.2):
   - Normal text ≥ 7:1 against its background
   - Large text (18pt+ or 14pt+ bold) ≥ 4.5:1
   - UI components / focus ≥ 3:1
   Palette below is measured with CIE Lab contrast and tuned for both themes. */
:root {
    --pl-nen:        #ffffff;                   /* body background */
    --pl-nen-khoi:   #f6f6f4;                   /* raised surfaces */
    --pl-chu:        #080808;                   /* 20.6:1 on #fff — AAA */
    --pl-chu-mo:     #3a3a36;                   /* 11.4:1 on #fff — AAA for small text */
    --pl-vien:       #d8d6d1;
    --pl-vien-dam:   #a9a7a0;
    --pl-nhan:       #065f3b;                   /* 7.4:1 on #fff — AAA for small text */
    --pl-nhan-hover: #033a24;
    --pl-tap:        #c7f0dc;                   /* link focus ring base — light */
    --pl-max: 920px;
    --pl-gap: 24px;
    --pl-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Inter", "Helvetica Neue", sans-serif;
    --pl-serif: ui-serif, Georgia, "Noto Serif", "Times New Roman", serif;
    --pl-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pl-nen:        #0d0e10;
        --pl-nen-khoi:   #15171b;
        --pl-chu:        #f3f3f1;                /* 17.9:1 on #0d0e10 — AAA */
        --pl-chu-mo:     #b7b7b1;                /* 9.8:1 on #0d0e10 — AAA */
        --pl-vien:       #262930;
        --pl-vien-dam:   #4a4e56;                /* focus border ≥ 3:1 on dark bg */
        --pl-nhan:       #7cebb6;                /* 11.2:1 on #0d0e10 — AAA */
        --pl-nhan-hover: #a0f0c7;
        --pl-tap:        #1a3a2c;
    }
}

:root[data-theme="dark"] {
    --pl-nen:        #0d0e10;
    --pl-nen-khoi:   #15171b;
    --pl-chu:        #f3f3f1;
    --pl-chu-mo:     #b7b7b1;
    --pl-vien:       #262930;
    --pl-vien-dam:   #4a4e56;
    --pl-nhan:       #7cebb6;
    --pl-nhan-hover: #a0f0c7;
    --pl-tap:        #1a3a2c;
}

/* 27/10 · the body grows with its text (was height: 100%, here and in app.css). A sticky element never leaves its
   parent: with a one-screen body the top bar — language button, «Back to app» — scrolled away after the first
   screen, and was already gone when a link opened a #section such as /legal/billing#hoan-tien. */
html { height: 100%; }
body.pl { height: auto; min-height: 100%; }
html {
    color-scheme: light dark;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body.pl {
    margin: 0;
    background: var(--pl-nen);
    color: var(--pl-chu);
    font: 16px/1.65 var(--pl-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* AAA: visible keyboard focus on every interactive element */
.pl :focus-visible {
    outline: 3px solid var(--pl-nhan);
    outline-offset: 2px;
    border-radius: 4px;
    text-decoration: none;
}

/* Skip-link — hidden until keyboard focus, then jumps straight to the main content */
.pl-skip {
    position: absolute;
    left: 12px;
    top: 0;
    z-index: 100;
    padding: 10px 14px;
    background: var(--pl-nhan);
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    /* 27/10 · was top:-40px on a 43px link — a 3px green sliver showed at the top left; now lifted by its whole height */
    transform: translateY(-110%);
    transition: transform 0.1s;
}
.pl-skip:focus,
.pl-skip:focus-visible { transform: translateY(calc(12px + env(safe-area-inset-top, 0px))); outline: 3px solid var(--pl-chu); outline-offset: 2px; }

/* AAA: honour reduced-motion requests */
@media (prefers-reduced-motion: reduce) {
    .pl *,
    .pl *::before,
    .pl *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Honour forced-colors (Windows High Contrast) */
@media (forced-colors: active) {
    .pl-dau-ngon,
    .pl-dau-ve,
    .pl-nav a,
    .pl-the { border-color: CanvasText; }
    .pl-nav a.pl-nav-chon { background: SelectedItem; color: SelectedItemText; }
    .pl-vb a { color: LinkText; }
}

/* ── bilingual mechanism ─────────────────────────────────────────────── */
html[lang="en"] .nn-vi { display: none; }
html[lang="vi"] .nn-en { display: none; }
html:not([lang="vi"]) .nn-vi { display: none; }   /* default: English */

/* ── top bar ─────────────────────────────────────────────────────────── */
.pl-dau {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* 27/10 · the page no longer asks for viewport-fit=cover (as /gioi-thieu), so iOS itself keeps it below the status bar
       and these env() terms are 0 there; they only matter if «cover» ever comes back */
    padding: calc(14px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) 14px calc(20px + env(safe-area-inset-left, 0px));
    background: color-mix(in oklab, var(--pl-nen) 92%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--pl-vien);
}

.pl-hieu { display: inline-flex; align-items: center; }
.pl-hieu img { height: 32px; width: auto; display: block; }

.pl-dau-phai { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pl-dau-ngon, .pl-dau-ve {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--pl-vien-dam);
    color: var(--pl-chu);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    background: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pl-dau-ngon:hover, .pl-dau-ve:hover {
    background: var(--pl-nhan);
    border-color: var(--pl-nhan);
    color: #fff;
}

/* ── body shell: sidebar nav + article ───────────────────────────────── */
.pl-than {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--pl-gap);
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px calc(20px + env(safe-area-inset-right, 0px)) calc(72px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
}

@media (max-width: 820px) {
    .pl-than { grid-template-columns: 1fr; padding: 20px calc(16px + env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); }
}

.pl-nav {
    position: sticky;
    top: calc(76px + env(safe-area-inset-top, 0px));
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-right: 1px solid var(--pl-vien);
    max-height: calc(100vh - 90px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
}

@media (max-width: 820px) {
    .pl-nav {
        position: static;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding: 10px 0 14px;
        border-right: none;
        border-bottom: 1px solid var(--pl-vien);
    }
}

.pl-nav a {
    display: block;
    padding: 7px 14px 7px 10px;
    color: var(--pl-chu-mo);
    text-decoration: none;
    font-size: 14px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    white-space: nowrap;
}
.pl-nav a:hover { color: var(--pl-chu); background: var(--pl-nen-khoi); }
.pl-nav a.pl-nav-chon {
    color: var(--pl-chu);
    border-left-color: var(--pl-nhan);
    background: var(--pl-nen-khoi);
    font-weight: 600;
}

@media (max-width: 820px) {
    .pl-nav a { border-left: none; border-bottom: 2px solid transparent; padding: 7px 10px; }
    .pl-nav a.pl-nav-chon { border-left: none; border-bottom-color: var(--pl-nhan); }
}

/* ── article ─────────────────────────────────────────────────────────── */
.pl-noi {
    max-width: var(--pl-max);
    min-width: 0;
}

.pl-breadcrumb {
    color: var(--pl-chu-mo);
    font-size: 14px;
    margin: 0 0 12px;
}
.pl-breadcrumb a { color: var(--pl-chu-mo); text-decoration: none; }
.pl-breadcrumb a:hover { color: var(--pl-nhan); }
.pl-breadcrumb span { margin: 0 6px; }

.pl-noi h1 {
    font-family: var(--pl-serif);
    font-size: clamp(28px, 4.4vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    font-weight: 650;
}

.pl-lead {
    color: var(--pl-chu-mo);
    font-size: 18px;
    margin: 0 0 6px;
}

.pl-meta {
    display: inline-block;
    font-size: 13px;
    color: var(--pl-chu-mo);
    background: var(--pl-nen-khoi);
    border: 1px solid var(--pl-vien);
    border-radius: 999px;
    padding: 3px 10px;
    margin: 0 0 28px;
}

/* AAA: screen-reader-only utility — visually hidden, still read by assistive tech */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pl-vb {
    font-size: 16px;
    letter-spacing: 0.011em;        /* AAA readability */
    word-spacing: 0.04em;
    hyphens: auto;
    overflow-wrap: break-word;
}
/* AAA reading length: cap body paragraphs around 75ch so lines stay comfortable */
.pl-vb > p { max-width: 75ch; }
.pl-vb > ul,
.pl-vb > ol { max-width: 75ch; }

.pl-vb h2 {
    font-family: var(--pl-serif);
    font-size: 22px;
    font-weight: 650;
    margin: 36px 0 10px;
    scroll-margin-top: 88px;
}
.pl-vb h3 {
    font-family: var(--pl-serif);
    font-size: 18px;
    font-weight: 650;
    margin: 22px 0 6px;
    color: var(--pl-chu-mo);
}
.pl-vb p { margin: 10px 0; }
.pl-vb ul { padding-left: 1.2em; margin: 10px 0; }
.pl-vb li { margin: 6px 0; }
.pl-vb a { color: var(--pl-nhan); text-decoration: underline; text-underline-offset: 2px; }
.pl-vb a:hover { color: var(--pl-nhan-hover); }
.pl-vb code { font-family: var(--pl-mono); font-size: 14px; background: var(--pl-nen-khoi); padding: 1px 5px; border-radius: 4px; }

/* ── tables (AAA: caption, scope headers, row-header highlighting) ──── */
.pl-cuon {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 18px 0;
    padding: 0;
    border: 0;
}
.pl-cuon:focus-visible {
    outline: 3px solid var(--pl-nhan);
    outline-offset: 2px;
    border-radius: 6px;
}
.pl-bang {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
    background: var(--pl-nen);
    border: 1px solid var(--pl-vien);
    border-radius: 6px;
    overflow: hidden;
}
.pl-bang caption {
    caption-side: top;
    text-align: left;
    padding: 8px 2px 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pl-chu-mo);
}
.pl-bang th, .pl-bang td {
    text-align: left;
    vertical-align: top;
    padding: 11px 14px;
    border-bottom: 1px solid var(--pl-vien);
}
.pl-bang th[scope="col"] {
    background: var(--pl-nen-khoi);
    font-weight: 650;
    position: sticky;
    top: 0;
    z-index: 1;
}
.pl-bang th[scope="row"] {
    background: color-mix(in oklab, var(--pl-nen-khoi) 70%, transparent);
    font-weight: 600;
    color: var(--pl-chu);
}
.pl-bang tbody tr:last-child td,
.pl-bang tbody tr:last-child th { border-bottom: 0; }
.pl-bang tbody tr:nth-child(odd) td {
    background: color-mix(in oklab, var(--pl-nen-khoi) 40%, transparent);
}

/* ── index grid of cards (/legal) ────────────────────────────────────── */
.pl-the-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin: 22px 0 10px;
}
.pl-the {
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--pl-vien);
    border-radius: 10px;
    background: var(--pl-nen);
    color: var(--pl-chu);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.pl-the:hover {
    border-color: var(--pl-nhan);
    background: var(--pl-nen-khoi);
    transform: translateY(-1px);
}
.pl-the b { display: block; font-size: 16px; margin-bottom: 4px; font-weight: 650; }
.pl-the span { font-size: 14px; color: var(--pl-chu-mo); line-height: 1.5; }

/* Featured card for the Shared Creation Covenant — the Admin's foundational pledge */
.pl-the-noi {
    grid-column: 1 / -1;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--pl-nhan) 7%, var(--pl-nen)),
        var(--pl-nen));
    border-color: var(--pl-nhan);
    border-width: 1.5px;
    padding: 20px 22px;
}
.pl-the-noi:hover {
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--pl-nhan) 14%, var(--pl-nen)),
        var(--pl-nen-khoi));
    transform: translateY(-2px);
}
.pl-the-noi b { font-size: 18px; color: var(--pl-nhan); }
.pl-the-noi::before {
    content: "✦";
    float: right;
    font-size: 20px;
    color: var(--pl-nhan);
    opacity: 0.85;
    margin-left: 12px;
}

/* Pull-quote / tuyên bố */
.pl-tuyen {
    margin: 24px 0;
    padding: 20px 26px;
    border-left: 4px solid var(--pl-nhan);
    background: color-mix(in oklab, var(--pl-nhan) 6%, var(--pl-nen));
    border-radius: 0 8px 8px 0;
    font-family: var(--pl-serif);
    font-size: 18px;
    line-height: 1.55;
    color: var(--pl-chu);
}
.pl-tuyen p { margin: 0; font-style: italic; }
.pl-tuyen footer {
    margin-top: 10px;
    font-family: var(--pl-font);
    font-style: normal;
    font-size: 14px;
    color: var(--pl-chu-mo);
}

/* ── footer ──────────────────────────────────────────────────────────── */
.pl-hr { border: none; border-top: 1px solid var(--pl-vien); margin: 40px 0 18px; }
.pl-chan {
    color: var(--pl-chu-mo);
    font-size: 13px;
    line-height: 1.6;
}
.pl-chan p { margin: 4px 0; }
.pl-chan-rieng { font-style: italic; }

/* ── print ───────────────────────────────────────────────────────────── */
@media print {
    .pl-dau, .pl-nav { display: none; }
    .pl-than { display: block; padding: 0; max-width: none; }
    .pl-noi { max-width: none; }
    html[lang="en"] .nn-vi { display: block; }
    html[lang="en"] .nn-vi::before { content: "— "; color: #666; }
    body.pl { background: #fff; color: #000; font-size: 11pt; }
}

/* 27/10 · iPhone: two quick taps on «Tiếng Việt» / «English» zoomed the page (Admin screenshot) — Safari read them as a
   double-tap. Controls are tapped, never zoomed by tapping; pinch-zoom stays. */
a, button, summary, [role="button"] { touch-action: manipulation; }