.docs-mobile-toc { display: none; }

.docs-layout {
  display: grid;
  grid-template-columns: 180px minmax(0,780px) 190px;
  gap: clamp(24px,4vw,64px);
  max-width: 1440px;
  margin: auto;
  padding: 64px 5vw 100px;
}

.docs-sidebar,.docs-toc {
  align-self: start;
  position: sticky;
  top: 110px;
  font-size: 14px;
  line-height: 1.5;
}

.docs-sidebar nav,.docs-toc nav,.docs-downloads {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.docs-sidebar nav {
  margin-top: 24px;
}

.docs-sidebar a,.docs-toc a {
  text-decoration: none;
  color: inherit;
}

.docs-sidebar a[aria-current] {
  color: #125c57;
  font-weight: 700;
  border-left: 3px solid;
  padding-left: 12px;
}

.docs-downloads {
  border-top: 1px solid #dce4df;
  margin-top: 32px;
  padding-top: 24px;
}

.docs-toc .eyebrow {
  margin-bottom: 12px;
}

.docs-article {
  min-width: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #344c4d;
}

.docs-article h1 {
  font-size: clamp(32px,4vw,48px);
  line-height: 1.15;
  letter-spacing: -.035em;
  margin: 0 0 28px;
  color: #163a42;
}

.docs-article h2 {
  font-size: 27px;
  line-height: 1.3;
  margin: 56px 0 20px;
  letter-spacing: -.025em;
  color: #163a42;
  scroll-margin-top: 115px;
}

.docs-article h3 {
  font-size: 21px;
  margin-top: 32px;
  scroll-margin-top: 115px;
}

.docs-article p,.docs-article ul,.docs-article ol {
  margin: 0 0 22px;
}

.docs-article li {
  margin: 10px 0;
}

.docs-article a {
  color: #14635c;
  text-underline-offset: 3px;
}

.docs-article code {
  font-size: .84em;
  background: #edf2ef;
  border-radius: 4px;
  padding: 3px 5px;
  overflow-wrap: anywhere;
}

.docs-code {
  margin: 24px 0 32px;
  background: #17343a;
  color: #eaf5f0;
  border-radius: 12px;
  overflow: hidden;
}

.docs-code pre {
  margin: 0;
  padding: 20px;
  overflow: auto;
  line-height: 1.65;
}

.docs-code code {
  padding: 0;
  background: none;
  color: inherit;
  white-space: pre;
  overflow-wrap: normal;
}

.docs-table {
  overflow: auto;
  margin: 24px 0 32px;
  border: 1px solid #dce4df;
  border-radius: 10px;
}

.docs-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.6;
}

.docs-table th,.docs-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid #dce4df;
  vertical-align: top;
}

.docs-table th {
  background: #edf2ef;
  color: #163a42;
}

.docs-table tr:last-child td {
  border: 0;
}

@media(max-width:1180px) {
  .docs-layout {
    grid-template-columns: 160px minmax(0,1fr);
  }

  .docs-toc { display: none; }
  .docs-mobile-toc {
    display: block;
    border-bottom: 1px solid #dce4df;
    margin-bottom: 28px;
    padding-bottom: 16px;
  }
  .docs-mobile-toc summary { font-weight: 600; }
  .docs-mobile-toc nav { display: grid; gap: 10px; margin-top: 16px; }
}

@media(max-width:700px) {
  .docs-layout {
    display: block;
    padding: 28px 6vw 64px;
  }

  .docs-sidebar {
    position: static;
    margin-bottom: 36px;
  }

  .docs-sidebar nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 14px;
  }

  .docs-downloads {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
  }

  .docs-downloads .eyebrow {
    display: none;
  }

  .docs-article {
    font-size: 15px;
  }

  .docs-article h2 {
    font-size: 24px;
  }

  .docs-code pre {
    padding: 16px;
  }

  .docs-table td,.docs-table th {
    padding: 10px;
  }
}

