/*
 * useem.app — every page.
 *
 * Each page is one document, drawn the way em's Read view draws a document:
 * Read's own paper and ink, the 700pt column cap, ReadTypeScale.page for the
 * headings, and the single 3pt rule at half the column that em uses for
 * thematic breaks, quote bars, and pull quotes alike.
 *
 * Green is the library colour. In em every library carries an accent that
 * tints its rules, quote bars, links, and card fills; em's own is the green in
 * the app icon, so that is what marks up the site. Depends on tokens.css; the
 * cheatsheet loads cheatsheet.css on top for its rendered examples.
 */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0 0 var(--block-radius) 0;
}
.skip:focus { left: 0; }

/* ---------- toolbar ---------- */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.toolbar__wrap {
  max-width: calc(var(--column) + 8rem);
  margin: 0 auto;
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.toolbar__brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.toolbar__title {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pacifico draws "em" and nothing else, in the app and here — set large
   enough to hold its own beside the icon, with the rest of the name trailing
   after it. */
.toolbar__wordmark {
  font-family: var(--font-wordmark);
  font-size: 1.7em;
  line-height: 1;
  color: var(--accent);
  margin-right: 0.1em;
}
.toolbar__tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toolbar__links {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}
.toolbar__links a {
  text-decoration: none;
  color: var(--ink-muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.toolbar__links a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

/*
 * The hamburger: three bars that scissor into an X when the menu opens.
 * Hidden above 640px — the nav links have their own room there and the
 * button has nothing to do.
 */
.menu-toggle {
  display: none;
  appearance: none;
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  position: relative;
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 160ms ease, opacity 120ms ease, top 160ms ease;
}
.menu-toggle span:nth-child(1) { top: 0.62rem; }
.menu-toggle span:nth-child(2) { top: calc(50% - 1px); }
.menu-toggle span:nth-child(3) { top: calc(100% - 0.72rem); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

/*
 * Below 640px there's no room for the tagline, the nav, and the CTA
 * together — the tagline goes first (the icon plus "em" still names the
 * page), and the nav links move off the bar entirely into a dropdown the
 * hamburger opens, so the bar itself only ever holds the icon, the
 * wordmark, the App Store button, and the toggle.
 */
@media (max-width: 640px) {
  .toolbar__tagline { display: none; }
  /* Only the tagline was ever meant to truncate — with it gone, "em" itself
     must never be the thing that shrinks to fit. */
  .toolbar__title { overflow: visible; text-overflow: clip; flex-shrink: 0; }
  .toolbar__brand { flex-shrink: 0; }
  .toolbar__wrap { padding: 0.5rem 0.75rem; gap: 0.4rem; position: relative; }
  .toolbar__tools { gap: 0.5rem; }
  .menu-toggle { display: block; }
  .btn--sm { padding: 0.3rem 0.7rem; font-size: 0.7rem; }

  .toolbar__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.25rem 0.75rem 0.5rem;
    box-shadow: 0 10px 20px hsl(var(--shadow-color) / 0.1);
  }
  .toolbar__links.is-open { display: flex; }
  .toolbar__links a {
    display: block;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid var(--rule);
    font-size: 1rem;
  }
  .toolbar__links li:last-child a { border-bottom: 0; }
}

@media (max-width: 360px) {
  .toolbar__wrap { gap: 0.3rem; }
}

/* ---------- the document ---------- */

.page {
  max-width: var(--column);
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 5rem) 1.25rem 4rem;
}

.doc h1,
.doc h2,
.doc h3 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-variation-settings: "opsz" 9, "WONK" 1;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
}
/* ReadTypeScale.page: 2.0 / 1.6 / 1.35 against the reading size. */
.doc h1 { font-size: 2em; }
.doc h2 { font-size: 1.6em; }
.doc h3 { font-size: 1.35em; }

.doc p { margin: 0 0 1.15em; }
.doc a { color: inherit; }

.doc__head { text-align: center; margin-bottom: 2.5rem; }
.doc__head .app-icon { margin: 0 auto 1.75rem; }
/* The title is the wordmark: Pacifico draws "em" and nothing else, in the app
   and here. */
.doc__head h1 {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-variation-settings: normal;
  font-size: 3em;
  line-height: 1;
  letter-spacing: 0;
  color: var(--accent);
  margin: 0 0 0.15em;
}

/*
 * An `##` straight after an `#` is that title's subtitle rather than a section
 * of its own — em sets the pair tight, so the page does too.
 */
.doc__subtitle {
  font-size: 1.2em !important;
  font-weight: 900;
  margin: 0 0 1.1rem;
}

.doc__meta {
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--ink-muted);
  margin: 0;
  text-wrap: balance;
}
@media (max-width: 480px) {
  .doc__meta { font-size: 0.7em; }
}

/*
 * The page's one claim, carried by a callout card in em's clay pigment. em
 * fills a callout at half its colour, so the page's headline card is mixed
 * close to that rather than at the quiet tint the asides use.
 */
.callout.callout--lede {
  margin: 0;
  padding: 1.35rem 1.4rem;
  display: block;
  text-align: center;
  background: color-mix(in srgb, var(--gc-color) 38%, transparent);
  border-color: color-mix(in srgb, var(--gc-color) 55%, transparent);
}
.callout--lede p {
  font-size: 1.35em;
  line-height: 1.3;
  font-family: var(--font-heading);
  font-weight: 900;
  font-variation-settings: "opsz" 9, "WONK" 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

/* One line, drawn at one weight, in the library's colour: the thematic break
   is half the column. */
.doc hr {
  border: 0;
  height: var(--rule-thickness);
  width: 50%;
  margin: 3rem auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

.doc section { margin: 0 0 3rem; }
.doc section > h2 { margin-bottom: 0.6em; display: flex; align-items: center; gap: 0.65rem; }
.doc section > h3 { margin: 2.25rem 0 0.9rem; }

/*
 * A section's icon badge: one of em's own colours (the library accent, or
 * one of the four Paper-and-Ink pigments) at a soft tint behind a Font
 * Awesome Free glyph, self-hosted as inline paths rather than a webfont —
 * consistent with how every other icon on this site (callouts, media cards
 * in the cheatsheet) is already drawn. Set --icon-color per instance; it
 * defaults to the library accent for icons that don't specify one, like the
 * ones in the Everything Else grid.
 */
.section-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 30%;
  background: color-mix(in srgb, var(--icon-color, var(--accent)) 16%, transparent);
  color: var(--icon-color, var(--accent));
}
.section-icon svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
h2 .section-icon { width: 1.85rem; height: 1.85rem; }
h2 .section-icon svg { width: 0.9rem; height: 0.9rem; }

/*
 * Everything Else, as a grid of cards rather than a bullet list — each one
 * a title, a line of description, and its own icon badge.
 */
.doc .feature-grid {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.doc .feature-grid > li {
  position: static;
  padding: 1.15rem 1.25rem;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  border-radius: var(--block-radius);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--rule);
}
.doc .feature-grid > li::before { content: none; }
.feature-grid__item strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}
.feature-grid__item p {
  margin: 0;
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--ink-muted);
}
/* Pages whose body is one long run of prose rather than titled sections. */
.article__body h2 { margin: 2.75rem 0 0.6em; }
.article__body h3 { margin: 2rem 0 0.5em; }
.article__body > *:first-child { margin-top: 0; }
/* A `###` written as a section's aside rather than a heading of its own, set
   tight against the `##` above it. */
