/* The App Guide's tutorial pages: Learn → Tutorials and the help panel in the app
   (GuideTutorials.jsx, GuideBlocks.jsx, GuideBoard.jsx) and the public site's pages (lobby
   internal/guide site.go), so both look the same. Moved out of style.css for the site, which
   cannot load style.css (it fixes the body to the viewport for the lobby). In the app the colour
   variables are style.css's; on the site (<html class="guide-site">) they are defined here, for
   the light and the dark theme by the system's preference, as a visitor without an account has
   no preference of their own. */

.guide-site {
  color-scheme: light dark;
  --primary-color: #2d9da8;
  --secondary-bg: #f5f5f5;
  --text-primary: #333;
  --text-secondary: #555;
  --bg-white: #ffffff;
  --border-color: #e0e0e0;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --selection-border-blue: #4a7bd9;
  --app-hover-fill: rgba(90, 125, 140, 0.08);
}

@media (prefers-color-scheme: dark) {
  .guide-site {
    --secondary-bg: #2a2a2a;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --bg-white: #1a1a1a;
    --border-color: #404040;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --app-hover-fill: rgba(138, 164, 176, 0.18);
  }
  .guide-site body {
    background: var(--bg-white);
    color: var(--text-primary);
  }
  .guide-site .site-footer {
    border-top-color: var(--border-color);
  }
}

/* The site's page: the article at the app's measure, the links as the app's buttons */
.guide-site .site-main {
  min-height: 60vh;
}
.guide-site .guide-crumb,
.guide-site .guide-card-main,
.guide-site .guide-list-item,
.guide-site .guide-pager-link {
  text-decoration: none;
}
.guide-site .guide-term {
  text-decoration: underline dotted;
}
.guide-signin-note {
  margin: 18px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--secondary-bg);
  font-size: 14px;
  color: var(--text-secondary);
}
.guide-signin-note a {
  color: var(--primary-color);
}

/* The site's search (page.html, guideStatic.js): the box in the header, the results below it */
.site-search {
  position: relative;
  flex: 1;
  max-width: 360px;
  margin-left: auto;
}
.site-search input {
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2d33;
}
.site-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px 0;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-white);
  box-shadow: 0 10px 30px var(--shadow-color);
  color: var(--text-primary);
}
.site-search-results a {
  display: block;
  padding: 8px 12px;
  color: inherit;
  text-decoration: none;
}
.site-search-results a:hover,
.site-search-results a.is-active {
  background: var(--app-hover-fill);
}
.site-search-results .site-search-chapter {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
}
.site-search-results .site-search-none {
  padding: 8px 12px;
  color: var(--text-secondary);
}
@media (max-width: 600px) {
  .guide-site .site-search {
    max-width: none;
  }
}

.learn-tab-body {
  padding: 30px;
  box-sizing: border-box;
}

.lobby-container.frameless .learn-tab-body {
  padding: 16px;
}

/* A tutorial page (GuideTutorials): text at a readable measure, boards and screenshots no wider
   than they help */
.guide-page {
  max-width: 760px;
  color: var(--text-primary);
  line-height: 1.55;
}

.guide-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.guide-crumb {
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--primary-color);
  font: inherit;
  cursor: pointer;
}

.guide-crumb:hover {
  text-decoration: underline;
}

.guide-crumb-sep {
  margin: 0 2px;
}

/* Headings relative to the text, which phones set larger */
.guide-title {
  margin: 0 0 8px;
  font-size: 1.6em;
  line-height: 1.25;
}

.guide-attribution {
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-secondary);
}

.guide-attribution a,
.guide-text a[href] {
  color: var(--primary-color);
}

.guide-text h2 {
  margin: 26px 0 8px;
  font-size: 1.3em;
}

.guide-text h3 {
  margin: 20px 0 6px;
  font-size: 1.12em;
}

.guide-text h4 {
  margin: 16px 0 4px;
  font-size: 1em;
}

.guide-text p,
.guide-text ul,
.guide-text ol {
  margin: 0 0 12px;
}

