/* The guides (guides/, written by tools/guides.mjs): pages a drafter finds by searching for what
   they need, "an AutoCAD alternative for Mac", "open a DWG on Linux", and reads top to bottom. They
   stand on the same ground as the home page and letter in its faces; the measure is a reading one,
   about 70 characters, and only a drawing or a table is allowed wider than the words. The drawings
   are the sheets the home page shows, as the app wrote them: printed paper on the night ground, so
   each one is a raised object with the page's rounded corners. */

.guide-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1120px; margin: 0 auto; padding: 22px var(--gutter);
}
.guide-top nav { display: flex; align-items: center; gap: 6px; }
.guide-top nav > a:not(.btn) { padding: 8px 14px; border-radius: 999px; font-size: 14.5px; color: var(--fg-2); transition: color 0.2s, background 0.2s; }
.guide-top nav > a:not(.btn):hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.guide-top .btn { background: var(--snow); color: var(--ground); }

.guide { max-width: calc(720px + var(--gutter) * 2); margin: 0 auto; padding: 48px var(--gutter) 64px; }
.guide .crumbs { font: 12.5px/1.5 var(--mono); color: var(--fg-3); margin: 0 0 22px; }
.guide .crumbs a:hover { color: var(--fg-2); }
.guide h1 { font-size: clamp(40px, 6.4vw, 64px); margin: 0 0 22px; }
.guide .lede { font-size: clamp(18px, 1.6vw, 21px); margin: 0 0 18px; text-wrap: pretty; }
.guide .dated { font: 12.5px/1.5 var(--mono); color: var(--fg-3); margin: 0 0 48px; }
.guide h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.12; margin: 56px 0 14px; }
.guide h3 { font-size: 20px; margin: 32px 0 8px; }
.guide p, .guide li { color: var(--fg-2); font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.guide p { margin: 0 0 16px; }
.guide ul, .guide ol { padding-left: 1.15em; margin: 0 0 16px; }
.guide li + li { margin-top: 6px; }
.guide b, .guide strong { color: var(--fg); font-weight: 500; }
.guide p a, .guide li a, .guide td a {
  color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-2);
}
.guide p a:hover, .guide li a:hover, .guide td a:hover { text-decoration-color: var(--fg-2); }
.guide kbd, .guide code {
  font: 500 0.86em/1 var(--mono); color: var(--fg); background: var(--raise-2);
  padding: 0.18em 0.42em; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hair);
}

/* A sheet as it prints, on the ground: wider than the words when the screen has room. */
.guide figure { margin: 36px 0; }
/* Wider than the words by as much as the screen allows, up to 1040 px, and centred on them. */
.guide figure.wide { margin-inline: min(0px, calc((100% - min(1040px, 100vw - var(--gutter) * 2)) / 2)); }
.guide figure img { width: 100%; height: auto; border-radius: 14px; background: #fff; }
.guide figcaption { margin-top: 12px; font: 12.5px/1.55 var(--mono); color: var(--fg-3); }

/* The tables: commands, versions, systems. Mono for what is typed, the page's face for the rest. */
.guide .table { overflow-x: auto; margin: 22px 0 28px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hair); }
.guide table { width: 100%; border-collapse: collapse; font-size: 15px; }
.guide th, .guide td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.guide tr:last-child td { border-bottom: 0; }
.guide th { font: 500 12px/1.4 var(--mono); letter-spacing: 0.02em; color: var(--fg-3); background: var(--raise); }
.guide td { color: var(--fg-2); }
.guide td:first-child { color: var(--fg); }
.guide td.typed { font: 500 14px/1.4 var(--mono); color: var(--fg); white-space: nowrap; }

/* The questions at the foot of a guide, as the home page asks its own. */
.guide details { border-top: 1px solid var(--hair); padding: 16px 0; }
.guide details:last-of-type { border-bottom: 1px solid var(--hair); }
.guide summary { cursor: pointer; color: var(--fg); font-weight: 500; list-style: none; }
.guide summary::-webkit-details-marker { display: none; }
.guide summary::after { content: "+"; float: right; color: var(--fg-3); font-family: var(--mono); }
.guide details[open] summary::after { content: "−"; }
.guide details p { margin: 10px 0 0; }

/* The way on: the list, and the other guides. */
.guide .next {
  margin: 64px 0 0; padding: 32px; border-radius: 18px; background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.guide .next h2 { margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 30px); }
.guide .next p { margin: 0 0 22px; }
.guide .more { margin: 56px 0 0; }
.guide .more h2 { font-size: 22px; margin: 0 0 14px; }
.guide .cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.guide .cards li + li { margin-top: 0; }
.guide .cards a {
  display: block; padding: 20px 22px; border-radius: 14px; background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--hair); text-decoration: none; transition: background 0.2s, box-shadow 0.2s;
}
.guide .cards a:hover { background: var(--raise-2); box-shadow: inset 0 0 0 1px var(--hair-2); }
.guide .cards b { display: block; font: 600 19px/1.25 var(--display); letter-spacing: -0.02em; margin: 0 0 6px; }
.guide .cards span { display: block; color: var(--fg-2); font-size: 15.5px; line-height: 1.5; }
.guide .fine { margin-top: 48px; font: 12px/1.6 var(--mono); color: var(--fg-3); }

.guide-foot { max-width: 1120px; margin: 0 auto; padding: 40px var(--gutter) 48px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--fg-3); }

@media (max-width: 560px) {
  .guide-top nav > a:not(.btn) { display: none; }
  .guide .next { padding: 24px; }
  .guide th, .guide td { padding: 10px 12px; }
}