/* The page's own rules on top of assets/ddlc-ui.css, the DDLC web kit vendored from
   rokokol/ddlc-themes: the bar, the cards, the controls, the dialogs and the colour roles
   come from there. A colour here is a --ddlc-* role or palette colour, never a literal */

/* The editor and the background, read by the canvases through a probe element */
:root {
  --cell-off: light-dark(var(--ddlc-paper), color-mix(in srgb, var(--ddlc-ink) 85%, var(--ddlc-yuri-shadow)));
  --cell-on: light-dark(var(--ddlc-ink), var(--ddlc-blush));
  --byte-guide: var(--ddlc-pink);

  /* The tool strip takes what its buttons need; the panel stays the export's width */
  --ddlc-tools-width: auto;
  --ddlc-panel-width: minmax(300px, 360px);
}

/* The kit moves the tools under the stage from 1240 px; an editor keeps them beside the
   canvas until the page is too narrow for three columns at all */
@media (max-width: 1240px) {
  .work {
    grid-template-columns: var(--ddlc-tools-width) minmax(0, 1fr) var(--ddlc-panel-width);
    grid-template-areas: "tools stage panel";
  }

  .tools {
    display: flex;
    align-items: stretch;
  }
}

/* ---------- layout ---------- */

.tools {
  position: sticky;
  top: var(--ddlc-gap);
  gap: 12px;
  width: 144px;
}

.tool-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.tool-group .check {
  grid-column: span 2;
}

.tool {
  padding: 2px 4px;
  text-align: center;
}

/* A label here reads as one phrase, "pen 1 px", rather than a caption with its value at
   the far edge */
.field > span {
  display: block;
}

.canvas-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: min(62vh, 640px);
  padding: 4px 10px 10px 4px;
  overflow: auto;
}

#editor {
  display: block;
  touch-action: none;
  cursor: crosshair;
  image-rendering: pixelated;
  outline: 2px solid var(--ddlc-text);
  box-shadow: 6px 6px 0 var(--ddlc-line);
}

.status {
  min-height: 22px;
}

.slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.slot {
  display: grid;
  gap: 2px;
  padding: 4px;
  border: 2px solid var(--ddlc-line);
  background: var(--ddlc-panel);
  color: var(--ddlc-muted);
  font: inherit;
  cursor: pointer;
}

.slot canvas {
  width: 30px;
  height: 48px;
  image-rendering: pixelated;
}

.slot[aria-checked="true"] {
  border-color: var(--ddlc-text);
  color: var(--ddlc-text);
}

.preview {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0;
}

#preview {
  image-rendering: pixelated;
  outline: 2px solid var(--ddlc-line);
}

.preview figcaption {
  color: var(--ddlc-muted);
}

/* ---------- panel ---------- */

.note {
  margin: 0 0 8px;
}

.usage {
  max-height: 140px;
}

.actions {
  margin-top: 12px;
}

.actions > .button {
  flex: none;
}

.help summary {
  color: var(--ddlc-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.help dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 8px 0 0;
}

.help dt {
  color: var(--ddlc-accent);
}

.help dd {
  margin: 0;
}

/* noob mode hides everything marked advanced */
body.noob [data-advanced] {
  display: none !important;
}

/* ---------- dialogs ---------- */

dialog {
  padding: 0;
}

.dialog {
  padding: var(--ddlc-gap);
}

.image-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--ddlc-gap);
  align-items: start;
}

#image-preview {
  width: 100%;
  image-rendering: pixelated;
  background: var(--cell-off);
  border: 2px solid var(--ddlc-line);
}

.knobs {
  display: grid;
  gap: 2px;
}

.candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- narrow screens ---------- */

@media (max-width: 960px) {
  .work {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tools" "stage" "panel";
  }

  .tools {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
  }

  .tool-group {
    grid-template-columns: repeat(4, auto);
  }

  .tools .field {
    width: 140px;
  }

  .canvas-wrap {
    min-height: 0;
  }

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

@media (max-width: 560px) {
  .bar-end {
    margin-left: 0;
  }
}