/* BareMeta — legal pages stylesheet (terms / privacy / licenses).

   Standalone "evidence ledger" styling for the static legal documents. These
   pages ship with no JavaScript and load no external resources, so they stay
   within the strict Content Security Policy. Token values mirror src/style.css
   (warm paper, warm ink, one vermillion accent) but are written out literally
   because these pages do not import the app bundle. */

:root {
  --paper: oklch(96.5% 0.009 90);
  --paper-raise: oklch(98.3% 0.006 95);
  --ink: oklch(25% 0.02 70);
  --ink-soft: oklch(42% 0.018 70);
  --hairline: oklch(86% 0.014 85);
  --rule: color-mix(in oklab, var(--ink) 55%, transparent);

  --alarm: oklch(48% 0.17 29);
  --alarm-deep: oklch(40% 0.15 29);
  --alarm-wash: oklch(93.5% 0.022 29);

  --ok: oklch(40% 0.09 152);
  --ok-wash: oklch(94% 0.022 152);

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in oklab, var(--ink) 45%, transparent);
}

a:hover {
  text-decoration-color: var(--alarm);
}

:focus-visible {
  outline: 2px solid var(--alarm);
  outline-offset: 3px;
}

.wrap {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem);
}

/* ---------- masthead ---------- */

.legal-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 1.3rem;
  margin-bottom: clamp(1.75rem, 5vw, 2.5rem);
  border-bottom: 4px double var(--rule);
}

.legal-head img {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.legal-head .brand {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1;
  /* The wordmark is a link back to the app; keep it looking like a logo. */
  color: var(--ink);
  text-decoration: none;
}

.legal-head .brand s {
  font-style: italic;
  font-weight: 450;
  text-decoration: line-through;
  text-decoration-color: var(--alarm);
  text-decoration-thickness: 0.085em;
}

.legal-head .back {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  padding: 0.55em 0.9em;
  white-space: nowrap;
}

.legal-head .back:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ---------- top cross-links (to the other two legal pages) ---------- */

.legal-crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: -0.5rem 0 clamp(2rem, 5vw, 2.75rem);
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.legal-crosslinks a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.15em;
}

.legal-crosslinks a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- document title ---------- */

.doc-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.updated {
  margin: 0 0 clamp(2rem, 5vw, 2.75rem);
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

/* ---------- language sections ---------- */

.lang-section {
  scroll-margin-top: 1.5rem;
}

/* The divider between the English and Japanese editions. */
.lang-section + .lang-section {
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-top: clamp(2rem, 6vw, 3rem);
  border-top: 4px double var(--rule);
}

.lang-tag {
  display: inline-block;
  margin: 0 0 1.4rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--alarm);
  border: 2px solid var(--alarm);
  border-radius: 2px;
  padding: 0.3em 0.6em;
}

/* In-page jump between the two editions. */
.lang-jump {
  margin: -0.5rem 0 clamp(2rem, 5vw, 2.75rem);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* ---------- headings ---------- */

h2 {
  margin: clamp(2rem, 5vw, 2.75rem) 0 0.6rem;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

h3 {
  margin: 1.8rem 0 0.4rem;
  font-size: 1.08rem;
  font-weight: 600;
}

p {
  margin: 0.9rem 0;
}

ul,
ol {
  margin: 0.9rem 0;
  padding-left: 1.4rem;
}

li {
  margin: 0.45rem 0;
}

li > ul,
li > ol {
  margin: 0.45rem 0;
}

strong {
  font-weight: 650;
}

abbr {
  text-decoration-style: dotted;
  cursor: help;
}

/* ---------- lead paragraph ---------- */

.lead {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}

/* ---------- highlight / callout ---------- */

.callout {
  margin: 1.5rem 0;
  padding: 0.9em 1.1em;
  border-left: 3px solid var(--ink-soft);
  background: var(--paper-raise);
  font-size: 0.97rem;
}

.callout.guarantee {
  border-left-color: var(--ok);
  background: var(--ok-wash);
}

.callout.warn {
  border-left-color: var(--alarm);
  background: var(--alarm-wash);
  color: var(--alarm-deep);
}

.callout :first-child {
  margin-top: 0;
}

.callout :last-child {
  margin-bottom: 0;
}

/* ---------- definition lists (contact, metadata) ---------- */

dl.meta {
  margin: 1.25rem 0;
  display: grid;
  grid-template-columns: minmax(8rem, 28%) 1fr;
  gap: 0.5rem 1.25rem;
}

dl.meta dt {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding-top: 0.15em;
}

dl.meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- tables (licenses) ---------- */

.table-scroll {
  margin: 1.4rem 0;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  padding-bottom: 0.6em;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.6em 0.9em 0.6em 0;
  border-bottom: 1px solid var(--hairline);
  overflow-wrap: anywhere;
}

thead th {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--rule);
}

tbody th[scope='row'] {
  font-weight: 650;
  font-family: var(--serif);
  font-size: 0.98rem;
}

/* ---------- license blocks ---------- */

.license {
  margin: 1.75rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.license:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.license h3 {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em 0.8em;
}

.license .pill {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.2em 0.5em;
}

.license .copyright {
  margin: 0.3rem 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.license-text {
  margin: 0.8rem 0 0;
  padding: 0.9em 1.1em;
  background: var(--paper-raise);
  border: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- footer ---------- */

.legal-foot {
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.legal-foot a {
  color: var(--ink-soft);
}

.legal-foot a:hover {
  color: var(--ink);
}

.legal-foot nav {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

/* ---------- small screens ---------- */

@media (max-width: 480px) {
  dl.meta {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }

  dl.meta dt {
    padding-top: 0.7rem;
  }

  dl.meta dt:first-child {
    padding-top: 0;
  }
}

/* ---------- FAQ items (faq.html) ---------- */

.faq-item {
  margin: clamp(1.5rem, 4vw, 2.25rem) 0;
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--hairline);
}

.faq-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.faq-q {
  margin: 0 0 0.5rem;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.faq-a {
  margin: 0;
  color: var(--ink-soft);
}

/* On the FAQ page the language-jump line sits directly under the title (no
   "last updated" line between them as on the legal pages), so cancel the
   negative top margin that would otherwise overlap the heading. */
.doc-title + .lang-jump {
  margin-top: 0.25rem;
}

/* ---------- back-to-top button ---------- */

.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper-raise);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 10px color-mix(in oklab, var(--ink) 18%, transparent);
  transition:
    border-color 0.15s var(--ease-out),
    transform 0.15s var(--ease-out);
}

.to-top:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}