/* PicPop site. Deliberately dependency-free static CSS: these pages exist so
   App Review can reach a privacy policy and a support page, and the one thing
   they must never do is fail to load. */

:root {
  --bg: #fff8f3;
  --surface: #ffffff;
  --border: #f0dfd3;
  --text: #2c2119;
  --muted: #7c6a5d;
  --primary: #ff5c8a;
  --primary-soft: #ffeaf1;
  --callout-border: #ffd3e1;
  --radius: 20px;
  --maxw: 720px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0 20px 80px;
  background: var(--bg);
  color: var(--text);
  /* Thai needs a font stack that actually has Thai glyphs before the fallback. */
  font-family: 'Mali', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Thai',
    'Sarabun', system-ui, sans-serif;
  /* Taller than a Latin-only page would need: Thai stacks vowels above and tone
     marks above those, and they clip at typical line heights. */
  line-height: 1.85;
  font-size: 17px;
}

header, main, footer { max-width: var(--maxw); margin: 0 auto; }

header {
  padding: 48px 0 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mark {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--primary-soft);
  display: grid; place-items: center;
  font-size: 22px;
}

.brand { font-weight: 700; font-size: 20px; letter-spacing: 0.2px; }

h1 { font-size: 32px; line-height: 1.5; margin: 0 0 8px; }
h2 { font-size: 21px; line-height: 1.6; margin: 40px 0 10px; }
h3 { font-size: 17px; margin: 24px 0 6px; color: var(--muted); }
h4 { font-size: 16px; margin: 20px 0 4px; color: var(--muted); font-weight: 600; }

/* A card's title is a label, not a section break. It keeps the small muted
   look while sitting at whatever heading level the outline requires. */
.card-title { font-size: 17px; margin: 0 0 6px; color: var(--muted); font-weight: 600; }

/* The English half opens with this instead of a second <h1>. */
.alt-title { font-size: 26px; line-height: 1.5; margin: 8px 0; color: var(--text); }

p, li { color: var(--text); }
.lead { color: var(--muted); font-size: 16px; margin-top: 0; }
.updated { color: var(--muted); font-size: 14px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 22px 0;
}

.callout {
  background: var(--primary-soft);
  border: 1px solid var(--callout-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 24px 0;
}

.callout strong { color: var(--primary); }

ul { padding-left: 22px; margin: 8px 0; }
li { margin: 6px 0; }

a { color: var(--primary); }
a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }

.nav { display: flex; gap: 16px; flex-wrap: wrap; margin: 28px 0 0; font-size: 15px; }

footer {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}

/* The English half of each page, for reviewers who do not read Thai. */
.en { border-top: 1px dashed var(--border); margin-top: 56px; padding-top: 8px; }
.en h2 { font-size: 19px; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1410;
    --surface: #241c17;
    --border: #3a2c23;
    --text: #f5ece5;
    --muted: #b09c8d;
    /* Lifted from the light value: #ff5c8a on a near-black ground is under
       4.5:1 for the body text that uses it. */
    --primary: #ff96b4;
    --primary-soft: #3a1f2a;
    --callout-border: #5c3040;
  }
}

/* Three-column tables overflow below roughly 380px, so let them scroll inside
   their own box rather than pushing the whole page sideways. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x > table { min-width: 460px; }

@media (max-width: 480px) {
  body { font-size: 16px; padding: 0 16px 60px; }
  h1 { font-size: 27px; }
  .alt-title { font-size: 23px; }
  header { padding: 32px 0 20px; }
  .card, .callout { padding: 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}