/* Shared theme for shoku.food's static doc pages (legal.html, support.html).
   Page-specific styles (tabs, FAQ cards, clause layout, etc.) stay inline in
   each page so this file only ever holds what must stay visually identical
   across all of them.

   Always dark, regardless of the visitor's system preference - matches the
   app's own login screen for brand consistency, independent of the app's
   own user-configurable light/dark/auto appearance setting. */

:root {
  --bg: #17120E;
  --surface: #221C17;
  --surface-muted: #2E2620;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text: #FAF6F0;
  --text-muted: #C4B9A8;
  --text-subtle: #93887A;
  --brand: #F0A83A;
  --brand-strong: #F6C066;
  --brand-soft: rgba(240,168,58,0.14);
  --sage: #8FB296;
  --sage-soft: rgba(143,178,150,0.14);
}

* { box-sizing: border-box; }
html, body {
  /* Safety net: nothing on these pages should ever need to scroll
     horizontally at the page level (the data table has its own internal
     scroll for when it doesn't fit - see .table-scroll). Without this, a
     single element rendering wider than the viewport silently widens the
     whole page instead of just overflowing in place. */
  overflow-x: hidden;
  max-width: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  padding-inline: 20px;
  padding-block: 0;
  line-height: 1.6;
}
.wrap { max-width: 680px; margin: 0 auto; }

header.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  background: var(--bg);
  padding-block: 18px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 5;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.kanji {
  font-family: 'Noto Serif JP', 'Noto Serif', serif;
  font-size: 22px;
  color: var(--brand);
  line-height: 1;
}
.brand-name {
  font-family: 'Noto Serif', Georgia, serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.2px;
}

/* Site nav - same 3 links (Privacy Policy, Terms of Service, Support) on
   every static doc page, so each page can reach the other two without
   going back through the app first. Plain text links rather than a
   pill/tab bar so it wraps naturally instead of forcing a fixed-width
   control on narrow screens. */
.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.site-nav a {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--brand-strong);
}
.site-nav a.active {
  color: var(--brand-strong);
}
.site-nav .sep {
  color: var(--border-strong);
  font-size: 12px;
}

main { padding-block: 28px 64px; }

.doc-head { margin-bottom: 28px; }
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--brand-strong);
  margin: 0 0 8px;
}
h1 {
  font-family: 'Noto Serif', Georgia, serif;
  font-weight: 600;
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1.2;
  margin: 0 0 8px;
  text-wrap: balance;
}

footer.page {
  border-top: 1px solid var(--border);
  padding-block: 22px 40px;
  font-size: 12.5px;
  color: var(--text-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
}
footer.page a { color: var(--text-muted); }

[hidden] { display: none !important; }

@media (max-width: 480px) {
  header.top { flex-direction: column; align-items: stretch; gap: 10px; }
  .site-nav { justify-content: space-between; }
}