/* studio.css: the Shrimp Studio card, which carries the canonical column in
 * its own right quarter. The app's card language: the settings card's dark field
 * inside the brown rim, cream ink, amber for the one thing that is picked.
 * Sizes stay on the fonts' grids (Yowza 26px, Lowza 8px steps). */

:root {
  --canon-min-h: 344px;
  --canon-gap: 12px;
}

/* The card opens in the middle of the screen: the page is at least the
 * viewport's height, with the same room above and below, and centres it. A
 * card taller than the screen starts under the bar and scrolls. */
.studio-page {
  box-sizing: border-box;
  min-height: 100svh;
  padding: calc(var(--bar-h) + 16px) 16px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.studio-card {
  background: var(--tank);
  color: var(--cream);
  border: var(--rim-w) solid var(--edge);
  border-radius: 12px;
  padding: 16px;
  width: 100%;
  max-width: 880px;
}

/* Three quarters of the card hold the steps, the choices and the preview; the
 * canon column is the right quarter, and the card ends where they do. */
.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.studio-main {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr) 176px;
  gap: 16px;
  align-items: start;
}

/* The site gives every section a page section's padding and centring; the
 * card's columns are sections too, and start flush on the card's top line. */
.studio-main > section {
  max-width: none;
  margin: 0;
  padding: 0;
}

.studio-regions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.region {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  border: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--cream);
  font: inherit;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.region:hover {
  border-color: color-mix(in srgb, var(--cream) 30%, transparent);
}

.region.is-active {
  border-color: var(--amber);
  color: var(--amber);
}

.region.is-skipped {
  opacity: 0.5;
}

.region-name {
  flex: 1;
}

.region-chips {
  display: flex;
  gap: 2px;
}

.chip {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

/* -- choices -------------------------------------------------------------- */

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.swatch-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  color: var(--pixel-ink);
}

.swatch:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.swatch.is-picked {
  border-color: var(--amber);
  outline: 2px solid var(--cream);
}

.swatch.is-slot {
  width: 40px;
  height: 40px;
}

