/* ===========================================================================
   VicPaste — vicpaste.victech.my
   Shared chrome for index.html / privacy.html / terms.html.

   Colour is NOT chosen here. Every value below is lifted from the locked
   VicPaste brand source and is not to be re-picked by hand:
     _brand/vic-wordmark-20260908/assets/tokens.json   (surface / ink / gold / cyan)
     VicPaste/worker/src/pages.ts                      (the shipped /privacy /terms shell)
   Semantics, likewise from the product itself (docs/design/<screen>/README.md and the
   real UI):  GOLD = 收 / copy-onto-this-device.  CYAN = 发 / send-from-here.
   Those two never swap, and neither is used as generic decoration.
   =========================================================================== */

:root{
  --bg:#08101F;          /* surface — deep navy, deliberately NOT near-black */
  --panel:#0C1524;       /* surfaceContainer */
  --panel2:#101B2E;      /* surfaceContainerHigh */
  --line:#1E2A42;        /* outlineVariant */
  /* The 48-hour rail's own two values. --line is a border colour: far too
     quiet to carry 48 ticks, which is why the signature has its own pair. */
  --tick:#2C3B58;        /* every hour */
  --tick6:#4A5C82;       /* every sixth hour */
  --ink:#F2F5FA;         /* onSurface */
  --ink2:#B4BECD;        /* onSurfaceVariant */
  --dim:#7C8798;         /* outline — secondary, still 5.2:1 on --bg */
  --cyan:#2FD3E0;        /* VicPaste product colour (hue 184) */
  --cyan-deep:#0E7F8C;
  --gold:#F5B841;        /* family gold */
  --radius:16px;
  --lat:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --han:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--lat),var(--han);
  font-size:16px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Chinese sets looser. keep-all stops a heading breaking mid-word — it may only
   break at 、,。 — but it is deliberately NOT applied to body copy: a long Han
   run with no punctuation then becomes one unbreakable unit and pushes the page
   sideways (measured: a 327px column holding a 420px paragraph at 390 wide).
   Headings are short and punctuated; paragraphs are not. */
html[lang^="zh"] body{line-height:1.85}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3{word-break:keep-all}

img{max-width:100%;display:block}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ── machine voice ─────────────────────────────────────────────────────────
   mono is reserved for what the MACHINE says: device names, sizes, timings,
   registration numbers, section indices. Human sentences stay in the sans. */
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
      text-transform:uppercase;color:var(--dim)}
.mono-n{font-family:var(--mono);letter-spacing:0;text-transform:none}

h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.14}
h1{font-size:clamp(2.05rem,5.6vw,3.5rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:1.2}
h3{font-size:1.03rem;line-height:1.4}
p{margin:0}
.lead{color:var(--ink2);font-size:clamp(1rem,1.9vw,1.16rem);line-height:1.75}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;background:rgba(8,16,31,.86);
     backdrop-filter:saturate(160%) blur(12px);
     border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:18px;height:62px}
/* The wordmark is one indivisible object — never wraps, never shrinks. */
.brand{display:inline-flex;align-items:center;flex:0 0 auto;min-width:max-content}
.brand img{height:22px;width:auto}
.nav-links{display:flex;gap:22px;margin-left:14px}
.nav-links a{color:var(--ink2);font-size:.9rem}
.nav-links a:hover{color:var(--ink);text-decoration:none}
.nav-sp{flex:1}
.langs{display:flex;align-items:center;gap:2px;border:1px solid var(--line);
       border-radius:999px;padding:2px}
.langs button{background:none;border:0;cursor:pointer;color:var(--dim);
  font-family:var(--lat),var(--han);font-size:.76rem;font-weight:600;
  padding:5px 11px;border-radius:999px;line-height:1}
.langs button[aria-pressed="true"]{background:var(--panel2);color:var(--ink)}

/* ── the Coming Soon badge ───────────────────────────────────────────────── */
.soon{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  border:1px dashed rgba(47,211,224,.42);border-radius:999px;
  padding:5px 13px;color:var(--cyan);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.soon::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);flex:none}
.soon.sm{padding:3px 9px;font-size:.6rem;letter-spacing:.13em}

/* ── section rhythm ──────────────────────────────────────────────────────── */
section{padding:76px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.sec-head{max-width:60ch}
.sec-head h2{margin-top:10px}
.sec-head .lead{margin-top:14px}

/* ── footer ──────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:38px 0 54px;color:var(--dim);font-size:.86rem}
.foot-grid{display:flex;flex-wrap:wrap;gap:26px 48px;align-items:flex-start}
.foot-grid .col{min-width:0}
footer .co{color:var(--ink2)}
footer .lnk{display:flex;gap:18px;margin-top:8px}
footer a{color:var(--ink2)}

@media (max-width:760px){
  section{padding:56px 0}
  .nav-links{display:none}
}

/* Motion is a garnish, never information. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ── legal pages (privacy.html / terms.html) ───────────────────────────────
   The BODY of these two pages is generated verbatim from the shipped Worker
   (VicPaste/worker/src/pages.ts) by tools/sync-legal.py — do not hand-edit the
   text. What follows only re-homes the Worker's own class names (.zh, .card)
   into this site's chrome, so the wording is byte-identical while the page
   still looks like the rest of vicpaste.victech.my.

   Both languages sit on the SAME page here, exactly as they do on the Worker:
   an English clause with its Chinese reading directly beneath it. A policy that
   changes shape when you flip a language switch is two policies. */
.legal{max-width:760px;padding-top:52px;padding-bottom:76px}
.legal h1{font-size:clamp(1.7rem,4vw,2.3rem);margin:26px 0 8px}
.legal h2{font-size:1.06rem;margin:34px 0 10px;letter-spacing:-.01em}
.legal p,.legal li{color:var(--ink2);font-size:.97rem;line-height:1.75}
.legal p+p{margin-top:10px}
.legal ul{padding-left:20px;margin:12px 0}
.legal li{margin:8px 0}
.legal li::marker{color:var(--dim)}
/* The Chinese reading of the clause immediately above it — one step quieter,
   never smaller than the point where it stops being legible. */
.legal .zh{color:var(--dim);font-size:.89rem;line-height:1.8;margin-top:5px}
.legal b,.legal strong{color:var(--ink);font-weight:700}
.legal .card{background:var(--panel);border:1px solid var(--line);
             border-radius:var(--radius);padding:18px 20px;margin:22px 0}
.legal .card h2{margin-top:0}
.legal a{color:var(--cyan)}