/* =============================================================
   source.css — the source surface's component family: the pages that
   publish source trees and the essays beside them. Token-only, like
   every file in this family; the theme it builds on is loaded first.

   Provides:
     .ls-src          an index page on the sheet grid. Each h2 is set in
                      the margin, where the grid places it beside the
                      first thing in its section; everything else runs
                      down the main column.
     .ls-essay        an essay: one reading column at 18px, aligned with
                      the main column of the pages around it
     .ls-essay-code   an essay's code block, and
     .ls-essay-table  an essay's table: each scrolls sideways on its own
                      rather than widening the page, and each is a wrapper
                      so that its measure is taken in the text face and it
                      ends where the paragraphs do — a pre measures `ch`
                      in its own smaller monospace face
     .ls-src-notice   a statement every page of a host carries
     .ls-src-list     projects, hosts and essays: a name and what it is
     .ls-src-files    a release's files, in as many columns as fit
   ============================================================= */

.ls-src,.ls-essay{max-width:1280px;margin:0 auto;padding:clamp(3.5rem,8vw,7rem) 2rem 0;
  display:grid;grid-template-columns:var(--ls-margin) minmax(0,1fr);column-gap:var(--ls-gap);row-gap:1rem;align-items:start}
.ls-src>*,.ls-essay>*{grid-column:2;max-width:66ch;min-width:0}
/* The last block of a page carries the theme's .ls-close, which leaves the
   footer its space. An index that follows an essay on the same page sits
   closer to it than a page's first block sits to the nav. */
.ls-essay+.ls-src{padding-top:clamp(3rem,6vw,5rem)}

/* --- Index pages --------------------------------------------- */
.ls-src>h1{margin-bottom:.5rem}
.ls-src>h2{grid-column:1;font-style:italic;font-weight:400;font-size:1.17rem;line-height:1.3;
  color:var(--ls-text-2);text-wrap:balance;margin-top:3rem;padding-top:.1em}
.ls-src>h2+*{margin-top:3rem}
.ls-src p,.ls-src li{color:var(--ls-text-2);line-height:1.65}
.ls-src strong{color:var(--ls-text);font-weight:600}
.ls-src code,.ls-essay code{font-size:.9em}
.ls-src pre,.ls-essay pre{max-width:100%;background:var(--ls-surface);border-radius:var(--ls-radius-sm);
  padding:1rem 1.2rem;overflow-x:auto;font-size:.88rem;line-height:1.6}
.ls-src pre code,.ls-essay pre code{font-size:inherit}

.ls-src-notice{border-left:2px solid var(--ls-border-strong);padding-left:1rem}
.ls-src .ls-src-notice{color:var(--ls-text)}

.ls-src-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:1.1rem}
.ls-src-list>li>a:first-child{font-weight:600;color:var(--ls-text)}
.ls-src-list .ls-src-version{font-family:var(--ls-font-mono);font-size:.9em;color:var(--ls-text-faint);font-variant-numeric:tabular-nums}
.ls-src-list .ls-src-notice{margin-top:.5rem}
.ls-src-projects{margin-top:.4rem}

.ls-src>.ls-src-files{max-width:none;list-style:none;padding:0;columns:3 16rem;column-gap:var(--ls-gap)}
.ls-src-files li{break-inside:avoid;margin-bottom:.35rem;font-family:var(--ls-font-mono);font-size:.9rem;line-height:1.5}

/* --- Essays -------------------------------------------------- */
.ls-essay>h1{margin-bottom:1rem}
.ls-essay>h2{font-size:1.5rem;line-height:1.3;margin-top:2rem}
.ls-essay>h3{font-size:1.2rem;margin-top:1.25rem}
.ls-essay p,.ls-essay li{font-size:1.125rem;line-height:1.7;color:var(--ls-text-2)}
.ls-essay strong,.ls-essay em{color:var(--ls-text)}
.ls-essay strong{font-weight:600}
.ls-essay ul,.ls-essay ol{padding-left:1.4rem;display:flex;flex-direction:column;gap:.5rem}
/* A quote is a claim the essay stands on, so it takes the text colour and
   the notice's rule rather than being set back. */
.ls-essay blockquote{border-left:2px solid var(--ls-border-strong);padding-left:1.1rem}
.ls-essay blockquote p{color:var(--ls-text)}
.ls-essay hr{border:0;border-top:1px solid var(--ls-border);margin-block:1.5rem}
.ls-essay-code pre{margin:0}
.ls-essay-table{overflow-x:auto}
.ls-essay table{border-collapse:collapse;width:100%}
.ls-essay th,.ls-essay td{text-align:left;vertical-align:top;padding:.6rem 1.2rem .6rem 0;
  border-bottom:1px solid var(--ls-border);font-size:1.05rem;line-height:1.55}
.ls-essay th{color:var(--ls-text);font-weight:600;border-bottom-color:var(--ls-border-strong)}
.ls-essay td{color:var(--ls-text-2)}

@media(max-width:900px){
  .ls-src,.ls-essay{grid-template-columns:minmax(0,1fr)}
  .ls-src>*,.ls-essay>*,.ls-src>h2{grid-column:1}
  .ls-src>h2{font-size:1rem;margin-top:2.5rem;padding-top:0}
  .ls-src>h2+*{margin-top:0}
}
@media(max-width:640px){
  .ls-src,.ls-essay{padding-inline:1rem}
}