/* BrickWares website — shared styles for every page (index, privacy-policy, terms-of-service,
   delete-account). captcha.html is NOT part of this: it is a bare widget page loaded by the app.

   Language: each page holds both languages in [data-lang="en"] / [data-lang="vi"] blocks. site.js
   sets <html data-active-lang="…"> before first paint and the two rules at the bottom of this file
   hide the other one. Without JavaScript neither rule matches, so both languages simply show. */

:root {
  --bg: #faf7f0; --card: #ffffff; --text: #1c1a16; --muted: #6b6357;
  --line: #e7e0d4; --accent: #e0a80a; --accent-ink: #3a2c00; --link: #8a5a00;
  --soft: #f3ecdc; --warn-bg: #fff1c9; --warn-ink: #5a4300;
  --shadow: 0 1px 2px rgba(60, 45, 0, .06), 0 8px 24px rgba(60, 45, 0, .06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17150f; --card: #211e17; --text: #f2ede2; --muted: #a89e8c;
    --line: #33302a; --accent: #f2b705; --accent-ink: #2a2000; --link: #f2c94c;
    --soft: #262219; --warn-bg: #3a2f0f; --warn-ink: #f2d27a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 780px; margin: 0 auto; padding-inline: 20px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 16px; flex-wrap: wrap; padding-block: 12px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 19px; letter-spacing: -.02em;
  color: var(--text); text-decoration: none;
}
.brand img { width: 28px; height: 28px; border-radius: 8px; display: block; object-fit: cover; }
.brand b { color: var(--accent); font-weight: 800; }
.site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.site-nav a {
  font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none;
  padding: 6px 10px; border-radius: 8px;
}
.site-nav a:hover { color: var(--text); background: var(--soft); }
.site-nav a[aria-current="page"] { color: var(--text); background: var(--soft); }
.langs { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--card); }
.lang-btn {
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; cursor: pointer;
  padding: 5px 11px; border-radius: 999px; border: 0; background: transparent; color: var(--muted);
}
.lang-btn:hover { color: var(--text); }
.lang-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* Phones: brand + language toggle on the first row, the nav on its own row below, and NOT sticky —
   a three-row sticky bar was eating ~18% of the screen while reading the long legal pages. */
@media (max-width: 640px) {
  html { scroll-padding-top: 16px; }
  .site-header { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .site-header .wrap { padding-block: 10px 6px; }
  .brand { order: 1; }
  .langs { order: 2; margin-left: auto; }
  .site-nav { order: 3; flex-basis: 100%; margin-left: -8px; gap: 0; }
  .site-nav a { padding: 6px 8px; font-size: 13.5px; }
}

/* ---------- page body ---------- */
main { padding-block: 36px 56px; }
h1 { font-size: clamp(28px, 5vw, 38px); line-height: 1.18; letter-spacing: -.025em; margin: .1em 0 .3em; text-wrap: balance; }
h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.01em; margin: 2.4em 0 .6em; padding-top: 1.1em; border-top: 1px solid var(--line); }
h3 { font-size: 16.5px; margin: 1.8em 0 .4em; }
p { margin: .75em 0; }
p, li { max-width: 72ch; }
ul, ol { margin: .6em 0; padding-left: 1.35em; }
li { margin: .4em 0; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em;
  background: var(--soft); padding: 1px 6px; border-radius: 5px; overflow-wrap: anywhere;
}
.lead { color: var(--muted); font-size: 18px; max-width: 58ch; }
.meta { color: var(--muted); font-size: 14.5px; margin: 0 0 1.4em; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; text-decoration: none; margin-bottom: 18px; }
.back:hover { text-decoration: underline; }

.pill {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent-ink);
  background: var(--accent); padding: 4px 13px; border-radius: 999px;
}
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 8px 22px; margin: 1.2em 0; box-shadow: var(--shadow); }
.card > h2:first-child, .card > h3:first-child { border: 0; padding-top: 0; margin-top: .9em; font-size: 17px; }
.callout { border-left: 4px solid var(--accent); background: var(--soft); padding: 6px 18px; margin: 1.2em 0; border-radius: 0 12px 12px 0; }
strong.warn { color: var(--warn-ink); background: var(--warn-bg); padding: 1px 7px; border-radius: 6px; }

