/* The app's own tokens (src/styles.css), copied by value: the site is built on
   its own and cannot read the app's sheet. The accent is the one that matters —
   and it is kept for what is not read: the caret, the ring, a chosen edge.
   **Words and buttons take `--link`**, the same blue taken down until white on
   it and it on white both clear 4.5:1 (the accent itself is 3.4:1), since a
   page of prose is held to a standard a 16-pixel swatch in a sidebar is not. */
:root {
  --accent: #008ff0;
  --link: #0070c9;
  --link-hover: #005fae;
  --accent-ink: #fff;
  --alarm: #c2271b;
  --ground: #f1f2f5;
  --surface: #fff;
  /* A box set apart on the white page — a shade off it, with a hairline. */
  --card: #fafafa;
  --border: #e4e4e7;
  --border-strong: #d2d3d8;
  --text: #1e1e1e;
  --text-dim: #6e6e76;
  --ring: rgba(0, 143, 240, 0.25);
  --r-sm: 4px;
  --r-md: 6px;
  --r-xl: 12px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 640px;
  /* How far a picture or a video in a post reaches past the column on each
     side: the words keep the measure, the artwork gets the room. */
  --bleed: 120px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Said to a screen reader and drawn nowhere: the heading a page whose design
   is one picture and one button still has to have. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* `dvh` where it is known: on a phone `vh` is the height with the browser's
   bars put away, so a page exactly that tall has its footer under them. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  font: 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

main {
  flex: 1;
  width: 100%;
  max-width: calc(var(--measure) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.home main,
.page main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* The row at the head of every page: the mark at the left, which is the way
   home, and the sections in the top-right corner. The index has no mark, being
   home, so the links keep to the corner on their own — and the row keeps the
   mark's height whether or not it is drawn, so the links stand at the same
   place on every page rather than four pixels higher where there is no mark to
   centre on. */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  box-sizing: content-box;
  padding: 16px 24px;
}

.top__home {
  display: block;
  line-height: 0;
  color: var(--text);
}

.top__home svg {
  display: block;
  width: 36px;
  height: 36px;
}

.top__nav {
  display: flex;
  gap: 12px;
  margin-left: auto;
  font-size: 17px;
}

.top__nav a {
  color: var(--text-dim);
}

.top__nav a:hover,
.top__nav a[aria-current] {
  color: var(--text);
  text-decoration: none;
}

/* The index: the name, and the app under it. `main` is let out to the window
   for it, since one window of the app wants more than a column of words. */
.home main {
  max-width: none;
  justify-content: flex-start;
}

.home-hero {
  width: 100%;
  padding: 24px 0 64px;
  text-align: center;
}

.home-hero__name {
  margin: 0 0 32px;
  font-size: 120px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.home-hero__window {
  display: block;
  width: min(1200px, 100%);
  height: auto;
  margin: 0 auto;
  opacity: 0;
}

/* An animation rather than a transition, so a picture already in the cache
   still arrives rather than being there: a transition begun in the same frame
   the element is first styled has nothing to move from. */
.home-hero__window.is-loaded {
  animation: arrive 700ms ease forwards;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__window.is-loaded {
    animation: none;
    opacity: 1;
  }
}

/* The sign-up under the window: the form a post ends with, without its card,
   back in the column the words keep. */
.home-signup {
  max-width: 440px;
  margin: 48px auto 0;
}

.home-signup .signup {
  margin: 0;
}

/* On a phone the window is a strip across the screen, and left at the top it
   leaves the lower half of the page empty: the name, the window and the form
   are centred together in the room between the links and the footer instead.
   The address takes whatever the button leaves, rather than a width chosen
   for a desktop column. */
@media (max-width: 720px) {
  .home main {
    justify-content: center;
  }

  .home-hero {
    padding: 0 0 24px;
  }

  .home-hero__name {
    margin-bottom: 24px;
    font-size: 52px;
  }

  .home-signup {
    margin-top: 32px;
  }

  .home-signup .signup__lede {
    font-size: 17px;
  }

  .home-signup .signup__email .signup__field {
    flex: 1;
    width: auto;
  }
}

/* The download page is one thing, centred. */

.hero {
  padding: 12vh 0 96px;
  text-align: center;
}

.hero__icon {
  display: block;
  margin: 0 auto 0;
}

.hero h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hero__tagline {
  max-width: 440px;
  margin: 12px auto 0;
  color: var(--text-dim);
  font-size: 18px;
}

.hero__actions {
  margin: 32px 0 16px;
}

.hero__note {
  max-width: 440px;
  margin: 8px auto 0;
  color: var(--text-dim);
  font-size: 14px;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--r-md);
  background: var(--link);
  color: var(--accent-ink);
  font-weight: 500;
}

.button:hover {
  background: var(--link-hover);
  text-decoration: none;
}

/* The sign-up form on the index: a sentence, then the field and its button on
   one row, the two the same height. */

.signup {
  margin: 24px auto 0;
  max-width: 400px;
}

.signup__lede {
  margin: 0 0 16px;
  color: var(--text-dim);
  font-size: 18px;
}

.signup__row {
  display: flex;
  gap: 8px;
}

.signup__field,
.signup .button {
  height: 40px;
  font: inherit;
  font-size: 15px;
}

.signup__field {
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
}

/* Safari on a phone zooms the page into any field set smaller than 16px when
   it takes the caret, and does not zoom back out. */
@media (pointer: coarse) {
  .signup__field {
    font-size: 16px;
  }
}

.signup__field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.signup .button {
  flex: none;
  padding: 0 18px;
  border: 0;
  cursor: pointer;
}

.signup[aria-busy] .button {
  opacity: 0.6;
  cursor: default;
}

/* Off the page rather than `hidden`, which a bot reads as "leave this alone". */
.signup__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* A line of room is kept for what went wrong, so it arriving moves nothing:
   the page is centred, and a form that grew would push the icon up. */
.signup__message {
  min-height: 1.55em;
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--alarm);
}

/* The row and the answer that ends it stand in one place too, and hand over
   the way the two fields do. */
.signup__stage {
  display: grid;
}

/* The pages an email links to: the row is the button alone, and the answers
   are a line longer than the form's, so the box is wide enough to keep them to
   the one line the button took. */
.signup--link {
  max-width: 480px;
}

.signup--link .signup__row {
  justify-content: center;
}

.signup__row,
.signup__done {
  grid-area: 1 / 1;
}

.signup__done {
  align-self: center;
  margin: 0;
  font-size: 15px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 0s 180ms;
}

.signup__row {
  transition: opacity 180ms ease;
}

.signup[data-ended] .signup__row {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 0s 180ms;
}

.signup[data-ended] .signup__done {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease 180ms;
}

@media (prefers-reduced-motion: reduce) {
  .signup__row,
  .signup__done,
  .signup[data-ended] .signup__row,
  .signup[data-ended] .signup__done {
    transition: none;
  }
}

/* The survey uses native controls and keeps the confirmation pages' layout. */
.hero--signup {
  width: 100%;
}

.signup--survey {
  max-width: 440px;
}

.hero--signup:has([data-step='survey']) {
  padding: 32px 0 48px;
}

.hero--signup:has([data-step='survey']) .hero__icon {
  width: 80px;
  height: 80px;
}

.signup--survey[data-step='survey'] .signup__lede {
  display: none;
}

.signup--survey [hidden] {
  display: none;
}

.signup--survey fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.signup--survey .signup__field {
  width: 100%;
}

.signup__email .signup__row {
  justify-content: center;
}

.signup__email .signup__field {
  width: 260px;
}

.signup--survey textarea.signup__field {
  display: block;
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}

.signup--survey select.signup__field {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%236e6e76' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

@media (forced-colors: active) {
  .signup--survey select.signup__field {
    appearance: auto;
    background-image: none;
  }
}

.signup__survey {
  text-align: left;
}

.signup__address {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--text-dim);
}

.signup__email-value {
  overflow-wrap: anywhere;
  min-width: 0;
}

.signup__text-button {
  flex: none;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.signup__text-button:hover {
  text-decoration: underline;
}

.signup__title {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

/* Why the questions are worth answering, under the title: the survey is what
   early access and the beta are chosen from. */
.signup__intro {
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.5;
}

.signup__title:focus,
.signup--survey .signup__done:focus {
  outline: none;
}

.signup__hint {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 13px;
}

.signup--survey .signup__question {
  margin-top: 22px;
}

.signup__question > label,
.signup__question legend,
.signup__other > label {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}

.signup__optional {
  color: var(--text-dim);
  font-weight: 400;
}

.signup__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.signup__choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 14px;
  cursor: pointer;
}

.signup__choice:has(:checked) {
  border-color: var(--accent);
  background: var(--ground);
}

.signup__choice input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.signup__usage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.signup__usage .signup__question {
  display: flex;
  flex-direction: column;
}

.signup__usage .signup__field {
  margin-top: auto;
}

.signup__question--wide {
  grid-column: 1 / -1;
}

@media (max-width: 480px) {
  .signup__usage {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.signup__other {
  margin-top: 12px;
}

.signup__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}

.signup--survey .signup__done {
  opacity: 1;
  visibility: visible;
  transition: none;
}

.signup--survey[aria-busy] .signup__text-button {
  opacity: 0.6;
  cursor: default;
}

/* The changelog. */

.log {
  padding: 48px 0 96px;
}

.log h1 {
  margin: 0 0 32px;
  font-size: 34px;
  letter-spacing: -0.02em;
}

.log__back {
  margin: 0 0 24px;
  font-size: 15px;
}

.release {
  padding: 32px 0;
  border-top: 1px solid var(--border);
}

/* The rule parts one entry from the next; the first has the title over it and
   nothing to be parted from. */
.release:first-of-type,
.post--listed:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.release__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.release__head h1,
.release__head h2 {
  margin: 0;
  font-size: 21px;
}

.release__head a {
  color: inherit;
}

.release__head time {
  color: var(--text-dim);
  font-size: 15px;
}

.release__body ul {
  margin: 0;
  padding-left: 20px;
}

.release__body li + li {
  margin-top: 6px;
}

/* A picture or a video in an entry fills the column and no more; in a post it
   reaches past it, below. */
.release__body img,
.release__body video,
.post__body img,
.post__body video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}

/* The blog: the changelog's column, with a post where a release was. The
   section takes the whole column, since `main` centres its children and a
   list of posts shrunk to its widest line would wander with its content. */

.blog {
  width: 100%;
  padding: 48px 0 96px;
}

.blog__title {
  margin: 0 0 32px;
  font-size: 34px;
  letter-spacing: -0.02em;
}

.blog__title .blog__tag {
  vertical-align: middle;
  font-size: 15px;
  line-height: 20px;
  padding: 2px 8px;
}

.blog__back {
  margin: 0 0 24px;
  font-size: 15px;
}

.blog__empty {
  color: var(--text-dim);
}

/* On the index a post is one entry in a column, parted from the next by the
   changelog's rule; on its own page it has the column to itself. */
.post--listed {
  padding: 32px 0;
  border-top: 1px solid var(--border);
}

.post__head {
  margin-bottom: 20px;
}

.post__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.post--listed .post__title {
  font-size: 24px;
}

.post__title a {
  color: inherit;
}

/* Under the words: the tags on a line, drawn as the changelog draws a kind of
   change, and the date on the line below. A tag is a link, in the pill's own
   ink; the date is in the dim ink whether or not it is one. */
.post__meta {
  margin-top: 20px;
  color: var(--text-dim);
  font-size: 15px;
}

.post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.post__date {
  margin: 0;
}

.post__date a {
  color: inherit;
}

.post__tag {
  color: var(--text-dim);
  border-color: var(--border);
}

.post__tag:hover {
  color: var(--text);
  border-color: var(--border-strong);
  text-decoration: none;
}

/* The words of a post. Measured against the body's 16/1.55, with the rhythm a
   paragraph sets: one line's worth between blocks, and nothing above the
   first or below the last so the head and the rule either side sit true. */
.post__body > :first-child {
  margin-top: 0;
}

.post__body > :last-child {
  margin-bottom: 0;
}

.post__body p,
.post__body ul,
.post__body ol,
.post__body pre,
.post__body blockquote {
  margin: 0 0 20px;
}

.post__body h2,
.post__body h3 {
  margin: 36px 0 12px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.post__body h2 {
  font-size: 24px;
}

.post__body h3 {
  font-size: 19px;
}

.post__body ul,
.post__body ol {
  padding-left: 24px;
}

.post__body li + li {
  margin-top: 6px;
}

.post__body blockquote {
  padding-left: 16px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-dim);
}

.post__body hr {
  margin: 36px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.post__body code {
  font: 0.875em/1.5 var(--font-mono);
}

.post__body :not(pre) > code {
  padding: 1px 4px;
  background: var(--ground);
  border-radius: var(--r-sm);
}

.post__body pre {
  padding: 14px 16px;
  overflow-x: auto;
  background: var(--ground);
  border-radius: var(--r-md);
}

/* Tables share the article's quiet palette. A wrapper preserves native table
   semantics while allowing long rows to scroll independently on small screens. */
.post__body .post-table {
  margin: 24px 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.post__body .post-table:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

.post__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums;
}

.post__body th,
.post__body td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.post__body th {
  background: var(--card);
  font-weight: 600;
}

.post__body thead + tbody tr:first-child,
.post__body tbody tr + tr {
  border-top: 1px solid var(--border);
}

.post__body :is(th, td)[style*="text-align:right"],
.post__body :is(th, td)[style*="text-align: right"] {
  white-space: nowrap;
}

.post__body caption {
  padding: 12px 16px;
  text-align: left;
  color: var(--text-dim);
  font-size: 13px;
}

@media (max-width: 480px) {
  .post__body th,
  .post__body td {
    padding: 10px 12px;
  }
}

/* Artwork and tables stand wider than the words —
   `--bleed` past the column each side, centred on it, and never past the
   window's own inset. Markdown wraps a lone picture or video in a paragraph,
   so it is matched there; figures and table wrappers carry their own bleed. */
.post__body p > img,
.post__body p > video,
.post__body > figure,
.post__body .post-table {
  position: relative;
  left: 50%;
  width: min(100% + 2 * var(--bleed), 100vw - 48px);
  max-width: none;
  transform: translateX(-50%);
}

.post__body figure {
  margin: 20px 0;
}

.post__body figure > img,
.post__body figure > video {
  width: 100%;
  margin: 0;
}

/* A clip that can be paused from the keyboard says where the focus is, as a
   link does; the ring sits outside the picture's own rounded edge. */
.post__body video:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.post__body figcaption {
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 15px;
  text-align: center;
}

.post__more {
  margin: 16px 0 0;
  font-size: 16px;
}

/* Under a post, the one before it and the one after: a word saying which, the
   title under it, each a link the width of its half. */
.post__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.post__nav-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
}

.post__nav-link:hover {
  text-decoration: none;
}

.post__nav-link:hover .post__nav-title {
  text-decoration: underline;
}

.post__nav-link--newer {
  grid-column: 2;
  text-align: right;
}

.post__nav-word {
  color: var(--text-dim);
  font-size: 14px;
}

.post__nav-title {
  font-weight: 500;
}

/* The pages of the index and of the changelog: a step either way and the
   numbers between, the current one drawn as a fact rather than a link. */
.pages {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 15px;
}

.pages__list {
  display: flex;
  gap: 4px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.pages__page {
  display: inline-block;
  min-width: 28px;
  padding: 0 8px;
  line-height: 28px;
  text-align: center;
  border-radius: var(--r-md);
  color: var(--text-dim);
}

a.pages__page:hover {
  color: var(--text);
  background: var(--ground);
  text-decoration: none;
}

.pages__page[aria-current] {
  color: var(--text);
  background: var(--ground);
  font-weight: 500;
}

/* The box that asks for an address: the home page's form, survey and all, on
   a card a shade off the page, centred, with the home form's own rules for
   everything in it. The card fades between the steps as the hero does. */
.subscribe {
  margin-top: 48px;
  padding: 28px 24px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--r-xl);
  text-align: center;
}

.subscribe .signup {
  max-width: none;
  margin: 0;
}

.subscribe .signup__lede {
  font-size: 17px;
  color: var(--text);
}

.subscribe .signup__message:empty {
  display: none;
}

/* The newest few, under the box: a date in a column and the title beside it. */
.recent {
  margin-top: 48px;
}

.recent__title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
}

.recent__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recent__item {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 6px 0;
}

.recent__date {
  flex: none;
  width: 156px;
  color: var(--text-dim);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .post__nav {
    grid-template-columns: 1fr;
  }

  .post__nav-link--newer {
    grid-column: 1;
    text-align: left;
  }

  .recent__item {
    flex-direction: column;
    gap: 0;
  }

  .subscribe .signup__email .signup__row {
    flex-direction: column;
  }

  .subscribe .signup__email .signup__field {
    width: 100%;
  }
}

/* A shortcut is drawn as the app's keyboard map draws a key (`.shortcuts kbd`
   in src/styles.css), so it is found at a glance in a line of prose. The
   glyphs are wrapped by the markdown rule in eleventy.config.js. */
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  font: 500 0.8125em/1.5 var(--font);
  text-align: center;
  white-space: nowrap;
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--border);
  border-bottom-color: var(--border-strong);
  border-radius: var(--r-sm);
  vertical-align: 0.1em;
  margin: 0 0.1em;
}

.foot {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  color: var(--text-dim);
  font-size: 14px;
}

.foot a {
  color: inherit;
  text-decoration: underline;
}

.pill {
  display: inline-block;
  background: var(--ground);
  color: var(--text-dim);
  border-radius: var(--r-md);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  font-feature-settings: normal;
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  padding: 2px 6px;
  text-size-adjust: 100%;
}

/* A kind of change wears its own hue, as the update sheet's pills do; the ink
   is each hue taken down until it reads at 4.5:1 on its own tint, which the
   brighter values they started as (the accent, an orange, a green) did not. */
.pill.is-added {
  background: #e6f4ff;
  color: #0062a8;
  border-color: #b3e0ff;
}

.pill.is-fixed {
  background: #fef6e7;
  color: #9a4d00;
  border-color: #ffe0b3;
}

.pill.is-removed {
  background: #fff1f0;
  color: #b9241a;
  border-color: #ffb3b3;
}

.pill.is-improved {
  background: #f0fdf4;
  color: #0f7a4e;
  border-color: #b3f0d6;
}