/* ─────────────────────────────────────────────────────────────────────────
   The sitemap (sitemap.html and sitemap-<lang>.html, written by
   tools/node/site-menu.mjs). Every page of the site as a plain list in
   columns: one column per list of the top menu, About in the last, App
   Center's catalogue across the page below. A group (a heading and its
   list) never splits across two columns. The language codes after a title
   are quiet; the titles carry the page.
   ───────────────────────────────────────────────────────────────────────── */
.sm .sm-wrap{padding-block:clamp(30px,4vw,56px) clamp(44px,6vw,80px)}

.sm-head{max-width:78ch;margin:0 0 clamp(26px,3.2vw,40px)}
.sm-head h1{
  font-family:var(--cond);font-weight:700;font-size:clamp(30px,3.4vw,42px);
  line-height:1.08;margin:0 0 12px;color:var(--ink);
}
.sm-lead{margin:0;color:var(--dim);font-size:15px;line-height:1.6;max-width:72ch;text-wrap:pretty}
.sm-jump{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:18px;font-family:var(--mono);font-size:12.5px}
.sm-jump a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-hi);padding-block:3px}
.sm-jump a:hover{color:var(--led);border-color:var(--led)}

/* the menu's lists side by side, a column each (as many as the page holds, one on a phone); App Center's catalogue
   runs across the page below them, its categories poured into columns, each category one block */
.sm-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:0 clamp(28px,3.2vw,52px);align-items:start}
.sm-acc{columns:17.5rem auto;column-gap:clamp(28px,3.2vw,52px)}
section.sm-s{padding:0 0 26px}            /* site.css gives every <section> a tall bottom padding */
.sm-g{break-inside:avoid;padding-bottom:18px}
.sm-s .sm-g:last-child{padding-bottom:0}
.sm-ac{margin-top:clamp(12px,2vw,24px)}
.sm-acc .sm-g:last-child{padding-bottom:18px}
.sm h2{
  font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.19em;text-transform:uppercase;
  margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--rule);color:var(--ink);
}
.sm-g h3{
  font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  margin:2px 0 7px;color:var(--dim);
}
/* kana and hanzi need no tracking to read as a heading */
:lang(ja) .sm h2,:lang(ja) .sm-g h3,:lang(zh-TW) .sm h2,:lang(zh-TW) .sm-g h3{letter-spacing:.04em}

.sm-g ul{list-style:none;margin:0;padding:0}
.sm-g li{padding:3px 0;font-size:14.5px;line-height:1.42;text-wrap:pretty;overflow-wrap:break-word}
.sm-g li>a:first-child{color:var(--ink);text-decoration:none}
.sm-g li>a:first-child:hover{color:var(--led);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* a branch: the pages under a product (its guide, its demo, its add-ons) */
.sm-g ul ul{margin:3px 0 2px 2px;padding-left:13px;border-left:1px solid var(--rule-hi)}
.sm-g ul ul li{font-size:14px}

.sm-g small{font-size:12.5px;color:var(--dim);white-space:nowrap}   /* words beside a name: not codes */
.sm-x{color:var(--dim);font-size:11px;margin-left:3px}
/* "in English": the link lands on a page this language does not have */
.sm-en{
  font-size:12px;color:var(--dim);white-space:nowrap;
  border:1px solid var(--rule-hi);border-radius:2px;padding:0 5px;vertical-align:1px;
}
.sm-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the same page in the other languages */
.sm-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em}
.sm-l a{color:var(--dim);text-decoration:none;margin-right:9px;white-space:nowrap}
.sm-l a:last-child{margin-right:0}
.sm-l a:hover{color:var(--led);text-decoration:underline;text-underline-offset:2px}

/* a finger needs room: each code a 24 px square, each title link at least 24 px tall */
@media (pointer:coarse){
  .sm-g li{padding:5px 0}
  .sm-g li>a:first-child{padding-block:3px}
  .sm-l a{display:inline-block;min-width:24px;padding:5px 2px;margin-right:3px;line-height:14px;text-align:center}
  .sm-jump{gap:4px 16px}
  .sm-jump a{padding-block:6px}
}