/* ---------- landing page ---------- */
.hero { padding-block: 20px 8px; }
/* The app name inside running text, styled like the header wordmark (bold, "Wares" in the accent). */
.wordmark { font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.wordmark b { color: var(--accent); font-weight: 800; }

/* Intro video link + store badges (the official Google Play / App Store artwork in /badges, per each
   store's brand guidelines: never recoloured or reshaped). The Google badge PNG carries its own
   transparent margin, so it is drawn taller than the Apple SVG to look the same size. The App Store
   badge is a non-link until the iOS app is live: dimmed, with a "coming soon" caption under it. */
/* The intro video is a PORTRAIT (9:16) YouTube video: a phone-shaped panel, poster first, the player
   swapped in by site.js on press (click-to-load — see the comment in index.html). */
.video { margin: 22px auto 18px; max-width: 300px; }
.video-poster {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0;
  border-radius: 18px; overflow: hidden; cursor: pointer; background: #000; box-shadow: var(--shadow);
}
.video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.video-poster:hover img { transform: scale(1.02); }
.video iframe { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 18px; background: #000; box-shadow: var(--shadow); }
.play-glyph {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; padding-left: 2px;
}
.play-glyph.big {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; font-size: 26px; padding-left: 5px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35); transition: transform .2s;
}
.video-poster:hover .play-glyph.big { transform: scale(1.06); }
/* Both badge files are cropped to their artwork (the Google PNGs had uneven transparent margins), so
   one shared height lines them up on a single baseline. The "coming soon" caption hangs below the
   App Store badge without taking part in the row's layout, so it can't push that badge off the line. */
.store-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 14px; margin: 6px 0 30px; }
.store-badge { position: relative; display: inline-block; text-decoration: none; line-height: 0; }
.store-badge img { display: block; height: 46px; width: auto; }
.store-badge:not(.soon):hover img { filter: brightness(1.08); }
.store-badge.soon { opacity: .5; cursor: default; }
.store-badge.soon img { filter: grayscale(.35); }
.soon-note {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 5px; text-align: center; white-space: nowrap;
  font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--muted); letter-spacing: .02em;
}
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 30px 0 8px; padding: 0; list-style: none; }
.features li {
  margin: 0; max-width: none; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; font-size: 15px; color: var(--muted); line-height: 1.55;
}
.features strong { display: block; color: var(--text); font-size: 15.5px; margin-bottom: 3px; }
.links { list-style: none; margin: 0; padding: 0; }
.links li { margin: 0; max-width: none; border-top: 1px solid var(--line); }
.links li:first-child { border-top: 0; }
.links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 2px; text-decoration: none; color: var(--text); font-weight: 600;
}
.links a:hover { color: var(--link); }
.links .arrow { color: var(--muted); }

/* ---------- long documents ---------- */
.toc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; margin: 1.4em 0 .4em; }
.toc summary { cursor: pointer; font-weight: 700; font-size: 15px; padding: 10px 0; list-style-position: inside; }
.toc ol { margin: 0 0 12px; padding-left: 1.5em; columns: 2; column-gap: 28px; font-size: 14.5px; }
.toc li { margin: .25em 0; break-inside: avoid; }
.toc a { text-decoration: none; color: var(--text); }
.toc a:hover { color: var(--link); text-decoration: underline; }
@media (max-width: 560px) { .toc ol { columns: 1; } }

.table-wrap { overflow-x: auto; margin: 1.1em 0; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 14.5px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { font-weight: 700; background: var(--soft); font-size: 13.5px; }
td, th { max-width: none; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; padding-block: 22px 40px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 10px; }
.site-footer a { color: var(--link); text-decoration: none; font-weight: 600; }
.site-footer a:hover { text-decoration: underline; }
.site-footer p { margin: .4em 0; max-width: 78ch; }

/* ---------- language switching (keep last) ---------- */
html[data-active-lang="en"] [data-lang="vi"],
html[data-active-lang="vi"] [data-lang="en"] { display: none !important; }

@media print {
  .site-header, .toc, .back, .langs { display: none !important; }
  body { background: #fff; color: #000; }
}