/* The page reset (* { padding: 0 }) takes the lists' indent, which holds their numbers and
   bullets inside the text column */
.guide-text ul,
.guide-text ol {
  padding-left: 1.6em;
}

.guide-text li {
  margin-bottom: 4px;
}

.guide-text blockquote {
  margin: 0 0 12px;
  padding: 8px 14px;
  border-left: 3px solid var(--primary-color);
  background: var(--secondary-bg);
}

.guide-text blockquote p:last-child {
  margin-bottom: 0;
}

.guide-text code {
  padding: 0 4px;
  border-radius: 3px;
  background: var(--secondary-bg);
  font-size: 0.92em;
}

.guide-text pre {
  overflow-x: auto;
  padding: 10px;
  background: var(--secondary-bg);
}

.guide-table {
  overflow-x: auto;
  margin-bottom: 12px;
}

.guide-table table {
  border-collapse: collapse;
}

.guide-table th,
.guide-table td {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  text-align: left;
  vertical-align: top;
}

.guide-table th {
  background: var(--secondary-bg);
}

/* Links within the guide and glossary terms are buttons in effect (GuideBlocks handles them) */
.guide-link {
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
}

.guide-term {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

.guide-term-popover {
  position: fixed;
  z-index: 1000;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-white);
  box-shadow: 0 4px 16px var(--shadow-color);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.45;
}

.guide-term-popover-title {
  margin-bottom: 4px;
  font-weight: 600;
}

.guide-term-popover p {
  margin: 0 0 6px;
}

.guide-board,
.guide-shot {
  margin: 4px 0 16px;
}

.guide-board-frame {
  position: relative;
  overflow: hidden;
  max-width: 640px;
}

.guide-board-host {
  position: absolute;
  left: 0;
  pointer-events: none;
}

/* Highlights and labels over the board's points (GuideBoard) */
.guide-board-mark {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: none;
}

.guide-board-mark.is-highlight {
  border: 3px solid var(--selection-border-blue);
  border-radius: 6px;
  background: rgba(64, 128, 255, 0.12);
}

.guide-board-label {
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-white);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 1px 4px var(--shadow-color);
}

.guide-board figcaption,
.guide-shot figcaption {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-secondary);
}

.guide-shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

/* A phone's screenshot is narrow: shown at a phone's size rather than the page's width. The
   variant is the browser's choice from the <picture> (GuideBlocks.jsx GuideShot, lobby
   internal/guide site.go), so the size goes by the same media queries; a shot that only exists
   for phones (is-phone-*, a phone-only step) is a phone's on every screen. */
.guide-shot.is-phone-portrait img {
  max-width: min(100%, 320px);
}

.guide-shot.is-phone-landscape img {
  max-width: min(100%, 560px);
}

@media (pointer: coarse) and (orientation: portrait) and (max-width: 599px) {
  .guide-shot img {
    max-width: min(100%, 320px);
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 599px) {
  .guide-shot img {
    max-width: min(100%, 560px);
  }
}

.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.guide-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-white);
  overflow: hidden;
}

.guide-card-main,
.guide-list-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.guide-card-main:hover,
.guide-list-item:hover {
  background: var(--app-hover-fill);
}

.guide-card-title {
  font-weight: 600;
}

.guide-card-blurb {
  font-size: 14px;
  color: var(--text-secondary);
}

.guide-list {
  margin: 14px 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.guide-list li + li {
  border-top: 1px solid var(--border-color);
}

.guide-pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.guide-pager-link {
  display: flex;
  flex-direction: column;
  max-width: 48%;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--primary-color);
  font: inherit;
  cursor: pointer;
}

.guide-pager-link.is-next {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}

.guide-pager-dir {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.guide-glossary dt {
  margin-top: 12px;
  font-weight: 600;
}

.guide-glossary dd {
  margin: 2px 0 0;
}

.guide-glossary dd p {
  margin: 0;
}

.guide-error,
.guide-loading {
  padding: 16px 0;
  color: var(--text-secondary);
}