.swatch.is-clear {
  background: repeating-conic-gradient(#d9d2bb 0 25%, #f4efdc 0 50%) 0 0 / 10px 10px;
}

.words,
.word-column {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.words {
  flex-wrap: wrap;
}

.word-column {
  flex-direction: column;
  margin-bottom: 0;
}

.word {
  padding: 5px 10px;
  border: 2px solid color-mix(in srgb, var(--cream) 35%, transparent);
  border-radius: 4px;
  background: transparent;
  color: var(--cream);
  font: inherit;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

.word.is-picked {
  border-color: var(--amber);
  background: var(--amber);
  color: var(--pixel-ink);
}

.word:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Pattern is its own panel: the patterns down one side, their colours beside
 * them, so both are visible at once. */
.pattern-panel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.eye-panel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.eye-split {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(0, 0, 0, 0.55);
  border-radius: 3px;
}

/* -- finish --------------------------------------------------------------- */

/* A bare track, no box around it: a line with the three stops standing under
 * it, each at its own place along it rather than evenly spread. */
.clarity {
  position: relative;
  height: 34px;
  margin-bottom: 10px;
  touch-action: none;
}

.clarity::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 4px;
  border-radius: 2px;
  background:
    linear-gradient(to right,
      var(--amber) calc(var(--fill) * 100%),
      color-mix(in srgb, var(--cream) 30%, transparent) calc(var(--fill) * 100%));
}

.clarity-stop {
  position: absolute;
  top: 14px;
  left: calc(var(--at) * 100%);
  transform: translateX(calc(var(--pull) * -100%));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  font: inherit;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
}

.clarity-stop.is-picked {
  color: var(--amber);
}

.finishes {
  display: flex;
  gap: 5px;
}

.finishes .word {
  flex: 1;
}

/* -- the arrows ----------------------------------------------------------- */

.studio-step {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 44px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

/* The arrow art is dark; brightness(0) invert(1) repaints its pixels in the
 * page's white ink and leaves its edges alone. */
.arrow img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  filter: brightness(0) invert(1);
}

.arrow.is-back img {
  transform: scaleX(-1);
}

/* The step's name and where it sits on the path stand between the arrows on a
 * phone, where the steps panel is gone. */
.studio-step-at {
  display: none;
}

.arrow:hover {
  border-color: var(--amber);
}

.arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* -- preview -------------------------------------------------------------- */

.studio-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.studio-well {
  width: 144px;
  height: 144px;
  display: grid;
  place-items: center;
  border: 2px solid var(--edge);
  background: repeating-conic-gradient(#3b4a55 0 25%, #4a5b67 0 50%) 0 0 / 36px 36px;
}

.studio-well.is-rolling {
  border-color: var(--amber);
}

.studio-well canvas {
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.studio-code {
  margin: 0;
  text-transform: none;
  letter-spacing: 1px;
}

.studio-line {
  width: 100%;
}

.studio-line input {
  width: 100%;
  padding: 6px 8px;
  border: 2px solid color-mix(in srgb, var(--cream) 35%, transparent);
  border-radius: 4px;
  background: transparent;
  color: var(--cream);
  font: inherit;
  text-transform: uppercase;
}

.studio-line input:focus {
  border-color: var(--amber);
}

.studio-lab {
  width: 100%;
  justify-content: center;
}

.studio-status {
  margin: 0;
  text-align: center;
}

.studio-status:empty {
  display: none;
}

/* -- the canonical column ------------------------------------------------- */

/* One tile across, scrolling inside the card. Its scroller is taken out of the
 * flow so the shrimp never add to the card's height: the card is as tall as
 * the steps, choices and preview make it, and the canon fills exactly that.
 * studio.js sizes the sprites to the largest whole-number scale the quarter
 * holds. */
.canon {
  position: relative;
  min-height: var(--canon-min-h);
  border-left: 2px solid color-mix(in srgb, var(--cream) 20%, transparent);
}

.canon-scroll {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: var(--canon-gap);
  padding: 8px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.canon-list {
  display: contents;
}

.canon-roll,
.canon-tile {
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.canon-roll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-color: var(--edge);
  background: var(--tank);
  color: var(--cream);
  font: inherit;
  line-height: 1.2;
  text-transform: uppercase;
}

.canon-roll-label {
  display: block;
}

/* A phone's tile is too narrow for the long word at a size worth reading, so
 * it says Random instead, larger. */
.roll-short {
  display: none;
}

.canon-roll.is-rolling {
  border-color: var(--amber);
}

.canon-tile:hover,
.canon-roll:hover {
  border-color: var(--amber);
}

.canon-sprite {
  display: block;
  width: var(--canon-sprite, 64px);
  height: var(--canon-sprite, 64px);
  image-rendering: pixelated;
  background-repeat: no-repeat;
}

/* -- focus ---------------------------------------------------------------- */

.region:focus-visible,
.swatch:focus-visible,
.word:focus-visible,
.clarity-stop:focus-visible,
.arrow:focus-visible,
.canon-tile:focus-visible,
.canon-roll:focus-visible,
.studio-lab:focus-visible,
.is-aimed {
  outline: 3px solid var(--kelp-bright);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .canon-roll-label {
    font-size: 8px;
  }

  .studio-page {
    padding: calc(var(--bar-h) + 16px) 12px;
  }

  .studio-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-preview {
    order: -1;
  }

  .studio-regions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

}

/* -- phone ---------------------------------------------------------------- */

/* The shrimp is the page. The card fills the screen under the bar: the preview
 * well takes whatever height is left, and under it stand the arrows with the
 * current step between them, that step's choices in a fixed-height field so
 * the shrimp never jumps between steps, and the canon strip along the bottom.
 * The steps panel is gone; the line name and Breed this in Lab are the last
 * step's choices. */
@media (max-width: 560px) {
  .canon-roll-label {
    font-size: 16px;
  }

  .roll-long {
    display: none;
  }

  .roll-short {
    display: inline;
  }

  :root {
    --phone-gap: 8px;
    --phone-choices-h: 164px;
    --phone-well-min: 136px;
    --phone-canon-h: 92px;
    --phone-swatch-columns: 8;
    --phone-swatch-max: 34px;
    --phone-eye-columns: 6;
    --phone-eye-max: 40px;
  }

  .studio-page {
    display: block;
    min-height: 100dvh;
    padding: calc(var(--bar-h) + var(--phone-gap)) var(--phone-gap) var(--phone-gap);
    touch-action: manipulation;
  }

  .studio-card {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--bar-h) - var(--phone-gap) * 2);
    padding: var(--phone-gap);
    max-width: none;
  }

  .studio-card button,
  .studio-card a {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }

  .studio-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--phone-gap);
  }

  .studio-main {
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(var(--phone-well-min), 1fr) auto var(--phone-choices-h);
    grid-template-areas: 'well' 'step' 'choices';
    gap: var(--phone-gap);
    align-items: stretch;
  }

  .studio-main > .studio-preview,
  .studio-main > .studio-choices {
    display: contents;
  }

  .studio-regions {
    display: none;
  }

  .studio-well {
    grid-area: well;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .studio-code {
    grid-area: well;
    align-self: end;
    justify-self: center;
    margin-bottom: 6px;
    font-size: 8px;
    pointer-events: none;
  }

  .studio-status {
    grid-area: well;
    align-self: start;
    justify-self: stretch;
    margin: 6px;
    padding: 4px;
    background: var(--tank);
  }

  .studio-step {
    grid-area: step;
    align-items: center;
    justify-content: space-between;
    margin: 0;
  }

  .arrow {
    width: 64px;
    height: 56px;
    flex: none;
  }

  .arrow img {
    width: 48px;
    height: 48px;
  }

  .studio-step-at {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .studio-step-name {
    line-height: 1.2;
  }

  .studio-step-pips {
    display: flex;
    gap: 4px;
  }

  .studio-pip {
    width: 6px;
    height: 6px;
    background: color-mix(in srgb, var(--cream) 35%, transparent);
  }

  .studio-pip.is-active {
    background: var(--amber);
  }

  .studio-pip.is-skipped {
    opacity: 0.35;
  }

  #choices {
    grid-area: choices;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .studio-card[data-step="name"] #choices {
    display: none;
  }

  .studio-line,
  .studio-lab {
    display: none;
    grid-area: choices;
  }

  .studio-card[data-step="name"] .studio-line {
    display: block;
    align-self: start;
    margin-top: var(--phone-gap);
  }

  .studio-card[data-step="name"] .studio-lab {
    display: flex;
    align-self: center;
  }

  .studio-line input {
    padding: 10px;
  }

  .swatches {
    margin-bottom: 6px;
  }

  #choices > :last-child {
    margin-bottom: 0;
  }

  .swatches,
  .swatch-column {
    display: grid;
    grid-template-columns: repeat(var(--phone-swatch-columns), minmax(0, var(--phone-swatch-max)));
    gap: 6px;
  }

  .swatch {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .swatch.is-slot {
    grid-column: span 2;
    width: 100%;
    height: 40px;
    aspect-ratio: auto;
  }

  .pattern-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .word-column {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .word {
    padding: 5px 8px;
  }

  .pattern-panel .swatch-column {
    width: 100%;
  }

  .eye-panel {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 6px 10px;
    align-items: start;
  }

  .eye-split {
    grid-row: span 2;
  }

  .eye-panel .swatch-column {
    grid-template-columns: repeat(var(--phone-eye-columns), minmax(0, var(--phone-eye-max)));
  }

  .canon {
    flex: none;
    height: var(--phone-canon-h);
    min-height: 0;
    border-left: 0;
    border-top: 2px solid color-mix(in srgb, var(--cream) 20%, transparent);
    --canon-sprite: 64px;
  }

  .canon-scroll {
    grid-template-columns: none;
    grid-template-rows: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-content: stretch;
    align-items: center;
    justify-content: start;
    padding: 4px 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .canon-scroll::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 560px) and (hover: none) {
  .arrow:hover,
  .canon-tile:hover {
    border-color: transparent;
  }

  .canon-roll:not(.is-rolling):hover {
    border-color: var(--edge);
  }
}