/* Shared styling for Michi's standalone legal pages.

   These are plain HTML, served directly by Firebase Hosting rather than
   rendered by the app, so they load without JavaScript and stay readable if
   the app is down — which is what a policy page is for. */

:root {
  --ink: #16302a;
  --ink-soft: #4a5f58;
  --moss: #315f50;
  --ember: #e65f3c;
  --paper: #fbf8f3;
  --rule: #e4ded3;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 20px 80px;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 720px;
  margin: 0 auto;
}

header {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--moss);
  font-weight: 800;
  font-size: 20px;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand span {
  font-size: 24px;
}

h1 {
  margin: 32px 0 6px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h2 {
  margin: 40px 0 10px;
  font-size: 20px;
  letter-spacing: -0.01em;
}

h3 {
  margin: 26px 0 6px;
  font-size: 16px;
}

.updated {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 14px;
}

.lede {
  font-size: 17px;
  color: var(--ink-soft);
}

ul {
  padding-left: 22px;
}

li {
  margin: 7px 0;
}

a {
  color: var(--ember);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 15px;
}

th,
td {
  padding: 10px 12px;
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

th {
  background: #f3ede3;
  font-weight: 700;
}

.callout {
  margin: 22px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--moss);
  background: #f1f5f2;
  border-radius: 0 10px 10px 0;
}

footer {
  max-width: 720px;
  margin: 56px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 14px;
}

footer a {
  margin-right: 16px;
}

@media (max-width: 560px) {
  h1 {
    font-size: 26px;
  }
  body {
    font-size: 15px;
  }
  table {
    display: block;
    overflow-x: auto;
  }
}