/* The code screenshot maker (/code-screenshot), on the previewers' tool.css: the editor is the file's name over its code
   in JetBrains Mono, with the language and line numbers under it; the well shows the picture itself, the canvas that
   preview/codeimage.js draws, at the size it downloads. JetBrains Mono is SIL OFL (./mono/OFL.txt), cut
   to Latin without its ligatures, so the code reads as it was typed. */
@font-face { font-family: "JetBrains Mono"; src: url(/preview/mono/jetbrains-mono-400-normal-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url(/preview/mono/jetbrains-mono-400-normal-latin-ext.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url(/preview/mono/jetbrains-mono-400-italic-latin.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url(/preview/mono/jetbrains-mono-400-italic-latin-ext.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url(/preview/mono/jetbrains-mono-700-normal-latin.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url(/preview/mono/jetbrains-mono-700-normal-latin-ext.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* The editor: the file's name (it heads the window), the code, then its language and line numbers between hairlines. */
.coder .fname {
  display: block; width: calc(100% + 16px); height: 44px; margin: -6px 0 10px -8px; padding: 0 8px; border: 0; border-radius: 12px;
  background: none; outline: none; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); transition: background .15s ease-out;
}
.coder .fname:hover, .coder .fname:focus-visible { background: var(--well); }
.coder .fname:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.coder .fname::placeholder { color: var(--muted); opacity: 1; }
/* The code keeps its lines: long ones scroll sideways, and a long paste scrolls inside the box. */
.coder textarea {
  min-height: 320px; max-height: 560px; overflow: auto; white-space: pre; overflow-wrap: normal; tab-size: 4;
  font: 400 13.5px/1.6 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0;
}
.pickl { position: relative; display: inline-flex; align-items: center; }
.pickl select {
  -webkit-appearance: none; appearance: none; height: 44px; margin: 0; padding: 0 22px 0 0; border: 0; border-radius: 4px;
  background: none; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: inherit; color: var(--ink);
}
.pickl svg { position: absolute; right: 3px; width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* The well holds the picture at the most it fits, the same height for every size, so a change of size never moves the
   page. The picture is a photo on it: no frame of its own, a hairline at its edge. */
.coder .switches { flex-wrap: wrap; }
.coder .stage { height: 708px; min-height: 0; padding: 44px; }
.coder .stage canvas {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 6px;
  box-shadow: 0 0 0 .5px var(--hair), 0 1px 2px rgba(36, 17, 12, .08);
}
#use { margin: 16px 0 0; grid-column: 1 / -1; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.coder .result { margin-top: 12px; }
.coder .share { justify-content: flex-start; flex-wrap: wrap; gap: 0 24px; margin: 0; }
.coder .link[hidden] { display: none; }

@media (max-width: 1119px) {
  .coder textarea { min-height: 240px; max-height: 420px; }
  .coder .stage { height: 660px; padding: 40px 24px; }
}
@media (max-width: 759px) {
  .coder textarea { min-height: 200px; max-height: 360px; }
  .coder .switches { gap: 12px; }
  .coder .seg button { padding: 0 11px; }
  /* On a phone the well runs edge to edge and the picture keeps 20 px of it each side, as tall as a 4:5 one. */
  .coder .stage { height: calc((100vw - 40px) * 1.25 + 40px); padding: 20px; }
  #use { order: 1; }
}
@media (max-width: 359px) {
  .coder .stage { height: calc((100vw - 32px) * 1.25 + 32px); padding: 16px; }
}