/**
 * Font styles, sizes, and utilities.
 *
 * There are two ways to style text with Assembly: by applying utility classes to every element,
 * or by creating [`prose`](#Prose) sections. All typographic styles can be applied individually with classes that have a
 * `.txt-` prefix. Alternatively, [`prose`](#Prose) sections can be used to apply sensible default styling for all the semantic elements they contain.
 *
 * @section Typography
*/

body,
input,
textarea {
  color: var(--gray-dark);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  font-family: var(--font-stack-base);
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

/**
 * Style text like a keyboard button.
 *
 * @memberof Type basics
 * @example
 * You entered <kbd class='txt-kbd'>Flamingo</kbd>.
 */
.txt-kbd,
.prose:not(.unprose) kbd {
  font-family: var(--font-stack-mono);
  border: 1px solid var(--darken25);
  line-height: var(--line-height-s);
  border-radius: 3px;
  padding: 2px 3px;
  box-shadow: 0 1px 0 0 var(--darken10);
  font-size: 90%;
  font-weight: normal;
}

.txt-kbd--dark,
.prose--dark kbd:not(.unprose) {
  border: 1px solid var(--lighten25);
  box-shadow: 0 1px 0 0 var(--lighten25);
}

/**
 * Style subscript text: small and below the standard line.
 *
 * @memberof Type basics
 * @example
 * The chemical formula of water is H<sub class='txt-sub'>2</sub>O.
 */
.txt-sub,
.prose sub:not(.unprose) {
  top: 0.5ex;
}

.txt-code,
.pre,
.prose code:not(.unprose),
.prose pre:not(.unprose) {
  font-family: var(--font-stack-mono);
  white-space: pre-wrap;
  font-size: 90%; /* mono fonts have naturally large proportions, scale them down to match open sans. */
  line-height: 1.5em; /* code blocks look better with smaller line height */
  background: var(--darken5);
  border-radius: 3px;
}

.txt-code--dark,
.pre--dark,
.prose--dark code:not(.unprose),
.prose--dark pre:not(.unprose) {
  background: var(--lighten5);
}

/**
 * Style a code block.
 *
 * @memberof Type basics
 * @example
 * <pre class='pre'>
 * <code>for each
 *   do this
 * end</code>
 * </pre>
 */
.pre,
.prose pre:not(.unprose) {
  padding: 12px;
  overflow: auto;
}

.prose pre:not(.unprose) {
  margin-bottom: 12px;
}

.prose pre code:not(.unprose) {
  background: transparent;
  padding: 0;
}

/**
 * Style text as inline code.
 *
 * @memberof Type basics
 * @example
 * Make sure you <code class='txt-code'>git checkout</code> the repository.
 */
.txt-code,
.prose code:not(.unprose) {
  padding: 2px 4px;
}

/**
 * Apply Assembly's monospaced font stack.
 *
 * @memberof Type utils
 * @example
 * <div class='txt-mono'>txt-mono</div>
 */
.txt-mono {
  font-family: var(--font-stack-mono);
  font-size: 90%; /* mono fonts have naturally large proportions, scale them down to match open sans. */
}

/**
 * Apply a bold font weight.
 *
 * @memberof Type utils
 * @example
 * <div class='txt-bold'>txt-bold</div>
 */
.txt-bold {
  font-weight: bold !important;
}

/**
 * Classes for font size and line height, lists, block quotes, code blocks, and more.
 *
 * @section Type basics
 * @memberof Typography
 */

/**
 * Classes for the headline text scale. Line heights are 1.3333 times font size or less.
 * All text size classes include `-mm`, `-ml`, and `-mxl` variations to target screen sizes.
 *
 * @memberof Type basics
 * @group
 * @example
 * <div class='txt-h1'>Malesuada Pharetra Ridiculus</div>
 * <div class='txt-h2'>Malesuada Pharetra Ridiculus</div>
 * <div class='txt-h3'>Malesuada Pharetra Ridiculus</div>
 * <div class='txt-h4'>Malesuada Pharetra Ridiculus</div>
 * <div class='txt-h5'>Malesuada Pharetra Ridiculus</div>
 */
.txt-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

.txt-h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

.txt-h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

.txt-h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

.txt-h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}
/** @endgroup */

/**
 * Classes for the body text scale. Line heights are 1.5 times font size or more.
 * All text size classes include `-mm`, `-ml`, and `-mxl` variations to target screen sizes.
 *
 * @memberof Type basics
 * @group
 * @example
 * <div class='txt-xl'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>
 * <div class='txt-l'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>
 * <div class='txt-m'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>
 * <div class='txt-ms'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>
 * <div class='txt-s'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>
 * <div class='txt-xs'>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</div>
 */
