/* Layout */

body.chapter-page {
    display: grid;
    grid-template-areas:
        ".    top-title ."
        ".    top-heading ."
        ".    top-time    ."
        ".    top-nav     ."
        "left main        ."
        "left footer      ."
    ;
}

@media (max-width: 760px) {
    body.chapter-page { grid-template-columns: 0 100vw 0; }
}

@media not (max-width: 760px) {
   body.chapter-page { grid-template-columns: 1fr 760px 1fr; }
}


@media (max-width: 760px) {
    body.chapter-page header nav.chapter-page-internal-nav {
        display: none;
    }

    /* The box outlining code snippets should overflow the screen. */
    div.buffer,
    div.snippet {
        width: 700px;
    }
}

body.chapter-page header {
    /* Chrome doesn't respect subgrid, so we need this grid to have the same
 areas as the top one. This unfortunately only works in recent versions of
 Chrome and doesn't work in Safari. */
    display: contents;
}

body.chapter-page header h1.bookTitle {
    grid-area: top-title;
}

body.chapter-page header h1.chapter-page-heading {
    grid-area: top-heading;
    font-weight: 400;
}

body.chapter-page header div.time {
    grid-area: top-time;
    display: flex;
    align-items: center;
}

body.chapter-page header nav.chapter-page-nav {
    grid-area: top-nav;
}

body.chapter-page header nav.chapter-page-nav ol {
    column-count: 2;
    list-style: decimal;
}

body.chapter-page header nav.chapter-page-internal-nav {
    grid-area: left;
    /* TODO: Sticky positioning means that the bottom links overflow the page
       and are never clickable.*/
    /* position: sticky; */
    top: 0;
    height: max-content;
}

body.chapter-page main {
    grid-area: main;
}

body.chapter-page footer {
    grid-area: footer;
    display: flex;
    flex-direction: row-reverse;
}

/* Font */

body.chapter-page header nav.chapter-page-nav {
    text-transform: capitalize;
    font-family: IBM Plex Sans;
    font-variant: small-caps;
    color: #4e8cce;
}

body.chapter-page header nav.chapter-page-nav a {
    text-decoration: none;
}

body.chapter-page header nav.chapter-page-nav a.here {
    font-weight: 600;
    color: #1663b4;
}

body.chapter-page header nav.chapter-page-nav a:hover,
body.chapter-page header nav.chapter-page-nav a:focus {
  text-decoration: underline solid #8aa4ba;
}

body.chapter-page header nav.chapter-page-internal-nav ol {
    list-style: none;
}

body.chapter-page header nav.chapter-page-internal-nav a {
    font-variant: small-caps;
    font-size: 18px;
    font-family: IBM Plex Sans;
    font-weight: 400;
    text-decoration: none;
}

body.chapter-page header nav.chapter-page-internal-nav a:hover,
body.chapter-page header nav.chapter-page-internal-nav a:focus {
  text-decoration: underline solid #8aa4ba;
}

body.chapter-page footer a {
    font-family: IBM Plex Sans;
    font-variant: small-caps;
}

body.chapter-page main {
    border-top: 1px dashed #8aa4ba;
    border-bottom: 1px dashed #8aa4ba;
    background-color: white;
}

body.chapter-page header h1.chapter-page-heading {
    font-family: IBM Plex Sans;
    font-size: 28px;
}

/* Spacing */

body.chapter-page header nav.chapter-page-internal-nav ol {
    padding: 20px;
}

body.chapter-page header nav.chapter-page-internal-nav ol li {
    padding-top: 20px;
    padding-bottom: 20px;
}

body.chapter-page footer {
    padding: 30px;
}

























body.chapter-page header h1.bookTitle {
    margin: 0;
    margin-bottom: 24px;
}

body.chapter-page header h1.chapter-page-heading {
    margin: 0;
}

body.chapter-page header div.time {
    margin-top: 12px;
    margin-bottom: 36px;
}

body.chapter-page header div.time span.icon {
    margin-right: 6px;
}

body.chapter-page header nav.chapter-page-nav {
    padding-left: 30px;
    margin-bottom: 31.68px;
}

body.chapter-page header nav.chapter-page-nav ol {
    margin: 0;
}

body.chapter-page main {
    padding-top: 15.84px;
    padding-bottom: 47.52px;
    margin-bottom: 47.52px;
}

body.chapter-page main,
body.getting-started header > h1.intro-name,
body.getting-started main {
    padding-left: 30px;
    padding-right: 30px;
}

body.chapter-page main h2,
body.getting-started main h2 {
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-variant: small-caps;
  font-size: 21px;
}

body.chapter-page main h3 {
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-variant: small-caps;
  font-size: 18px;
}

/* Main contents */

