/* Note Bolt - the app itself: pastel sticky notes on a light neutral ground,
   DM Serif Display, black controls, pine as the primary. Tokens from
   note-taking's colors.xml (primary #16624B) via the Design Registry.
   The app's only bundled font is DM Serif Display; everything else uses the
   phone's own sans-serif, and so does this page.

   The store listing and channel covers use a different set (cyan with a
   yellow wordmark). Which one is Note Bolt's real identity is an open
   decision on the Shelf; these pages follow the app, as asked. */

@font-face { font-family: "DM Serif Display"; font-weight: 400; font-display: swap;
             src: url("/assets/fonts/dm-serif-display-400.ttf") format("truetype"); }

:root {
  --ground: #FAFAFA; --card: #FFFFFF; --ink: #191C1A; --muted: #5C635E;
  --line: #E3E6E2; --pine: #16624B;
  --rose: #FFC7EA; --lemon: #FFE89E; --sky: #BCF0FF; --mint: #D1FCBB; --orange: #F7A375;
  --display-font: "DM Serif Display", Georgia, serif;
  --body-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono-font: ui-monospace, Consolas, monospace;
  --link: #16624B; --accent-strong: #16624B; --code-bg: #EEF1ED;
}

.apphead { background: var(--card); border-bottom: 1px solid var(--line); }
.brand-icon { border-radius: 24%; }
.brand-name { font-size: 27px; }

.tabs a { border-radius: 999px; background: #EEF0ED; font-weight: 500; }
.tabs a:hover { background: #E3E6E2; }
.tabs a[aria-current="page"] { background: var(--ink); color: #FFFFFF; }

/* the title sits on a note, the way a note's title would in the app */
.page h1 .mark {
  display: inline-block; background: var(--lemon); padding: 10px 18px 12px;
  border-radius: 16px; transform: rotate(-1deg);
}
.status { margin-top: 14px; }

.body {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 26px clamp(18px, 4vw, 34px) 18px;
}
.body h2 { font-weight: 400; font-size: 25px; }

/* on About, each section heading is a small sticky note of its own colour */
.doc-about .body h2 {
  display: inline-block; font-size: 21px; padding: 6px 14px 7px; border-radius: 12px;
  margin-bottom: .6em;
}
.doc-about .body h2:nth-of-type(5n+1) { background: var(--rose); }
.doc-about .body h2:nth-of-type(5n+2) { background: var(--sky); }
.doc-about .body h2:nth-of-type(5n+3) { background: var(--mint); }
.doc-about .body h2:nth-of-type(5n+4) { background: var(--lemon); }
.doc-about .body h2:nth-of-type(5n+5) { background: var(--orange); }