/* logpod.app — the same palette the app paints, so the site and the binary
   do not look like two products. Values are lifted from
   lib/src/logpod/ui/theme.dart; change them there first. */
:root {
  --paper: #f2f6f5;
  --card: #ffffff;
  --ink: #132227;
  --sub: #5b7078;
  --water: #0e5f6b;
  --water-2: #14808d;
  --hairline: #dfe8e6;
  --water-soft: #e0eff0;
  --radius: 14px;
  --measure: 34rem;
  color-scheme: light dark;
}

:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --paper: #0a171a;
    --card: #12262a;
    --ink: #e4edec;
    --sub: #8da7a6;
    --water: #4fb3b8;
    --water-2: #6fc9cd;
    --hairline: #22383a;
    --water-soft: #123236;
  }
}

:root[data-theme="dark"] {
  --paper: #0a171a;
  --card: #12262a;
  --ink: #e4edec;
  --sub: #8da7a6;
  --water: #4fb3b8;
  --water-2: #6fc9cd;
  --hairline: #22383a;
  --water-soft: #123236;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "PingFang TC", "Noto Sans TC", sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 16px 80px;
}

header.site {
  padding: 28px 0 8px;
}

.mark {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--water);
  text-decoration: none;
}

h1 { font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; margin: 24px 0 8px; text-wrap: balance; }
h2 { font-size: 21px; line-height: 1.25; margin: 36px 0 8px; text-wrap: balance; }
h3 { font-size: 17px; line-height: 1.3; margin: 24px 0 4px; }
p, ul, table { margin: 0 0 14px; }
ul { padding-left: 1.2em; }
li { margin: 4px 0; }
a { color: var(--water); }
strong { font-weight: 600; }

/* A note the reader should not skim past. */
blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--water-soft);
  border-radius: var(--radius);
  color: var(--ink);
}
blockquote p:last-child { margin-bottom: 0; }

/* Tables are wide; let the table scroll rather than the page. */
.table-scroll { overflow-x: auto; margin: 0 0 16px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { font-weight: 600; color: var(--sub); font-size: 13px; }

.updated { color: var(--sub); font-size: 15px; margin-top: -4px; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  margin: 20px 0;
}

.btn {
  display: inline-block;
  background: var(--water);
  color: var(--paper);
  padding: 13px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  min-height: 44px;
  line-height: 1.35;
}
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--water-2); outline-offset: 2px; }
.btn.secondary { background: transparent; color: var(--water); border: 1px solid var(--hairline); }

nav.footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  color: var(--sub);
  font-size: 15px;
}
nav.footer a { margin-right: 14px; display: inline-block; }

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