/* Long-form generated documents: skill pages and the content pages.
   Everything here stays inside the locked system: hairlines, one ink,
   two faces, no new colour. gallop.css is the base; this styles the
   markdown that build.py renders into .doc. */

/* The document and its contents are one grid, continuing the hairline the
   skill header draws at two thirds. The document was a 710px column of prose
   on the left edge of a 1440px band, under rules that ran the full 1348: three
   right edges and an empty right third. Now the column stops at the hairline,
   the rules and the tables stop with it, and the contents hold the third.
   Prose keeps its own measure inside the column; figures and code, which are
   drawn at a size, stop at 880 wherever they sit. */
.docgrid{display:grid;grid-template-columns:2fr 1fr}
.docgrid > .doc{grid-area:1/1;border-right:1px solid var(--line);min-width:0}
.docgrid > .rail{grid-area:1/2;min-width:0}
.doc{padding:40px var(--gutter) 56px}
.doc .fig, .doc pre{max-width:880px}
.doc > :first-child{margin-top:0}
/* a document that opens on a heading would show the band's edge and the
   heading's own rule 40px apart */
.doc > h2:first-child{border-top:0;padding-top:0}

/* The contents column. It is sticky, it spells the headings out, and it marks
   the section being read with 2px of its left border, so a marked label and an
   unmarked one keep the same left edge. That edge is the gutter, measured from
   the hairline, which puts the contents under the header cell above them. */
.rail{font-family:var(--sans)}
.rail .railin{position:sticky;top:0;max-height:100vh;overflow-y:auto;
              overscroll-behavior:contain;
              padding:38px var(--gutter) 34px calc(var(--gutter) - 16px)}
.rail .lab{margin:0 0 12px;padding-left:16px;color:var(--dim)}
.rail a{display:block;padding:7px 0 7px 14px;border-left:2px solid transparent;
        font-size:14px;line-height:1.4;color:var(--dim)}
.rail a:hover{color:var(--fg);text-decoration:none}
.rail a[aria-current="true"]{color:var(--fg);font-weight:600;border-left-color:var(--fg)}

.doc h1{font-family:var(--disp);font-weight:700;font-size:34px;line-height:1.05;
        margin:0 0 18px}
.doc h2{font-family:var(--sans);text-transform:uppercase;font-size:14px;
        letter-spacing:.16em;font-weight:700;margin:48px 0 16px;
        padding-top:22px;border-top:1px solid var(--line)}
.doc h3{font-family:var(--sans);font-size:15px;font-weight:700;margin:26px 0 10px}
.doc h4{font-family:var(--sans);text-transform:uppercase;font-size:11px;
        letter-spacing:.14em;font-weight:600;margin:22px 0 8px;color:var(--dim)}
/* running prose is Archivo: these are thousand-word documents, and mono is the
   slowest face to read them in. Tables, code and the terminal stay mono. */
.doc p, .doc li{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--body);
                max-width:80ch}   /* figures, code and tables keep the full column */
.doc li{margin:6px 0}
.doc strong{color:var(--fg)}
.doc a{text-decoration:underline;text-underline-offset:2px}

.doc code{font-family:var(--mono);font-size:.92em;background:var(--wash);
          padding:1px 5px}
.doc pre{border:1px solid var(--line);padding:18px 20px;overflow-x:auto;
         margin:18px 0;background:var(--surface)}
.doc pre code{background:none;padding:0;font-size:14px;line-height:1.6}

.doc blockquote{margin:18px 0;padding:2px 0 2px 18px;
                border-left:2px solid var(--fg)}
.doc blockquote p{color:var(--fg)}

.doc table{border-collapse:collapse;width:100%;margin:18px 0;font-size:14.5px}
.doc th{font-family:var(--sans);text-transform:uppercase;font-size:11px;
        letter-spacing:.14em;text-align:left;font-weight:600}
.doc th, .doc td{border:1px solid var(--line);padding:9px 12px;
                 vertical-align:top;line-height:1.55}
.doc tr:hover td{background:var(--wash)}
/* build.py wraps every rendered table in this: the table scrolls, the page does not */
.doc .scrollx{overflow-x:auto;margin:18px 0}
.doc .scrollx > table{margin:0}
.doc .scrollx:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