/* Layout */
body.chapter-page main h2.headline-link,
body.chapter-page main div.action,
body.getting-started main div.action {
    display: flex;
    align-items: center;
}

body.chapter-page main ul {
    list-style-type: square;
}

body.chapter-page main div.book div.read-navigation {
    display: flex;
    justify-content: space-around;
}

body.chapter-page main div.book div.read-navigation button {
    width: 50%;
    display: flex;
    justify-content: center;
}
body.chapter-page main div.book div.read-navigation button span {
    display: block;
}

/* Spacing */

body.chapter-page main p {
  margin-top: 12px;
  margin-bottom: 12px;
}

body.chapter-page main ul {
    padding-left: 0;
    margin-top: 36px;
    margin-bottom: 36px;
    margin-left: 36px;
    margin-right: 36px;
}

body.chapter-page main div.action,
body.getting-started main div.action {
  margin-top: 36px;
  margin-bottom: 36px;
  margin-left: 36px;
  margin-right: 36px;
  padding: 0;
}

body.chapter-page main div.action > span,
body.getting-started main div.action > span {
    margin-right: 12px;
}
body.chapter-page main h2.headline-link > a > span {
    margin-right: 12px;
    width: 21px;
    height: 21px;
    display: inline-block;
}
body.chapter-page main h2.headline-link > a > span {
    background: no-repeat url("/assets/link.svg");
    background-size: 100%;
}
body.chapter-page main h2.headline-link > a:focus > span,
body.chapter-page main h2.headline-link > a:hover > span {
    background: no-repeat url("/assets/link-focus.svg");
    background-size: 100%;
}

body.chapter-page main pre.minibuffer {
  margin-top: 36px;
  margin-bottom: 36px;
  margin-left: 36px;
  margin-right: 36px;
}

body.chapter-page main div.buffer,
body.getting-started main div.buffer,
body.chapter-page main div.special-form,
body.chapter-page main p.screenshot,
body.chapter-page main img.screenshot,
body.chapter-page main > div.snippet,
body.chapter-page main > div.env {
  margin-top: 36px;
  margin-bottom: 36px;
}

body.chapter-page main div.command-example {
  margin-top: 36px;
  margin-bottom: 36px;
  margin-left: 36px;
  margin-right: 36px;
}

body.chapter-page main div.book div.snippet {
    margin-bottom: 0;
}

body.chapter-page main div.book div.read-navigation > button span {
    background-size: 100%;
    width: 21px;
    height: 21px;
}

body.chapter-page main div.book div.read-navigation button {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left:0;
    padding-right: 0;
}

body.chapter-page main h2 {
  margin-top: 48px;
}

body.chapter-page main h3 {
  margin-top: 48px;
}


body.chapter-page main div.quotation {
    margin-bottom: 48px;
}

body.chapter-page main div.quotation > p {
    padding: 0 36px 0 36px;
    font-style: italic;
}

body.chapter-page main div.quotation > p.author {
    font-weight: 600;
    text-align: right;
}

body.chapter-page main div.quotation > p.author:before {
  content: "⸺ ";
}

/* Colours and fonts */

body.chapter-page main p.screenshot,
body.chapter-page main img.screenshot,
body.chapter-page main div.env {
  border: 1px solid #b7b17b52;
  box-shadow: -5px 5px 5px #fffdf3;
}

body.chapter-page main p.screenshot {
  background-color: #fffdf3;
  font-style: italic;
  height: 200px;
  padding-top: 20px;
  text-align: center;
}

body.chapter-page main img.screenshot {
    width: 100%;
}

body.chapter-page main pre.minibuffer,
body.chapter-page main div.buffer,
body.getting-started main div.buffer,
body.chapter-page main div.special-form,
body.chapter-page main div.snippet {
  border: 1px solid #b7b17b52;
  box-shadow: -5px 5px 5px #fffdf3;
  padding: 1px 0 1px 0;
  border-style: solid;
  background-color: #fffdf3;
  font-family: Source Code Pro, monospace;
}

body.chapter-page main div.buffer > div.modeline,
body.getting-started main div.buffer > div.modeline {
  background-color: #4e8cce54;
}

body.chapter-page main code.inline,
body.whats-inside main code.inline,
body.getting-started main code.inline {
  font-family: Source Code Pro, monospace;
  padding: 0 5px 0 5px;
  background-color: #4e8cce05;
  hyphens: none;
}

@media (max-width: 760px) {
    body.chapter-page main code.inline,
body.whats-inside main code.inline,
body.getting-started main code.inline {
  font-size: 16px;
}
}

@media not (max-width: 760px) {
   body.chapter-page main code.inline,
body.whats-inside main code.inline,
body.getting-started main code.inline {
  font-size: 16px;
}
}

body.chapter-page main kbd {
  font-family: Source Code Pro, monospace;
  padding: 0 5px 0 5px;
  background-color: #4e8cce05;
  hyphens: none;
}

