/*
 * subgloss.app. Colours and type follow the extension's own pages (subgloss-chrome-extension/
 * src/pages/pages.css); the fonts fall back to the system's (the extension's bundled fonts aren't
 * copied here).
 */
:root {
  color-scheme: light;
  --paper: #f5f2ea;
  --surface: #fffdf8;
  --ink: #1b1a17;
  --ink-2: #55524a;
  --rule: #ddd7c9;
  --plate: #15161a;
  --on-plate: #fbfaf6;
  --on-plate-2: #b4b9c4;
  --action: #0e6a5e;
  --mint: #7ee0cf;
  --voice: #e2a100;
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-source:
    'Hiragino Sans', 'Yu Gothic UI', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #15161a;
    --surface: #1d1f25;
    --ink: #fbfaf6;
    --ink-2: #b4b9c4;
    --rule: #30333b;
    --plate: #0c0d10;
    --action: #7ee0cf;
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--font-ui);
}
main,
header,
footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}
header {
  padding-top: 28px;
}
.brand {
  font: 600 22px/1 var(--font-display);
  color: var(--ink);
  text-decoration: none;
}
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
}
h1 {
  font-size: clamp(32px, 6vw, 46px);
  margin: 48px 0 12px;
}
h2 {
  font-size: 24px;
  margin: 40px 0 8px;
}
p,
li {
  color: var(--ink);
}
.lede {
  font-size: 19px;
  color: var(--ink-2);
  margin: 0 0 32px;
}
a {
  color: var(--action);
  text-underline-offset: 3px;
}
.muted {
  color: var(--ink-2);
}

/* A subtitle line as the extension draws it: meanings above the words, the translation below. */
.demo {
  background: var(--plate);
  color: var(--on-plate);
  border-radius: 14px;
  padding: 28px 20px 22px;
  text-align: center;
  margin: 0 0 40px;
}
.demo .line {
  font: 500 clamp(24px, 5vw, 32px) / 2.2 var(--font-source);
}
.demo ruby {
  margin: 0 0.12em;
}
.demo rt {
  ruby-align: center;
  font: 500 13px/1.2 var(--font-ui);
  color: var(--mint);
  padding-bottom: 4px;
}
.demo .spoken {
  border-bottom: 3px solid var(--voice);
}
.demo .translation {
  margin: 6px 0 0;
  color: var(--on-plate-2);
  font-style: italic;
}

.features {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 18px;
}
.features b {
  display: block;
}

.policy h2 {
  font-size: 21px;
  margin-top: 32px;
}
.policy table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.policy th,
.policy td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--rule);
}
.policy-wrap {
  overflow-x: auto;
}

footer {
  margin-top: 64px;
  padding-top: 20px;
  padding-bottom: 40px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  color: var(--ink-2);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* Placeholders the owner still has to fill in; `npm run deploy` refuses while any remain. */
.todo {
  background: #fbf0cf;
  color: #1b1a17;
  padding: 0 4px;
  border-radius: 4px;
}