/* Pixel editor, project 17.

   The editor is the page: a rail of controls on the left from 900px up,
   stacked above the stage below that. Everything here is site design system
   chrome. The only place the palette breaks out is inside the stage, where
   the drawing lives, and in the sixteen swatch classes at the bottom of this
   file, which are the exact hexes the canvas paints with. A swatch that stops
   matching the paint is a visible, findable difference. */

.px__about {
  margin-block-start: var(--s-5);
  color: var(--text-2);
  max-width: var(--measure);
}

.px__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  margin-block-start: var(--s-6);
  align-items: start;
}

@media (min-width: 900px) {
  .px__layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--s-6);
  }
}

/* ------------------------------------------------------------------ rail */

.px__rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.px__group {
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.px__groupTitle {
  margin: 0 0 var(--s-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
}

.px__fieldRow {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.px__fieldRow + .px__fieldRow {
  margin-block-start: var(--s-4);
}

.px__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.px__buttons .c-btn {
  flex: 1 1 auto;
}

/* ------------------------------------------------------------ tool group */

/* Native radios, so the browser gives the radio group its keyboard behaviour
   and its accessible name for nothing. The input is hidden from sight but not
   from the accessibility tree, and the label carries the focus ring. */

.px__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  border: 0;
  margin: 0;
  padding: 0;
}

.px__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  color: var(--text-1);
  font-size: var(--t-sm);
  cursor: pointer;
}

.px__option:hover {
  background: var(--bg-2);
}

.px__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.px__option:has(input:checked) {
  background: var(--bg-2);
  border-color: var(--accent);
  color: var(--text-1);
  font-weight: 600;
}

.px__option:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- palette group */

.px__palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  border: 0;
  margin: 0;
  padding: 0;
}

@media (max-width: 480px) {
  .px__palette { grid-template-columns: minmax(0, 1fr); }
}

.px__swatchLabel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: var(--s-1) var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  color: var(--text-2);
  font-size: var(--t-xs);
  cursor: pointer;
}

.px__swatchLabel:hover {
  background: var(--bg-2);
}

.px__swatchLabel input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.px__swatchLabel:has(input:checked) {
  border-color: var(--accent);
  background: var(--bg-2);
  color: var(--text-1);
}

.px__swatchLabel:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.px__swatch {
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid var(--line-control);
  border-radius: 4px;
}

.px__customRow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-3);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--line);
}

.px__customInput {
  width: 44px;
  height: 44px;
  padding: 2px;
  background: var(--bg-0);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  cursor: pointer;
}

/* ----------------------------------------------------------------- stage */

.px__stageWrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

.px__stage {
  width: 100%;
  max-width: 576px;
  aspect-ratio: 1;
  margin-inline: auto;
  display: block;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  touch-action: none;
  cursor: crosshair;
}

.px__stage:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The three action groups live under the stage rather than at the bottom of
   the rail. In the rail they made the left column half again as tall as the
   right one, and the page was mostly empty beside the canvas. */
.px__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-4);
  align-items: start;
}

.px__status {
  margin: 0;
  min-height: 1.6em;
  color: var(--text-2);
  font-size: var(--t-sm);
  text-align: center;
}

/* ---------------------------------------------------------------- dialog */

.px__dialog {
  max-width: 26rem;
  padding: var(--s-5);
  background: var(--bg-1);
  color: var(--text-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

.px__dialog::backdrop {
  background: rgb(6 16 31 / 0.7);
}

.px__dialogTitle {
  margin: 0 0 var(--s-3);
  font-size: var(--t-lg);
  font-weight: var(--t-lg-weight);
}

.px__dialogBody {
  margin: 0 0 var(--s-5);
  color: var(--text-2);
}

.px__dialogActions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

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

.px__panel {
  margin-block-start: var(--s-6);
  padding: var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.px__panelTitle {
  margin: 0 0 var(--s-3);
  font-size: var(--t-lg);
  font-weight: var(--t-lg-weight);
}

.px__keys {
  margin: 0;
  padding-inline-start: var(--s-5);
  color: var(--text-2);
  display: grid;
  gap: var(--s-2);
  max-width: var(--measure);
}

.px__keys kbd {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  padding: 1px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-control);
  border-radius: 4px;
  color: var(--text-1);
}

.px__note {
  margin-block-start: var(--s-4);
  margin-block-end: 0;
  color: var(--text-2);
  max-width: var(--measure);
}

/* ------------------------------------------------- the sixteen paint hexes */

.px__swatch--ink     { background: #000000; }
.px__swatch--shadow  { background: #24344F; }
.px__swatch--slate   { background: #8393AB; }
.px__swatch--snow    { background: #FFFFFF; }
.px__swatch--harbour { background: #4FA3FF; }
.px__swatch--deepsea { background: #1D4E89; }
.px__swatch--teal    { background: #43D6B5; }
.px__swatch--moss    { background: #6EDB8F; }
.px__swatch--pine    { background: #2F6B45; }
.px__swatch--ember   { background: #F5B84D; }
.px__swatch--rust    { background: #B05C2A; }
.px__swatch--coral   { background: #FF9D7E; }
.px__swatch--blush   { background: #FF8080; }
.px__swatch--plum    { background: #B08CFF; }
.px__swatch--berry   { background: #7A3B6B; }
.px__swatch--sand    { background: #E4C79A; }

/* The pointer says which tool is armed. Set from JS as a data attribute, not
   as an inline style, because the CSP forbids inline styles. */
.px__stage[data-tool="eyedropper"] { cursor: copy; }