/* surl project site — what the application's stylesheet does not already have.
 *
 * The page loads surl.css first: the same file the application serves, copied
 * here from internal/web/static/ by `make docs-assets` and checked by the
 * commit hook. Edit it there, never here. This file only adds the sections the
 * application has no use for: the screenshot, the feature list and the
 * commands. */

html { scroll-behavior: smooth; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

code, pre { font-family: var(--mono); }
p code, li code {
  padding: 0.05em 0.3em;
  font-size: 0.85em;
  font-stretch: 87.5%;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* A second colour field, for the commands. Like .on-field, it forces the light
   palette for its own contents. */
.on-signal {
  color-scheme: light;
  color: var(--ink);
  background: var(--signal);
  --ink-soft: #3d3000;
  --ink-faint: #5a4800;
  --link: #000;
}

/* --- hero --------------------------------------------------------------------
   The link at the size of a sign, then what the thing is, then where to get it.
   The band is the container the token is sized against. */

.hero { padding-block: clamp(2.5rem, 6vw, 5rem); container-type: inline-size; }
.hero .token--lg { margin-bottom: 1.5rem; }
.hero .lede { max-width: 44ch; margin-bottom: 1.75rem; text-wrap: pretty; }
.hero .actions { margin: 0; }

/* --- screenshot ----------------------------------------------------------- */

.shot { padding-block: clamp(2rem, 4vw, 3rem); background: var(--muted); }
.shot figure { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--rule-heavy);
  background: var(--paper);
}
.shot figcaption {
  margin-top: 0.9rem;
  font-size: var(--t-s);
  color: var(--ink-soft);
}

/* --- what stands out: numbered cells of a split --------------------------- */

.split > .cell { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.split > .head {
  grid-column: 1 / -1;
  padding-block: clamp(2rem, 4vw, 3rem) 1.25rem;
}
.split > .head h2 { margin: 0; }
.cell p { max-width: 58ch; }
.cell h3 { margin-bottom: 0.6rem; }
.cell .no {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-faint);
}

/* --- what it does: a plain list in columns -------------------------------- */

.does ul {
  columns: 2 22rem;
  column-gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--wrap);
}
.does li {
  break-inside: avoid;
  padding: 0.7rem 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}

/* --- run it: two panels of commands --------------------------------------- */

.run .panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 2rem;
}
@media (min-width: 60rem) { .run .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Each panel spans a heading row and a commands row shared with its neighbour,
   so the two terminals start on one line and end on one line. */
.run .panels > div {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.run h3 { margin-bottom: 0.6rem; }
.run pre {
  margin: 0;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  color: #f2f4f3;
  background: #000;
  border: var(--rule-heavy);
  font-size: var(--t-s);
  font-stretch: 87.5%;
  line-height: 1.55;
  tab-size: 2;
}
.run pre .c { color: #8f9a98; }
.run .note { max-width: 62ch; margin-top: 1.25rem; font-size: var(--t-s); color: var(--ink-soft); }