.txt-xl {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
}

.txt-l {
  font-size: var(--font-size-l);
  line-height: var(--line-height-l);
}

.txt-m {
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
}

.txt-ms {
  font-size: var(--font-size-ms);
  line-height: var(--line-height-ms);
}

.txt-s {
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
}

.txt-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
}
/** @endgroup */

/**
 * Style an abbreviation or acronym.
 *
 * @memberof Type basics
 * @example
 * How do you feel about <abbr title='Cascading Style Sheets' class='txt-abbr'>CSS</abbr>?
 */
.txt-abbr,
.prose abbr:not(.unprose) {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

/**
 * Style a line separating two blocks of text.
 *
 * @memberof Type basics
 * @example
 * <hr class='txt-hr'>
 */
.txt-hr,
.prose hr:not(.unprose) {
  margin: 17px 0; /* margin + height = 18px */
  border: 0;
  height: 1px;
  background: var(--darken10);
}

.txt-hr--dark,
.prose--dark hr:not(.unprose) {
  background: var(--lighten10);
}

/* Lists */
.prose ol:not(.unprose),
.prose ul:not(.unprose),
.txt-ol,
.txt-ul {
  margin-left: 24px; /* offset list styling */
}

.prose ol:not(.unprose),
.prose ul:not(.unprose) {
  margin-bottom: 12px;
}

/* Less margin bottom for nested lists */
.prose ol ol:not(.unprose),
.prose ul ul:not(.unprose),
.prose ol ol ol:not(.unprose),
.prose ul ul ul:not(.unprose) {
  margin-bottom: 6px;
}

/**
 * Style an unordered list. Works with any element type if the list items use the `txt-li` class, but you should almost always use it with a `<ul>` element.
 *
 * @memberof Type basics
 * @example
 * <div class='txt-ul'>
 *   <div class='txt-li'>one</div>
 *   <div class='txt-li'>two</div>
 *   <div class='txt-li'>three</div>
 * </div>
 */
.txt-ul,
.prose ul:not(.unprose) {
  list-style: disc;
}

/**
 * Style an ordered list. This does *not* work (in Firefox) without semantic elements `<ol>` and `<li>`, so use those.
 *
 * @memberof Type basics
 * @example
 * <ol class='txt-ol'>
 *   <li class='txt-li'>one</li>
 *   <li class='txt-li'>two</li>
 *   <li class='txt-li'>three</li>
 * </ol>
 */
.txt-ol,
.prose ol:not(.unprose) {
  list-style: decimal;
}

.txt-li,
.prose li:not(.unprose) {
  display: list-item;
}

.prose li:not(.unprose) {
  margin-bottom: 6px;
}

/**
 * Style a block quotation.
 *
 * @memberof Type basics
 * @example
 * <div class='txt-blockquote'>Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.</div>
 */
.txt-blockquote,
.prose blockquote:not(.unprose) {
  quotes: none;
  font-style: normal;
  padding-left: 18px;
}

.prose blockquote:not(.unprose) {
  margin-bottom: 18px;
}

.txt-sup,
.txt-sub,
.prose sup:not(.unprose),
.prose sub:not(.unprose) {
  height: 0;
  line-height: 1;
  vertical-align: baseline;
  position: relative;
  font-size: 75%;
}

/**
 * Style superscript text: small and above the standard line.
 *
 * @memberof Type basics
 * @example
 * Planet earth is seven years old. <sup class='txt-sup'>citation needed</sup>
 */
.txt-sup,
.prose sup:not(.unprose) {
  bottom: 1ex;
}

/**
 * Single-purpose classes for styling text.
 *
 * @section Type utils
 * @memberof Typography
 */

/**
 * Apply a light font weight.
 *
 * @memberof Type utils
 * @example
 * <div class='txt-light'>txt-light</div>
 */
.txt-light {
  font-weight: lighter !important;
}

/**
 * Apply a normal font weight.
 *
 * @memberof Type utils
 * @example
 * <div class='txt-normal'>txt-normal</div>
 */
.txt-normal {
  font-weight: normal !important;
}

/**
 * Italicize text.
 *
 * @memberof Type utils
 * @example
 * <div class='txt-em'>em</div>
 */
.txt-em { font-style: italic !important; }

/**
 * Capitalize all letters in an element.
 *
 * @memberof Type utils
 * @example
 * <div class='txt-uppercase'>UpPeRcAsE</div>
 */
.txt-uppercase { text-transform: uppercase !important; }

/**
 * Lowercase all letters in an element.
 *
 * @memberof Type utils
 * @example
 * <div class='txt-lowercase'>LoWeRcAsE</div>
 */
.txt-lowercase { text-transform: lowercase !important; }

/**
 * Capitalize all words in an element.
 *
 * @memberof Type utils
 * @example
 * <div class='txt-capitalize'>all words are capitalized</div>
 */
.txt-capitalize { text-transform: capitalize !important; }

/**
 * Capitalize the first letter in an element.
 *
 * @memberof Type utils
 * @example
 * <div class='txt-capitalize-first'>first word only is capitalized</div>
 */
.txt-capitalize-first { text-transform: lowercase !important; }
.txt-capitalize-first::first-letter { text-transform: capitalize !important; }

/**
 * Underline text.
 *
 * @memberof Type utils
 * @example
 * <div class='txt-underline'>txt-underline</div>
 */
.txt-underline { text-decoration: underline !important; }

/**
 * Underline text on hover.
 *
 * @memberof Type utils
 * @example
 * <span class='txt-underline-on-hover'>txt-underline-on-hover</span>
 */
.txt-underline-on-hover:hover { text-decoration: underline !important; }

/**
 * Strikethrough text.
 *
 * @memberof Type utils
 * @example
 * <div class='txt-strike'>txt-strike</div>
 */
.prose del:not(.unprose),
.prose s:not(.unprose),
.txt-strike { text-decoration: line-through !important; }

/**
 * Prevent text from wrapping.
 *
 * @memberof Type utils
 * @example
 * <div class='border border--gray w60 txt-nowrap'>
 *   This text is too long for its container
 * </div>
 */
.txt-nowrap {
  white-space: nowrap !important;
}

/**
 * Allow words to break across lines.
 *
 * @memberof Type utils
 * @example
 * <div class='border border--gray w60 txt-break-word'>
 *   Thiswordistoolongforitscontainer
 * </div>
 */
.txt-break-word {
  word-break: break-all !important;
}

/**
 * Truncate text to a single line contained within the width
 * of its container, ending with an ellipsis if it overflows.
 *
 * @memberof Type utils
 * @example
 * <div class='border border--gray w60 txt-truncate'>
 *   This text is too long for its container
 * </div>
 */
.txt-truncate {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/**
 * Apply extra space between letters.
 *
 * @memberof Type utils
 * @group
 * @example
 * <div class='txt-spacing05'>spaced out</div>
 * <div class='txt-spacing2'>way spaced out</div>
 */
.txt-spacing05 { letter-spacing: 0.05em !important; }
.txt-spacing1 { letter-spacing: 0.1em !important; }
.txt-spacing2 { letter-spacing: 0.2em !important; }
/** @endgroup */

/**
 * Apply text shadows.
 *
 * @group
 * @memberof Type utils
 * @example
 * <div class='txt-shadow-darken10'>ghost world</div>
 * <div class='txt-shadow-darken25'>ghost world</div>
 * <div class='txt-shadow-darken50'>ghost world</div>
 * <div class='txt-shadow-lighten10 bg-darken75'>ghost world</div>
 * <div class='txt-shadow-lighten25 bg-darken75'>ghost world</div>
 * <div class='txt-shadow-lighten50 bg-darken75'>ghost world</div>
 */
.txt-shadow-darken10 { text-shadow: 1px 1px 1px var(--darken10); }
.txt-shadow-darken25 { text-shadow: 1px 1px 1px var(--darken25); }
.txt-shadow-darken50 { text-shadow: 1px 1px 1px var(--darken50); }

.txt-shadow-lighten10 { text-shadow: 1px 1px 1px var(--lighten10); }
.txt-shadow-lighten25 { text-shadow: 1px 1px 1px var(--lighten25); }
.txt-shadow-lighten50 { text-shadow: 1px 1px 1px var(--lighten50); }
/** @endgroup */

/**
 * Conveniently style large blocks of semantic markup.
 * `prose` is designed to only be used when content is generated by a markdown processor and you don't have control over each element's class list.
 *
 * @section Prose
 * @memberof Typography
 */

/**
 * Apply appropriate styles based on semantic markup. Supported elements are:
 * `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `table`, `small`, `ul`, `ol`, `a`, `abbr`, `hr`, `blockquote`, `kbd`, `sub`, `sup`, `code`, `pre`, `del`, `s`, `img`, and `video`.
 *
 * @memberof Prose
 * @selectors .prose
 * @example
 * <div class="prose">
 *   <h1>Tortor Porta</h1>
 *   <small>Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.</small>
 *   <hr/>
 *   <p>Cras justo odio, dapibus ac facilisis<sup>[note]</sup> in, <a href='#'>egestas eget quam</a>. Lorem ipsum <del>dolor</del> sit amet, consectetur adipiscing elit. H<sub>2</sub>0 electrolitis.</p>
 * </div>
 */

/**
 * Remove prose styling. Useful when you need to display, for example, a custom form inside an otherwise consistently-styled document.
 *
 * **Apply this class directly to the element you want to unstyle.** It does not work on containers, only on the elements themselves.
 *
 * @memberof Prose
 * @selectors .unprose
 * @example
 * <div class="prose">
 *   <h1>felis euismod semper</h1>
 *   <a class='btn'>Click me</a>
 *   <h1 class='unprose mt18'>Morbi leo risus</h1>
 *   <a class='btn unprose'>Click me</a>
 * </div>
 */

/**
 * Invert the coloring of textual content inside `prose` sections, so it is legible against dark backgrounds.
 *
 * @memberof Prose
 * @example
 * <div class="prose prose--dark bg-gray-deep">
 *   <h1>Tortor Porta</h1>
 *   <small>Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.</small>
 *   <hr/>
 *   <p>Cras justo odio, dapibus ac facilisis<sup>[note]</sup> in, <a href='#'>egestas eget quam</a>. Lorem ipsum <del>dolor</del> sit amet, consectetur adipiscing elit. H<sub>2</sub>0 electrolitis.</p>
 * </div>
 */
.prose--dark {
  color: var(--white);
}

/* start prose-specific rules (no similar txt-) */
.prose h1:not(.unprose) {
  font-weight: bold;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  margin-bottom: 12px;
  padding-top: 36px;
}

.prose h2:not(.unprose) {
  font-weight: bold;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  margin-bottom: 12px;
  padding-top: 24px;
}

.prose h3:not(.unprose) {
  font-weight: bold;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  margin-bottom: 12px;
  padding-top: 24px;
}

.prose h4:not(.unprose) {
  font-weight: bold;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  margin-bottom: 12px;
  padding-top: 18px;
}

.prose h5:not(.unprose),
.prose h6:not(.unprose) {
  font-weight: bold;
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  margin-bottom: 12px;
  padding-top: 12px;
}

/* inherits from txt-* declaration on parent */
.prose p:not(.unprose) {
  margin-bottom: 12px;
}

.prose small:not(.unprose) {
  display: block;
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  margin-bottom: 12px;
}

.prose a:not(.unprose) {
  color: var(--blue);
  text-decoration: underline;
}

.prose--dark a:not(.unprose) {
  color: var(--white);
}

.prose a:not(.unprose):hover {
  color: var(--blue-dark);
}

.prose--dark a:not(.unprose):hover {
  color: var(--lighten75);
}

.prose img:not(.unprose),
.prose video:not(.unprose) {
  margin-bottom: 12px;
}

.prose h1:first-child:not(.unprose),
.prose h2:first-child:not(.unprose),
.prose h3:first-child:not(.unprose),
.prose h4:first-child:not(.unprose),
.prose h5:first-child:not(.unprose),
.prose h6:first-child:not(.unprose) {
  padding-top: 0;
}

/* Clear bottom margins if element is last in container */
.prose *:last-child:not(.unprose) {
  margin-bottom: 0;
}
/* end prose-specific rules */

/**
 * Control the horizontal alignment of an element's inline children.
 *
 * @memberof Type utils
 * @group
 * @example
 * <div class='align-l'>.align-l</div>
 * <div class='align-r'>.align-r</div>
 * <div class='align-center'>.align-center</div>
 */
.align-l { text-align: left !important; }
.align-r { text-align: right !important; }
.align-center { text-align: center !important; }
/** @endgroup */

/**
 * Control the vertical alignment of an inline or table-cell element.
 *
 * @memberof Type utils
 * @group
 * @example
 * <div>
 *   <span class='align-t inline-block h12 w12 border border--gray'></span>
 *   <span class='align-t inline-block h60 border border--gray'>align-t</span>
 * </div>
 * <div class='mt3'>
 *   <span class='align-middle inline-block h12 w12 border'></span>
 *   <span class='align-middle inline-block h60 border border--gray'>align-middle</span>
 * </div>
 * <div>
 *   <span class='align-b inline-block h12 w12 border border--gray'></span>
 *   <span class='align-b inline-block h60 border border--gray'>align-b</span>
 * </div>
 */
.align-t { vertical-align: top !important; }
.align-b { vertical-align: bottom !important; }
.align-middle { vertical-align: middle !important; }
/** @endgroup */