.doc h3.aside {
  margin: -0.5em 0 0.8em;
  color: var(--ink-muted);
  font-size: 1.1em;
}

/* The quote's bar is the same mark as the rule, in the same library colour. */
.doc blockquote {
  margin: 1.6rem 0;
  padding-left: var(--nesting-indent);
  border-left: var(--rule-thickness) solid var(--accent);
}
.doc blockquote p {
  font-family: var(--font-heading);
  font-weight: 900;
  font-variation-settings: "opsz" 9, "WONK" 1;
  font-size: 1.2em;
  line-height: 1.35;
  margin: 0;
}

.doc ul {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
}
.doc ul li {
  position: relative;
  padding-left: var(--nesting-indent);
  margin-bottom: 0.6em;
}
.doc ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  width: var(--marker-column);
  color: var(--accent);
  font-family: var(--font-mono);
}

.doc ol {
  list-style: none;
  counter-reset: step;
  margin: 0 0 1.15em;
  padding: 0;
}
.doc ol > li {
  position: relative;
  counter-increment: step;
  padding-left: calc(var(--nesting-indent) + 0.5rem);
  margin-bottom: 0.6em;
}
.doc ol > li::before {
  content: counter(step) ".";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--font-mono);
}

.doc figure {
  margin: 1.75rem 0 0;
}
/* em draws an image as the art alone: the 12pt corner radius and nothing
   round it, with the caption centred underneath. No frame. */
.doc figure img {
  width: 100%;
  height: auto;
  border-radius: var(--block-radius);
}
.doc figcaption {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.74em;
  color: var(--ink-muted);
}