.doc hr{border:0;border-top:1px solid var(--line);margin:32px 0}
/* gallop.css leaves the caption's face to inherit, which is mono; under Archivo
   prose it read as a code block */
.doc .fig figcaption{font-family:var(--sans);font-size:14px}

/* collapsed reference documents on a skill page */
.doc details.refdoc{border:1px solid var(--line-2);margin:14px 0}
.doc details.refdoc summary{cursor:pointer;padding:12px 16px;font-size:14.5px;
                            list-style:none;display:flex;gap:12px;align-items:baseline}
.doc details.refdoc summary::-webkit-details-marker{display:none}
.doc details.refdoc summary::after{content:"+";margin-left:auto;font-family:var(--mono)}
.doc details.refdoc[open] summary::after{content:"\2212"}
.doc details.refdoc summary:hover{background:var(--wash)}
.doc details.refdoc[open] summary{border-bottom:1px solid var(--line)}
.doc details.refdoc > *:not(summary){margin-left:16px;margin-right:16px}
.doc details.refdoc > h2:first-of-type{font-family:var(--disp);font-weight:700;
        font-size:24px;line-height:1.1;text-transform:none;letter-spacing:0;
        border-top:0;padding-top:0;margin-block:16px 14px}
.doc details.refdoc h3{font-family:var(--sans);text-transform:uppercase;font-size:14px;
        letter-spacing:.16em;font-weight:700;margin-block:36px 14px;padding-top:20px;
        border-top:1px solid var(--line)}
.doc details.refdoc h4{font-family:var(--sans);font-size:15px;font-weight:700;
        color:var(--fg);margin-block:22px 8px}

/* the page header cells: the hero body shares the document's edge */
.skillhead > *, .pagehead > *{padding:26px var(--gutter) 30px}
.skdesc{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--body);
        max-width:60ch;margin:14px 0 0}
/* the install snippet is the primary action: filled, mono, a copy control */
.snip{border:1px solid var(--line-2);background:var(--bg);color:var(--fg);margin:0 0 10px}
.snip .bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;
           border-bottom:1px solid var(--line-2)}
.snip .path{font-family:var(--mono);font-size:12.5px;display:flex;align-items:center;gap:8px}
.snip .cur{width:7px;height:13px;background:var(--fg);flex:none}
.snip pre{margin:0;padding:12px 14px 14px;font-size:12.5px;line-height:1.6;background:var(--surface);
          white-space:pre-wrap;overflow-wrap:anywhere}
.snip pre .p{color:var(--dim)}
.snip .copy{border:0;background:none;padding:0;color:var(--dim);cursor:pointer;
            font-family:var(--sans);text-transform:uppercase;font-size:11px;
            letter-spacing:.14em;font-weight:600}
.snip .copy:hover{color:var(--fg)}
.skillhead .scripts{margin-top:14px}
.skillhead .scripts ul{margin:8px 0 0;padding-left:18px;font-size:14.5px}
@media (max-width:1080px){
  .skillhead{grid-template-columns:1fr!important}
  .skillhead > *{border-right:0;border-bottom:1px solid var(--line)}
  .skillhead > *:last-child{border-bottom:0}
  /* no room for a column beside the document, so the contents lie back down
     into the strip they replaced: one sticky row that scrolls sideways, where
     a long heading costs width instead of a second row */
  .docgrid{grid-template-columns:1fr}
  .docgrid > .doc{grid-area:2/1;border-right:0}
  .docgrid > .rail{grid-area:1/1;border-bottom:1px solid var(--line)}
  .rail .railin{display:flex;flex-wrap:nowrap;overflow-x:auto;max-height:none;
                -webkit-overflow-scrolling:touch;background:var(--surface);
                padding:0 var(--gutter)}
  .rail .lab{display:flex;align-items:center;flex:none;margin:0;padding:10px 20px 10px 0}
  .rail a{flex:none;white-space:nowrap;padding:11px 16px;font-size:11px;
          border-left:1px solid var(--line);text-transform:uppercase;
          letter-spacing:.14em;font-weight:600}
  .rail a[aria-current="true"]{border-left-color:var(--line);background:var(--wash)}
}