/* Set-up guides: the handbook's chapters in this layout. */
.docs-guides nav { gap: 9px; }
.docs-group { margin-top: 14px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: #5e6e76; }
.docs-crumbs { margin: 0 0 18px; font-size: 13px; color: #5e6e76; }
.docs-article .docs-crumbs a { color: inherit; }
.docs-article .docs-lede { font-size: 18px; line-height: 1.7; }
.docs-article h1 { margin-bottom: 20px; }
.docs-article b { color: #163a42; }
.docs-steps { list-style: none; padding: 0; counter-reset: step; }
.docs-article .docs-steps li { position: relative; margin: 14px 0; padding-left: 48px; counter-increment: step; }
.docs-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: #17343a; color: #fff; font-size: 14px; font-weight: 700; line-height: 32px; text-align: center; }
.docs-note { margin: 24px 0 32px; padding: 18px 22px; border-radius: 12px; background: #eef4f1; color: #163a42; }
.docs-only { background: #f7f8f5; border: 1px solid #dce4df; }
.docs-article .docs-dim { font-size: 14px; color: #5e6e76; }
.docs-shot { margin: 8px 0 32px; }
.docs-shot img { display: block; width: 100%; height: auto; border: 1px solid #dce4df; border-radius: 12px; }
.docs-shot figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: #5e6e76; }

/* One page, two readings: a hosted workspace and a Desk on its own deployment. */
.docs-desk { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.docs-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 28px; font-size: 14px; line-height: 1.4; }
.docs-switch span { margin-right: 4px; color: #5e6e76; }
.docs-switch label { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 8px 16px; border: 1px solid #c9d6d1; border-radius: 999px; color: #163a42; font-weight: 600; cursor: pointer; }
#desk-hosted:checked ~ .docs-article label[for="desk-hosted"],
#desk-own:checked ~ .docs-article label[for="desk-own"] { background: #17343a; border-color: #17343a; color: #fff; }
#desk-hosted:focus-visible ~ .docs-article label[for="desk-hosted"],
#desk-own:focus-visible ~ .docs-article label[for="desk-own"] { outline: 2px solid #197575; outline-offset: 2px; }
#desk-hosted:checked ~ * [data-desk="own"],
#desk-own:checked ~ * [data-desk="hosted"] { display: none; }

.docs-turn { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid #dce4df; }
.docs-turn > * { flex: 1 1 240px; }
.docs-article .docs-turn a { padding: 18px 22px; border: 1px solid #dce4e5; border-radius: 12px; text-decoration: none; line-height: 1.5; }
.docs-turn a span { display: block; font-size: 12px; color: #5e6e76; }
.docs-turn a b { font-size: 17px; font-weight: 600; }
.docs-turn a.next { text-align: right; }
.docs-turn a:hover { border-color: #197575; }
.docs-aside { margin-top: 32px; padding: 18px 18px 20px; border-radius: 12px; background: #eef4f1; }
.docs-aside b { display: block; font-size: 15px; color: #163a42; }
.docs-aside p { margin: 6px 0 14px; font-size: 13px; line-height: 1.55; }
.docs-toc .docs-aside a.button { padding: 10px 16px; font-size: 13px; color: #fff; }
.docs-toc nav + nav { margin-top: 0; }

/* The documentation page: the guides, then the developer pages. */
.docs-hub { max-width: 1440px; margin: auto; box-sizing: border-box; padding: 56px 5% 96px; }
.docs-hub h1 { max-width: 860px; margin: 0 0 24px; font-size: clamp(38px,4.4vw,56px); line-height: 1.06; letter-spacing: -.04em; color: #163a42; }
.docs-intro p { max-width: 860px; margin: 0; font-size: 19px; line-height: 1.6; color: #344c4d; }
.docs-paths { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 48px; }
.docs-paths a { flex: 1 1 340px; box-sizing: border-box; padding: 28px 30px; border-radius: 14px; background: #eef4f1; color: #344c4d; text-decoration: none; transition: transform .15s; }
.docs-paths a:hover { transform: translateY(-2px); }
.docs-paths span { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #4d6b60; }
.docs-paths b { display: block; margin-bottom: 8px; font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: #163a42; }
.docs-paths p { margin: 0; font-size: 15px; line-height: 1.6; color: #344c4d; }
.docs-paths a.dark { background: #17343a; color: #cfe3dc; }
.docs-paths a.dark span { color: #a9cfc4; }
.docs-paths a.dark p { color: #cfe3dc; }
.docs-paths a.dark b { color: #eaf5f0; }
.docs-hub section[id] { margin-top: 80px; scroll-margin-top: 100px; }
.docs-hub h2 { margin: 0 0 8px; font-size: 34px; line-height: 1.2; letter-spacing: -.03em; color: #163a42; }
.docs-sub { max-width: 760px; margin: 0 0 8px; color: #5e6e76; }
.docs-kind { margin: 40px 0 16px; font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: #4d6b60; }
.docs-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.docs-cards.four { grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 28px; }
.docs-card { display: block; padding: 22px 24px; border: 1px solid #dce4e5; border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.docs-card:hover { border-color: #197575; transform: translateY(-2px); }
.docs-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; line-height: 1.35; color: #163a42; }
.docs-card p { margin: 0; font-size: 14px; line-height: 1.6; color: #5e6e76; }
.docs-card.plain { border-color: transparent; background: #f7f8f5; }
.docs-tag { display: inline-block; padding: 2px 9px; border: 1px solid #c9d6d0; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 1.6; white-space: nowrap; color: #4d6b60; background: #fff; }
.docs-card .docs-tag { margin: 0 0 8px; }
.docs-sub code { font-size: .92em; }
.docs-sub a, .docs-source a { color: #14635c; text-decoration: underline; }
.docs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
.docs-kind + .docs-cards.four { margin-top: 0; }
.docs-kind + .docs-sub { margin-bottom: 20px; }
.docs-kind + .docs-sub + .docs-cards.four { margin-top: 0; }
.docs-source { max-width: 760px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid #dce4df; font-size: 15px; color: #5e6e76; }
.docs-source b { color: #163a42; }
.docs-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: 88px; padding: 32px 36px; border-radius: 14px; background: #eef4f1; }
.docs-ask div { flex: 999 1 420px; min-width: 0; }
.docs-ask b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: #163a42; }
.docs-ask p { margin: 4px 0 0; font-size: 15px; color: #344c4d; }

@media(max-width:1180px) {
  .docs-cards.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media(max-width:900px) {
  .docs-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media(max-width:700px) {
  /* On a phone the list of every guide is the documentation page itself. */
  .docs-guides nav a:not(.docs-all), .docs-guides .docs-group, .docs-guides .eyebrow { display: none; }
  .docs-guides { margin-bottom: 20px; }
  .docs-hub { padding: 32px 6vw 64px; }
  .docs-cards, .docs-cards.four { grid-template-columns: 1fr; }
  .docs-hub section[id] { margin-top: 56px; }
  .docs-ask { padding: 24px; }
  .docs-article .docs-steps li { padding-left: 44px; }
}