.doc__more {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.doc__more:hover { border-bottom-color: var(--accent); }

/* Prose links wear the library colour, the way a link does inside a document. */
.doc p a,
.doc li a,
.doc td a,
.doc dd a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.doc p a:hover,
.doc li a:hover,
.doc td a:hover,
.doc dd a:hover { border-bottom-color: var(--accent); }

/* ---------- article pages ---------- */

.doc__title {
  font-size: 2em;
  margin: 0 0 0.5rem;
}
.doc__updated {
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--ink-muted);
  margin: 0 0 2.5rem;
}
/*
 * Contents: an outline, not a pile of links. One numbered row per section,
 * the number in the library colour, the row set as a line of the document.
 */
.toc {
  margin: 0 0 3rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--block-radius);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.toc h2 {
  font-family: var(--font-mono) !important;
  font-size: 0.75em !important;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.9rem;
}
.toc ol {
  list-style: none;
  counter-reset: section;
  margin: 0;
  padding: 0;
}
@media (min-width: 34rem) {
  .toc ol { columns: 2; column-gap: 2rem; }
}
.toc ol li {
  counter-increment: section;
  position: relative;
  margin: 0 0 0.15rem;
  padding: 0;
  break-inside: avoid;
}
.toc ol li::before { content: none; }
.toc ol li a {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.3rem 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}
.toc a::before {
  content: counter(section, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: color-mix(in srgb, var(--accent) 75%, var(--ink));
}
.toc a:hover { color: var(--accent); }

/* Every heading is an anchor target, so give it room under the sticky bar. */
.doc h2[id],
.doc h3[id],
.doc summary[id] { scroll-margin-top: 4.5rem; }

/* ---------- toggles ---------- */

/*
 * em renders a Ghost toggle card as a tinted block with a chevron that turns.
 * The help page's questions are the same block, doing the same job.
 */
.toggle {
  border-radius: var(--block-radius);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  padding: 0.85rem 1.1rem;
  margin: 0 0 0.6rem;
}
.toggle > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-weight: 700;
  scroll-margin-top: 4.5rem;
}
.toggle > summary::-webkit-details-marker { display: none; }
.toggle > summary::before {
  content: "›";
  flex: none;
  color: var(--accent);
  font-family: var(--font-mono);
  transition: transform 140ms ease;
}
.toggle[open] > summary::before { transform: rotate(90deg); }
.toggle__body { padding-top: 0.85rem; }
.toggle__body > *:last-child { margin-bottom: 0; }

/* ---------- callouts ---------- */

/*
 * A Ghost callout card: an emoji, a tinted fill, the library colour on the
 * edge. Set --gc-color on the element to use one of em's own pigments.
 */
.callout {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
  border-radius: var(--block-radius);
  background: color-mix(in srgb, var(--gc-color, var(--accent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gc-color, var(--accent)) 28%, transparent);
}
.callout__emoji { flex: none; font-size: 1.1rem; line-height: 1.5; }
.callout__body > *:last-child { margin-bottom: 0; }

/* ---------- code, tables ---------- */

.doc code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.doc pre {
  font-family: var(--font-mono);
  font-size: 0.85em;
  line-height: 1.6;
  overflow-x: auto;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.15em;
  border-radius: var(--block-radius);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.doc pre code { font-size: inherit; }

.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.5em;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--block-radius);
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}
.doc th,
.doc td {
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.doc thead th { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.doc tbody tr:last-child td { border-bottom: 0; }

.doc__end { text-align: center; margin-bottom: 0; }
.doc__actions { margin: 1.5rem 0 0; }

.btn {
  appearance: none;
  font: inherit;
  font-family: var(--font-body);
  font-weight: 700;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-muted);
  cursor: default;
}
/* The toolbar's own scale — same pill, sized to sit in a 4.25rem-ish bar
   beside the nav links rather than the full-size bottom-of-page CTA. */
.btn--sm {
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* The em dash is picked out in the library colour, the way em's editor marks
   it — the greatest punctuation mark there is, wearing the accent. */
.emdash {
  background: none;
  color: var(--accent);
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 1.25rem 3rem;
}
.site-footer__wrap {
  max-width: var(--column);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.footer-signature { display: block; line-height: 0; }
.footer-signature__mark { width: 108px; height: auto; }
/*
 * The signature is somebody else's mark on somebody else's site, so it sits in
 * grey until you reach for it and then takes its own colours — the pilcrow's
 * orange is fixed, never the page's accent.
 */
.fs-pilcrow,
.fs-wordmark {
  fill: var(--ink-muted);
  transition: fill 160ms ease;
}
.footer-signature:hover .fs-pilcrow,
.footer-signature:focus-visible .fs-pilcrow { fill: #FF7700; }
.footer-signature:hover .fs-wordmark,
.footer-signature:focus-visible .fs-wordmark { fill: var(--ink); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
}
.footer-links a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.footer-links a:hover { color: var(--ink); border-bottom-color: var(--rule); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}