/*
 * Adapts the original stylesheet to the rebuilt markup.
 *
 * style.css is linked unchanged, so anything the React version does
 * differently is reconciled here rather than by editing it. Kept short on
 * purpose: every rule below is a place the new markup differs from the Angular
 * template, and the list should shrink, not grow.
 */

/*
 * The blocks proof was a <canvas> the browser drew; it is now a PNG the server
 * renders, so the sizing rule has to reach an <img> too.
 *
 * style.css only ever set the 100px fallback — canvas.js then overwrote the
 * width with `pixelWidth * 2` (or * 1.4 below 768px) so the proof took its size
 * from how many columns the design actually uses. page.tsx passes that count in
 * as --columns; the arithmetic is the original's.
 */
#proof-canvas img {
  width: calc(var(--columns, 50) * 2px);
  margin-top: 100px;
}

@media (max-width: 768px) {
  #proof-canvas img {
    width: calc(var(--columns, 50) * 1.4px);
  }
}

/* The silhouette carried width/height attributes in the source SVG; inlined as
   JSX they would win over the 420px the stylesheet asks for. */
#proof-shirt {
  width: 420px;
  height: 420px;
}

/* The shirt selection sat inside a form the quote directive owned. */
.shirt-selection {
  margin-bottom: 12px;
}

/*
 * style.css asks for `min-height: 50%` on .editor and .designer — two bands,
 * each half the viewport. A percentage height resolves only against an
 * ancestor with a *definite* height, and nothing in the original set one, so
 * the rule never applied and both bands collapsed to their content.
 *
 * Saying it in viewport units instead needs no ancestor to cooperate, and is
 * what the 50% meant. .designer.done keeps its own 240px minimum, so the band
 * still shrinks once a design is chosen.
 */
.editor,
.editor .table,
.designer,
.designer .table {
  min-height: 50vh;
}

/*
 * The spacing switch. Two designs are printable — the original's lines of code
 * with their leading, and the dense mosaic you get by dropping it — so this
 * picks between them rather than toggling a preview mode.
 *
 * Borrows the switcher's voice: `>>` prefixes, the active one in the theme's
 * keyword colour, everything else quiet.
 */
.density {
  /* style.css lines the editor column up by right-floating each block inside a
     700px cap (see the `.explanation, #step1-button, h1, #preview, #source`
     rule); without the same treatment this sits flush against the far edge. */
  width: 100%;
  max-width: 700px;
  float: right;
  margin: 18px 0 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  /* Same face as `>> continue with this design` and `>> restart`, which
     style.css sets on .editor button and #step1-button. */
  font-family: "Source Code Pro", monospace;
  font-size: 13px;
  font-weight: 600;
}

.density .label {
  opacity: 0.45;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  font-weight: 400;
  font-size: 12px;
}

.density button {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: lowercase;
  cursor: pointer;
}

.density button.silent {
  opacity: 0.45;
}

.density button:hover {
  opacity: 1;
}

/*
 * The block preview answers the spacing switch too.
 *
 * Without this it shows lines of code with their leading while the proof below
 * it shows the dense mosaic — two different shirts on one screen.
 *
 * BLOKK Neue paints every glyph as a filled rectangle, 8px tall at the 18px
 * style.css asks for, and the leading is whatever the line box adds on top of
 * it. The print states the same thing as a ratio — a 50-unit block sitting on a
 * 170-unit band — so matching the two is just line-height over block height:
 * 170/50 for spaced, and 1 for solid, where the bands butt together into one
 * slab. Horizontal pitch needs no help; `letter-spacing: -3px` already has the
 * blocks touching, and the print has no column margin either.
 */
#preview code {
  --blokk-block: 0.4444em;   /* the 8px rectangle, in ems of the 18px face */
}

#preview.spacing-lines code {
  line-height: calc(var(--blokk-block) * 3.4);
}

#preview.spacing-solid code {
  line-height: var(--blokk-block);
}

/*
 * The code box fills the band it sits in.
 *
 * style.css gives #source a 200px min-height and the original grew it from
 * there with elastic.js (public/vendor/elastic.js), which the rewrite dropped.
 * So a long snippet scrolled inside a 200px box two-thirds of the way up an
 * otherwise empty half-screen band: 880px of code in 200px of room, with 340px
 * of white space below it.
 *
 * The band is 50vh and the heading and blurb above the box take 155px of it,
 * so this claims what is left. Growing past that is the JSX's job -- it sets an
 * explicit height from scrollHeight on every keystroke, the way elastic did --
 * and min-height still wins whenever the code is shorter than the band.
 */
.editor #source {
  min-height: calc(50vh - 175px);
  overflow-y: hidden;
}