/* The stylesheet for the pages that are NOT the app: /privacy, /support and
   /shortcuts.
   They are plain files under public/, served by Firebase Hosting before the
   single-page rewrite ever runs, so they load with no Angular, no sign-in and
   no JavaScript at all. Both stores require a privacy policy anyone can open
   in any browser, and a page that needs an account is a page a reviewer
   cannot read.

   One stylesheet for both, rather than a copy in each: anything written down
   twice in this repo is the thing that goes stale. The palette is the app's
   own (styles.scss), light and dark, so the pages look like where they came
   from without importing the app's build. */

:root {
  --bg: #f5f7fa;
  --card: #ffffff;
  --text: #0f1319;
  --muted: #67707c;
  --faint: #98a1ad;
  --border: #e2e7ee;
  --sunk: #eaeef3;
  --primary: #e0402a;
  --money: #0e7c5a;
  --brand-ink: #131a24;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1014;
    --card: #171c23;
    --text: #eef2f7;
    --muted: #9aa4b2;
    --faint: #6f7987;
    --border: #262d37;
    --sunk: #14181e;
    --primary: #ff6f4d;
    --money: #2fd39a;
    --brand-ink: #eef2f7;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 64px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.62 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

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

header.top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 0 8px;
}
header.top img { width: 44px; height: 44px; border-radius: 11px; display: block; }
header.top .name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--brand-ink); }
header.top .where { font-size: 13px; color: var(--muted); }

h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; margin: 20px 0 6px; }
h2 { font-size: 19px; letter-spacing: -0.01em; margin: 34px 0 8px; }
h3 { font-size: 16px; margin: 22px 0 6px; }
p, li { color: var(--text); }
.lede { font-size: 17px; color: var(--muted); margin: 0 0 6px; }
.stamp { font-size: 13px; color: var(--faint); margin: 0 0 26px; }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 18px 0;
}
.card h2, .card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.plain { list-style: none; padding: 0; margin: 12px 0; }
.plain li { padding: 10px 0; border-top: 1px solid var(--border); }
.plain li:first-child { border-top: 0; padding-top: 0; }
.plain strong { display: block; }
.plain span { color: var(--muted); font-size: 14.5px; }

/* A table on a phone scrolls inside its own box rather than pushing the page
   sideways. */
.scroll { overflow-x: auto; margin: 14px 0; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px; }
th, td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--border); }
th { background: var(--sunk); font-weight: 600; }
td:first-child { font-weight: 600; white-space: nowrap; }

.no { color: var(--money); font-weight: 600; }

footer {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--muted);
}
footer a + a { margin-left: 14px; }

/* /shortcuts: the numbered steps, the recipe cards and the box that shows one
   habit's own link when Settings opened the page for it. */
.steps { padding-left: 22px; }
.steps li { margin: 6px 0; }
.recipe .tag {
  display: inline-block;
  margin: 0 0 6px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}
.recipe h3 { margin-bottom: 2px; }
.recipe .for { color: var(--muted); font-size: 14.5px; margin-top: 0; }
.example { border-left: 3px solid var(--border); padding-left: 12px; }
.small { font-size: 14.5px; color: var(--muted); }
.yours { border-color: var(--primary); }
.linkbox {
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--sunk);
  border-radius: 10px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.pill--quiet { background: transparent; color: var(--primary); }