/* Porcelain Ink for standalone legal and replay pages. */

html[data-porcelain-page="legal"] {
  color-scheme: light;
  --text: #10272c;
  --muted: #52676b;
  --accent: #24545c;
  --panel: #ffffff;
  --border: #d6deda;
  background: #f4f6f3;
}

html[data-porcelain-page="legal"] body {
  background: linear-gradient(180deg, #f4f6f3, #f7f9f6);
}

html[data-porcelain-page="legal"] article {
  border-color: var(--border);
  background: var(--panel);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-porcelain-page="legal"] :is(a, small) {
  color: var(--accent);
}

html[data-porcelain-page="replay"] {
  color-scheme: light;
  --bg: #f4f6f3;
  --surface: #ffffff;
  --surface-soft: #eaf0ed;
  --ink: #10272c;
  --muted: #52676b;
  --line: #d6deda;
  --primary: #24545c;
  --primary-strong: #1d464d;
  --gain: #4d797d;
  --loss: #2c626b;
  background: #f4f6f3;
}

html[data-porcelain-page="replay"] body {
  background: linear-gradient(180deg, #f4f6f3, #f7f9f6);
}

html[data-porcelain-page="replay"] button {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink);
  box-shadow: none;
}

html[data-porcelain-page="replay"] button:hover:not(:disabled),
html[data-porcelain-page="replay"] button:focus-visible {
  border-color: #b9c7c2;
  background: #eaf0ed;
  box-shadow: 0 0 0 3px rgba(58, 119, 128, 0.14);
}

html[data-porcelain-page="replay"] #playbackButton,
html[data-porcelain-page="replay"] #returnButton {
  border-color: #24545c;
  background: #24545c;
  color: #f9f9f7;
}

html[data-porcelain-page="replay"] :is(.replay-loading-card, .photo-frame, .replay-data) {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

html[data-porcelain-page="replay"] .weight-change {
  border-color: var(--line);
  background: var(--surface-soft);
}

html[data-porcelain-page="replay"] .replay-loading-spinner {
  border-color: rgba(36, 84, 92, 0.14);
  border-top-color: var(--primary);
}

html[data-porcelain-page="replay"] .replay-loading-progress {
  background: rgba(36, 84, 92, 0.12);
}

html[data-porcelain-page="replay"] .replay-loading-progress > span {
  background: linear-gradient(90deg, #31565b, #4d797d);
}

@media (prefers-color-scheme: dark) {
  html[data-porcelain-page="legal"] {
    color-scheme: dark;
    --text: #f2f6f4;
    --muted: #b7c4c1;
    --accent: #a5cfca;
    --panel: #152124;
    --border: #314448;
    background: #0e1719;
  }

  html[data-porcelain-page="legal"] body {
    background: linear-gradient(180deg, #0e1719, #111d20);
  }

  html[data-porcelain-page="replay"] {
    color-scheme: dark;
    --bg: #0e1719;
    --surface: #152124;
    --surface-soft: #203035;
    --ink: #f2f6f4;
    --muted: #b7c4c1;
    --line: #314448;
    --primary: #7db7b9;
    --primary-strong: #a5cfca;
    --gain: #8eafb1;
    --loss: #79b3b6;
    background: #0e1719;
  }

  html[data-porcelain-page="replay"] body {
    background: linear-gradient(180deg, #0e1719, #111d20);
  }

  html[data-porcelain-page="replay"] button {
    border-color: #314448;
    background: #203035;
    color: #f2f6f4;
    box-shadow: none;
  }

  html[data-porcelain-page="replay"] button:hover:not(:disabled),
  html[data-porcelain-page="replay"] button:focus-visible {
    border-color: #466066;
    background: #294047;
    box-shadow: 0 0 0 3px rgba(157, 215, 209, 0.12);
  }

  html[data-porcelain-page="replay"] #playbackButton,
  html[data-porcelain-page="replay"] #returnButton {
    border-color: #7db7b9;
    background: #7db7b9;
    color: #0e1719;
  }

  html[data-porcelain-page="replay"] :is(.replay-loading-card, .photo-frame, .replay-data) {
    border-color: #314448;
    background: #152124;
    box-shadow: none;
  }

  html[data-porcelain-page="replay"] .weight-change {
    border-color: #314448;
    background: #203035;
  }

  html[data-porcelain-page="replay"] .replay-loading-progress {
    background: rgba(125, 183, 185, 0.14);
  }
}