body.chapter-page main svg.cartography {
    background-color: #fffdf3;
    border: 1px dashed #8aa4ba;
    margin: 50px;
}

/* A button always has a border */
body.chapter-page main div.book div.read-navigation button {
    border-width: 0 1px 1px 1px;
    border-style: solid;
}

body.chapter-page main div.book div.read-navigation > button.read-previous-page {
    border-radius: 0 0 0 5px;
}

body.chapter-page main div.book div.read-navigation > button.read-next-page {
    border-radius: 0 0 5px 0;
}

/* A button that is non-focused always has a transparent border */
body.chapter-page main div.book div.read-navigation button {
    border-color: transparent;
    background-color: #4e8cce;
}

/* A disabled button has a faded background */
body.chapter-page main div.book div.read-navigation button[disabled] {
    background-color: #94bae1;
}

/* An enabled button has the same style for active and non-focused */
body.chapter-page main div.book div.read-navigation button:not([disabled]),
body.chapter-page main div.book div.read-navigation button:not([disabled]):active {
    cursor: pointer;
    background-color: #4e8cce;
}

body.chapter-page main div.book div.read-navigation > button.read-next-page:not([disabled]) span,
body.chapter-page main div.book div.read-navigation > button.read-next-page:not([disabled]):active:focus span {
    background: no-repeat url("/assets/read-next.svg");
}

body.chapter-page main div.book div.read-navigation > button.read-previous-page:not([disabled]) span,
body.chapter-page main div.book div.read-navigation > button.read-previous-page:not([disabled]):active:focus span {
    background: no-repeat url("/assets/read-previous.svg");
}

/* A focused button is always enabled */
body.chapter-page main div.book div.read-navigation > button:not([disabled]):focus:not(:active),
body.chapter-page main div.book div.read-navigation > button:not([disabled]):hover:not(:active) {
    background-color: white;
    border-color: #4e8cce;
    /* The default browser style adds an outline. Override it here. */
    outline: none;
}

body.chapter-page main div.book div.read-navigation > button.read-next-page:focus:not([disabled]) span,
body.chapter-page main div.book div.read-navigation > button.read-next-page:hover:not([disabled]) span {
    background: no-repeat url("/assets/read-next-focus.svg");
}

body.chapter-page main div.book div.read-navigation > button.read-previous-page:focus:not([disabled]) span,
body.chapter-page main div.book div.read-navigation > button.read-previous-page:hover:not([disabled]) span {
    background: no-repeat url("/assets/read-previous-focus.svg");
}

/* Tab panel */

/* Layout */
body.getting-started main div.js-tabs ul.js-tablist,
body.chapter-page main div.js-tabs ul.js-tablist {
    display: flex;
    flex-direction: row;
    list-style-type: none;
}

body.getting-started main div.js-tabs div.js-tabcontent[aria-hidden="true"],
body.chapter-page main div.js-tabs div.js-tabcontent[aria-hidden="true"] {
    display: none;
}

/* Spacing */




body.getting-started main div.js-tabs ul.js-tablist,
body.chapter-page main div.js-tabs ul.js-tablist {
    margin: 0;
    padding-left: 24px;
    padding-top: 24px;
    padding-bottom: 6px;
}

body.getting-started main div.js-tabs ul.js-tablist li.js-tablist__item a,
body.chapter-page main div.js-tabs ul.js-tablist li.js-tablist__item a {
    padding: 6px 12px;
}

/* Colours and fonts */
body.getting-started main div.js-tabs ul.js-tablist,
body.chapter-page main div.js-tabs ul.js-tablist {
    border-bottom: 1px dashed #8aa4ba;
}

body.getting-started main div.js-tabs ul.js-tablist li.js-tablist__item a,
body.chapter-page main div.js-tabs ul.js-tablist li.js-tablist__item a {
    border-radius: 5px 5px 0 0;
    font-variant: small-caps;
    font-family: IBM Plex Sans;
}

body.getting-started main div.js-tabs ul.js-tablist li.js-tablist__item a[aria-selected="true"],
body.chapter-page main div.js-tabs ul.js-tablist li.js-tablist__item a[aria-selected="true"] {
    /*The selected tab should seem like part of the panel content. It shouldn't
 appear to have a border below it. */
    border-bottom: 5px solid white;
    border-left: 1px dashed #8aa4ba;
    border-right: 1px dashed #8aa4ba;
    border-top: 1px dashed #8aa4ba;
}

body.getting-started main div.js-tabs ul.js-tablist li.js-tablist__item a:not([aria-selected="true"]),
body.chapter-page main div.js-tabs ul.js-tablist li.js-tablist__item a:not([aria-selected="true"]) {
    background-color: #e9f3ff;
    cursor: pointer;
}