/* The user manual: manual.html and every manual-*.html page.

   Loaded after css/site.css and css/pages.css. The manual reuses the page
   shell, the NOTE aside (.install-note) and the command block (.install-code)
   from pages.css. This file adds what a reference manual needs and a one-column
   page does not: a wider shell, the chapter list at the side, figures with
   captions, settings tables and key caps.

   The chapter list is plain markup, repeated on each page. The site has no
   build step, so a new chapter means one new <li> in each manual page. */

/* ---------------------------------------------------------------------------
   Shell: wider than the other pages, because the chapter list takes a column.
   --------------------------------------------------------------------------- */

.manual .wrap,
.manual .container {
  max-width: 1120px;
}

.manual-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* The prose column keeps a reading measure, however wide the window is. */
.manual-body {
  max-width: 720px;
}

/* ---------------------------------------------------------------------------
   Chapter list
   --------------------------------------------------------------------------- */

.manual-nav {
  position: sticky;
  top: 24px;
  font-size: 13px;
  line-height: 1.5;
}

.manual-nav__group + .manual-nav__group {
  margin-top: 22px;
}

.manual-nav__label {
  font: 11px var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 8px;
}

.manual-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
}

/* .page-content .manual-nav: pages.css colors and underlines each link in a
   list, and this list is navigation, not prose. */
.page-content .manual-nav a {
  display: block;
  border-bottom: 0;
  padding: 4px 0 4px 14px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--muted);
}

.page-content .manual-nav a:hover {
  color: var(--ink);
}

.page-content .manual-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--red);
}

/* ---------------------------------------------------------------------------
   Headings and sections
   --------------------------------------------------------------------------- */

.manual-body h2 {
  font-size: 24px;
  line-height: 1.25;
  margin: 56px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.manual-body > h2:first-child,
.manual-body > .manual-toc + h2 {
  margin-top: 0;
}

.manual-body h3 {
  font-size: 17px;
  line-height: 1.35;
  margin: 34px 0 8px;
}

.manual-body h4 {
  font-size: 14px;
  margin: 24px 0 6px;
}

/* site.css sets no paragraph margin, so two paragraphs would touch. */
.manual-body p {
  margin: 14px 0;
}

.manual-body ul,
.manual-body ol {
  padding-left: 22px;
  line-height: 1.8;
}

.manual-body li + li {
  margin-top: 4px;
}

/* "On this page": the list of h2 anchors at the top of a long chapter. */
.manual-toc {
  margin: 0 0 40px;
  padding: 16px 20px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  font-size: 13px;
}

.manual-toc__label {
  font: 11px var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 6px;
}

.manual-toc ul {
  columns: 2;
  column-gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.manual-toc li + li {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Procedures: a numbered list of actions.
   --------------------------------------------------------------------------- */

.manual-steps {
  counter-reset: step;
  list-style: none;
  padding-left: 0 !important;
}

.manual-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 36px;
}

.manual-steps > li:before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 3px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--red);
  color: var(--red);
  font: 11px/20px var(--mono);
  text-align: center;
}

.manual-steps > li + li {
  margin-top: 10px;
}

/* ---------------------------------------------------------------------------
   Asides. .install-note (from pages.css) is the NOTE. A CAUTION tells you
   about a result that you cannot easily undo.
   --------------------------------------------------------------------------- */

.install-note.manual-caution {
  background: #f3e6e1;
  border-color: #e6cbc3;
  color: #5e4a44;
}

.install-note.manual-caution:before {
  content: "CAUTION";
}

.install-note.manual-tip:before {
  content: "TIP";
}

.manual-body .install-note {
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Figures. The three widths stop a phone screenshot from being drawn as wide
   as the column.
   --------------------------------------------------------------------------- */

.manual-shot {
  margin: 24px 0;
}

.manual-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  box-shadow: 0 18px 30px -22px rgba(28, 40, 37, .45);
}

.manual-shot--phone img {
  max-width: 300px;
}

.manual-shot--tablet img {
  max-width: 560px;
}

.manual-shot--window img {
  max-width: 520px;
}

.manual-shot--dialog img {
  max-width: 380px;
}

/* The QR shot is small. At its natural width it stays sharp. */
.manual-shot--qr {
  text-align: center;
}

.manual-shot--qr img {
  max-width: 340px;
  margin: 0 auto;
}

.manual-shot figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

/* Two figures side by side: for example portrait and landscape. */
.manual-shot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  margin: 24px 0;
}

.manual-shot-row .manual-shot {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Tables: settings, gestures, limits.
   --------------------------------------------------------------------------- */

.manual-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 8px;
  font-size: 13px;
  line-height: 1.6;
}

.manual-table th,
.manual-table td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--rule);
}

.manual-table th {
  font: 11px var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: normal;
  border-bottom-color: var(--ink);
}

.manual-table td:first-child {
  font-weight: 600;
  white-space: nowrap;
  padding-right: 20px;
}

/* A key on a keyboard, or a button on a controller. */
.manual-body kbd {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  font: 12px/19px var(--mono);
  text-align: center;
  background: #fff;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   The chapter cards on manual.html.
   --------------------------------------------------------------------------- */

.manual-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 20px 0;
}

.manual-card {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: border-color .15s;
}

.manual-card:hover {
  border-color: var(--red);
}

.manual-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
}

/* The mode marks are the files in icons/ that the App Store panels use. */
.manual-card__icon {
  width: 20px;
  height: 20px;
}

.manual-card__desc {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* The previous and next chapter, at the foot of each page. */
.manual-pager {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
}

.manual-pager a {
  color: var(--red);
}

.manual-pager__next {
  margin-left: auto;
  text-align: right;
}

/* ---------------------------------------------------------------------------
   Narrow screens: the chapter list moves above the text.
   --------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .manual-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .manual-nav {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
  }

  .manual-nav__group + .manual-nav__group {
    margin-top: 0;
  }

  .manual-cards,
  .manual-toc ul {
    grid-template-columns: 1fr;
    columns: 1;
  }

  .manual-table td:first-child {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .manual-nav {
    grid-template-columns: 1fr;
  }
}