/* hoctutu trust pages: shared styles.
   This file is the source. build_legal.py copies it (and legal.js) into each page
   between the legal.css:begin / legal.css:end markers, so every page is self-contained.
   Edit here, then run:  python3 site/build_legal.py
   Tokens follow prototype/template.html: the flat paper palette, light only, with the brand's ink and
   warm red, on the plain-paper background ("Giấy ấm": one fibre tile, the same SVG as the app's, here as a
   data: URI; no gradient, glow, filter or blending). The header is the brand's icon and outlined wordmark
   (inline SVG written by build_legal.py; the wordmark is one ink: currentColor).
   No web fonts: these pages load nothing from any other site, so the stacks below
   use fonts already on the device. Each one listed renders Vietnamese correctly; Iowan Old Style
   and Charter do NOT (they drop the horn on ư/ơ), so never add them to the serif stack. */
:root{
  color-scheme:light;
  --font-display:Palatino,"Palatino Linotype","Book Antiqua","Noto Serif",Georgia,"Times New Roman",serif;
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --ground:#FFF5E8;
  --tile:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22 viewBox=%220 0 96 96%22%3E%3Cpath d=%22M5 13l2 -1M37 8l3 1M65 32l-2 2M13 54l3 0M47 73l2 -1M79 57l1 2M31 36l1 1M72 85l3 -1M9 88l2 1%22 stroke=%22%23E5DCD0%22 stroke-width=%22.8%22 fill=%22none%22/%3E%3C/svg%3E");
  --ink:#34252B; --ink-2:#5F4848; --ink-3:#5F4848;
  --hair:#D5C3B2;
  --sheet:#FFFCF6;
  --sunk:#F0E4D6;
  --raised:#FFFCF6;
  --accent:#A54135; --accent-soft:#F0E4D6;
  --link:#A54135;          /* links and the kicker sit on the opaque sheet; verify_flow measures them */
  --accent-text:#6B2824;   /* small accent text on the paper (the footer), as in the app */
  --focus:#34252B;
}
/* light only: like the app, the trust pages do not follow the device's dark setting (the app's dark themes are
   a choice made in its Settings; these pages have no theme switch) */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--ground) var(--tile) repeat;color:var(--ink);
  font:400 17px/1.65 var(--font-ui);overflow-x:hidden;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,p,ul,ol,dl,figure{margin:0}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:-60px;background:var(--ink);color:var(--ground);padding:10px 14px;border-radius:10px;z-index:10;text-decoration:none}
.skip:focus{top:12px}

/* language: with JS, <html data-lang> shows one language; without JS both show */
html[data-lang="vi"] [data-lang="en"],html[data-lang="en"] [data-lang="vi"]{display:none!important}
html:not([data-lang]) span[data-lang="vi"] + span[data-lang="en"]::before{content:" / "}

/* ---- layout ---- */
.wrap{width:100%;max-width:720px;margin:0 auto;padding:0 16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 0 8px}
/* the brand: the icon at its 48 px minimum, the wordmark at its 160 px minimum canvas (150 px of glyphs) */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:48px;border-radius:12px}
.brand-icon{display:block;flex:none;width:48px;height:48px}
.brand-wm{display:block;width:150px;height:auto}
.lang{display:none;padding:3px;border-radius:999px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--hair)}
html[data-lang] .lang{display:inline-flex}
.lang button{appearance:none;border:0;background:none;cursor:pointer;padding:0 14px;border-radius:999px;
  font:500 14px/1 var(--font-ui);color:var(--ink-2);min-height:44px;min-width:44px}
.lang button[aria-pressed="true"]{background:var(--raised);color:var(--ink);font-weight:650;box-shadow:inset 0 0 0 1px var(--hair)}

.doc{background:var(--sheet);border-radius:24px;box-shadow:inset 0 0 0 1px var(--hair);padding:28px 20px 32px;margin:12px 0 0}
@media (min-width:600px){.doc{padding:44px 48px 48px}}
.doc + .doc{margin-top:24px}
.kicker{font:600 13px/1.3 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
h1{font:500 clamp(32px,8.5vw,46px)/1.08 var(--font-display);letter-spacing:-.02em;margin:8px 0 10px;text-wrap:balance}
.meta{font-size:14px;color:var(--ink-3)}
.lede{font:400 19px/1.55 var(--font-display);color:var(--ink-2);margin-top:18px;max-width:38em}
h2{font:600 24px/1.25 var(--font-display);letter-spacing:-.01em;margin:40px 0 12px;text-wrap:balance}
.doc > h2:first-child{margin-top:0}
h3{font:600 17px/1.35 var(--font-ui);margin:24px 0 6px}
.doc p,.doc li,.doc dd{max-width:40em}
.doc p + p{margin-top:12px}
.doc ul,.doc ol{padding-left:1.3em;margin:10px 0 0}
.doc li + li{margin-top:6px}
.doc li::marker{color:var(--accent)}
strong{font-weight:650}
code{font:400 .9em/1 var(--font-mono);background:var(--sunk);padding:2px 5px;border-radius:5px}

/* the plain-language summary box */
.summary{margin:26px 0 8px;padding:22px 20px;border-radius:20px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--hair)}
.summary .q{font:600 15px/1.35 var(--font-ui);color:var(--ink-2);margin:0}
.summary .a{font:italic 500 clamp(30px,8vw,40px)/1.1 var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:4px 0 14px}
.summary .a::after{content:"";display:block;width:56px;height:3px;border-radius:3px;background:var(--accent);margin-top:12px}
.summary ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.summary li{position:relative;padding-left:26px;max-width:none}
.summary li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.summary li + li{margin-top:0}

.endnote{margin-top:28px}
.note{margin-top:16px;padding:14px 16px;border-left:3px solid var(--accent);background:var(--sunk);border-radius:0 12px 12px 0}

/* credits list */
.credit{padding:18px 0;border-top:1px solid var(--hair)}
.credit:first-of-type{border-top:0}
.credit h3{margin:0 0 4px;font:600 19px/1.3 var(--font-display)}
.credit .lic{display:inline-block;margin:2px 0 8px;font:600 13px/1.3 var(--font-ui);padding:4px 10px;border-radius:999px;background:var(--sunk);color:var(--ink-2)}
pre.licence{white-space:pre-wrap;word-break:break-word;font:400 13px/1.55 var(--font-mono);color:var(--ink-2);background:var(--sunk);padding:14px;border-radius:12px;margin:6px 0 0;max-width:100%}

/* footer */
.foot{padding:28px 0 40px;font-size:15px;color:var(--ink-2)}
.nav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;text-decoration:none}
.nav .home a{font-weight:600;color:var(--ink)}
.foot .small{margin-top:10px;font-size:13px;color:var(--ink-3)}
.foot .small a{color:var(--accent-text)}

@media print{
  body::before,.lang,.skip{display:none!important}
  body{background:#fff;color:#000}
  .doc{box-shadow:none;padding:0}
}