/* Desktop layout. Linked with
   media="(min-width: 1024px) and (hover: hover) and (pointer: fine)"
   and still gated on html.is-desktop, which matchMedia sets. */

html.is-desktop .app {
  width: auto;
  max-width: none;
  margin: 0;
  padding:
    calc(20px + var(--safe-top))
    calc(32px + var(--safe-right))
    calc(32px + var(--safe-bottom))
    calc(312px + var(--safe-left));
}

html.is-desktop .top,
html.is-desktop .view,
html.is-desktop .site-footer {
  width: min(960px, 100%);
}

html.is-desktop .chart {
  max-width: 960px;
}

html.is-desktop .desk-nav {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 280px;
  padding: calc(18px + var(--safe-top)) 16px 24px;
  background: #181e2c;
  border-right: 1px solid var(--line);
}

html.is-desktop .desk-brand {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

html.is-desktop .desk-brand img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

html.is-desktop .desk-name {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 1.35rem;
}

html.is-desktop .desk-note {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.35;
}

html.is-desktop .desk-links {
  display: grid;
  gap: 8px;
}

html.is-desktop .desk-link,
html.is-desktop a.desk-link {
  display: flex;
  width: 100%;
  text-align: left;
  border-radius: 12px;
  color: inherit;
}

html.is-desktop .tabs {
  display: none;
}

html.is-desktop .desk-nav .desk-foot {
  margin-top: auto;
}

html.is-desktop .desk-nav .site-footer {
  width: auto;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  align-items: stretch;
  text-align: left;
}

html.is-desktop .desk-nav .tip-link {
  width: 100%;
  margin: 0 0 10px;
  justify-content: center;
}

html.is-desktop .desk-nav .footer-legal {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 10px;
}

html.is-desktop .desk-nav .credit {
  text-align: left;
}