/* Getting-started gallery (static/gallery.js): the card and its row of
   starter cards. The HOST (.gsHost) is positioned by the page that mounts it
   — shell.py / the /m launcher: a fixed scrim overlay; draw.py: #starters,
   an absolute layer over the board. Dark theme colours match the pages.
   The .gp* rules at the end are the help page's (mountPage, /site/). */
.gsHost[hidden] { display: none !important; }
.gsCard { position: relative; pointer-events: auto; background: #181b23; border: 1px solid #2c3140;
          border-radius: 14px; padding: 16px 18px 12px; box-shadow: 0 12px 36px rgba(0,0,0,.55);
          width: min(720px, 100%); box-sizing: border-box; color: #e6e8ee;
          font: 15px/1.5 -apple-system, "Segoe UI", sans-serif; }
.gsCard h4 { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: #8b93a7;
             text-transform: uppercase; letter-spacing: .06em; }
.gsClose { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #586074;
           font-size: 14px; cursor: pointer; padding: 2px 4px; }
.gsClose:hover { color: #e6e8ee; }
/* "All help videos ↗": top right, left of the × (hidden until the cards came from the help site) */
.gsAll { position: absolute; top: 8px; right: 38px; font-size: 12px; line-height: 20px; color: #8fa3e8; text-decoration: none; }
.gsAll:hover, .gsAll:focus-visible { text-decoration: underline; }
.gsAll[hidden] { display: none; }
.gsCards { display: contents; }   /* the manifest cards sit in the row like the host rows after them */
.gsRow { display: flex; align-items: stretch; gap: 6px; }
.gsGrid { display: flex; gap: 10px; overflow-x: auto; flex: 1; min-width: 0; scroll-snap-type: x mandatory;
          scroll-behavior: smooth; padding: 2px 2px 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.gsArrow { flex: none; width: 26px; align-self: center; background: none; border: 1px solid #2c3140; border-radius: 8px;
           color: #8b93a7; font-size: 18px; line-height: 1; cursor: pointer; padding: 6px 0; }
.gsArrow:hover { border-color: #5b7fff; color: #e6e8ee; }
.gsArrow[hidden], .gsRow.noscroll .gsArrow { display: none; }
@media (pointer: coarse) { .gsArrow { display: none; } }
.starter { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; flex: 0 0 168px;
           scroll-snap-align: start; box-sizing: border-box;
           background: #1b1e27; border: 1px solid #2c3140; border-radius: 10px; padding: 10px 10px 12px;
           color: #aab2c5; cursor: pointer; font: inherit; }
.starter:hover, .starter:focus-visible { border-color: #5b7fff; color: #e6e8ee; outline: none; background: #1f2533; }
.starter svg { width: 100%; max-width: 120px; height: auto; display: block; margin-bottom: 4px; }
.starter b { font-weight: 600; color: #e6e8ee; font-size: 13px; }
.starter span { font-size: 11.5px; color: #8b93a7; line-height: 1.35; }
.starter.demo { border-color: #3d4f8f; }
.starter.demo b::after { content: " \25B6"; font-size: 9px; color: #8fa3e8; vertical-align: middle; }
a.starter { text-decoration: none; }
/* a video card with a poster: the frame, 16:9, with its duration (beats .starter span) */
.starter .gsThumb { display: block; position: relative; width: 100%; max-width: 120px; aspect-ratio: 16 / 9; margin-bottom: 4px;
                    border-radius: 6px; overflow: hidden; background: #12141a; border: 1px solid #2c3140; box-sizing: border-box;
                    font-size: inherit; line-height: normal; }
.starter .gsThumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.starter .gsThumb i { position: absolute; right: 3px; bottom: 3px; padding: 1px 4px; border-radius: 3px; background: rgba(0,0,0,.72);
                      color: #e6e8ee; font: 600 10px/1.3 -apple-system, "Segoe UI", sans-serif; font-style: normal; }
.starter.sm { flex-basis: 136px; padding: 8px 8px 10px; }
.starter.sm svg { max-width: 84px; }
.starter.sm b { font-size: 12px; }
.startersSep { flex: 0 0 auto; display: flex; align-items: center; scroll-snap-align: start; }
.startersSep span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; letter-spacing: .08em;
                    text-transform: uppercase; color: #586074; padding: 6px 2px; border-right: 1px solid #252a38; }
.gsFoot { margin-top: 8px; font-size: 11.5px; color: #8b93a7; text-align: center; }   /* #8b93a7 on #181b23: AA contrast */
/* Interactive Geometry Series: the dialog / player that replaces the row inside the card */
.gsRow[hidden], .gsFoot[hidden] { display: none !important; }   /* the row's display:flex would otherwise beat the hidden attribute */
.gsSeries { padding: 4px 2px 2px; }
.gsSeriesText { margin: 4px 0 14px; font-size: 15px; line-height: 1.5; color: #e6e8ee; }
.gsSeriesBtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.gsSeriesBtns button { font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 8px; cursor: pointer;
                       border: 1px solid #2c3140; background: #1b1e27; color: #aab2c5; }
.gsSeriesBtns button:hover { border-color: #5b7fff; color: #e6e8ee; }
.gsSeriesGo { border-color: #3d4f8f !important; color: #e6e8ee !important; background: #24305c !important; }
.gsSeriesWait { padding: 28px 0; text-align: center; color: #8b93a7; font-size: 13px; }
.gsSeriesVideo { display: block; width: 100%; max-height: 62vh; background: #000; border-radius: 8px; }
.gsSeriesErr { margin: 22px 0 8px; text-align: center; color: #e8b45a; font-size: 13.5px; }
/* phones: the card fills the width and scrolls if it must; smaller cards,
   swipe instead of the arrows (hidden above for coarse pointers) */
@media (max-width: 700px) {
  .gsCard { padding: 14px 12px 10px; max-height: calc(100vh - 140px); overflow-y: auto; width: 100%; }
  .gsGrid { gap: 8px; padding-bottom: 4px; }
  .starter { flex-basis: 148px; padding: 8px 8px 10px; min-height: 44px; }
  .starter.sm { flex-basis: 124px; }
  .starter svg { max-width: 84px; }
  .startersSep span { padding: 4px 1px; }
  .starter b { display: block; }
  .starter span { display: block; }
}

/* The help page (/site/, gallery.js mountPage): the manifest as a page of
   articles. The page itself (header, width, palette) is website/site.css. */
.gpGroup h2 { margin: 30px 0 12px; font-size: 13px; font-weight: 600; color: #8b93a7; text-transform: uppercase; letter-spacing: .06em; }
.gpGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 0 0 8px; }
@media (max-width: 560px) { .gpGrid { grid-template-columns: 1fr; } }
.gpCard { display: flex; flex-direction: column; gap: 8px; min-width: 0; box-sizing: border-box; padding: 12px;
          background: #1b1e27; border: 1px solid #2c3140; border-radius: 12px; color: #aab2c5; transition: border-color .15s;
          scroll-margin-top: 16px; }
.gpCard:hover { border-color: #3d4f8f; }
.gpCard:focus-within, .gpCard.gpTarget { border-color: #5b7fff; outline: 2px solid #5b7fff; outline-offset: 1px; }
.gpCard.playing { grid-column: 1 / -1; }
.gpMedia { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; box-sizing: border-box; padding: 0; margin: 0;
           border: 1px solid #2c3140; border-radius: 8px; background: #12141a; overflow: hidden; color: inherit; font: inherit; }
.gpCard.playing .gpMedia { aspect-ratio: var(--ar, 16 / 9); }
.gpThumb { cursor: pointer; }
.gpThumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gpMedia svg { display: block; width: 46%; height: 100%; margin: 0 auto; }
.gpThumb::after { content: "\25B6"; position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
                  box-sizing: border-box; padding-left: 4px; border-radius: 50%; border: 1px solid #5b7fff; background: rgba(18,20,26,.78);
                  color: #e6e8ee; font-size: 19px; line-height: 50px; text-align: center; }
.gpThumb:hover::after, .gpThumb:focus-visible::after { background: #24305c; }
.gpThumb.gpOwnPlay::after { display: none; }   /* the series / play icons draw their own */
.gpThumb.gpOwnPlay:hover svg { filter: brightness(1.25); }
.gpThumb:focus-visible, .gpIcon:focus-visible { outline: 2px solid #5b7fff; outline-offset: 2px; }
.gpVideo { background: #000; max-height: 80vh; }
.gpDur { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.75);
         color: #e6e8ee; font: 600 12px/1.4 -apple-system, "Segoe UI", sans-serif; font-style: normal; }
.gpCard h3 { margin: 2px 0 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.gpPerma { color: #e6e8ee; text-decoration: none; }
.gpPerma:hover, .gpPerma:focus-visible { text-decoration: underline; }
.gpNote { margin: 0; font-size: 14px; line-height: 1.45; color: #c9cede; }
.gpDetail { margin: 0; font-size: 13.5px; line-height: 1.5; color: #aab2c5; }
.gpMeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: auto 0 0;
          font-size: 13px; color: #8b93a7; }
.gpMeta a { display: inline-flex; align-items: center; min-height: 44px; color: #8fa3e8; text-decoration: none; }
.gpMeta a:hover, .gpMeta a:focus-visible { text-decoration: underline; }
.gpErr { color: #e8b45a; }
.gpLoading, .gpFallback { margin: 18px 0; font-size: 14px; color: #8b93a7; }
@media (prefers-reduced-motion: reduce) { .gpHost * { scroll-behavior: auto; transition: none; } }