/* Roast sweet potato: roasting-room browns, purple-red skin, golden flesh. */
:root {
  --bg: #2b1f1d;
  --surface: #ebe0cf;
  --surface-2: #d8c9b2;
  --field: #f5ecdf;
  --bar: #5a3836;
  --disc: #5a3434;
  --ink: #3a2522;
  --ink-2: #6b4a42;
  --ink-3: #a58a7a;
  --line: #5a3836;
  --accent: #f4b863;
  --danger: #8f2f2a;
  --on-dark: #f6e6cf;
  --title: #f4b863;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  touch-action: pan-x pan-y;
  background-color: #2b1f1d;
  background-size: 192px 192px;
}

/* one boil for the whole page: the frame (scene canvas included) and every dialog or popover laid over it */
.page-boil,
.modal-overlay,
.popover {
  filter: url(#potato-boil);
}

#app {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.frame {
  position: absolute;
  overflow: hidden;
  background: #806a5a;
}

.scene {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.bar {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  pointer-events: none;
}

.bar-bg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}

.title-wrap {
  margin: 0;
  font-size: inherit;
}

.title {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--title);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}

/* joined segmented switch (language, export range): one pill, halves touch, the chosen half filled */
.seg {
  display: flex;
  border: 1.5px solid rgba(244, 184, 99, 0.7);
  border-radius: 13px;
}

.seg-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  margin: 0;
  padding: 0 9px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #f4dcb8;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

/* the touch area reaches 44 px each way without making the pill bigger */
.seg-opt::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}

.lang .seg-opt:first-child::before {
  left: -14px;
}

.lang .seg-opt:last-child::before {
  right: -14px;
}

.seg-opt:first-child {
  border-radius: 12px 0 0 12px;
}

.seg-opt:last-child {
  border-radius: 0 12px 12px 0;
}

.seg-opt.is-on {
  background: var(--title);
  color: #3a2020;
}

.lang {
  position: absolute;
  right: 14px;
  pointer-events: auto;
}

.modal-untitled .modal-stack > .export-range:first-child {
  max-width: none;
  margin-left: calc(var(--touch) - var(--gap-3));
  margin-right: calc(var(--touch) - var(--gap-3));
}

.modal-untitled .modal-stack > .place-wrap:first-child {
  max-width: none;
}

.place-wrap {
  display: flex;
  justify-content: center;
}

.place-view {
  touch-action: none;
  cursor: move;
}

.export-range,
.place-mode {
  align-self: stretch;
  border: 2px solid var(--bar);
  border-radius: 16px;
}

.export-range .seg-opt,
.place-mode .seg-opt {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  padding: 0 10px;
  color: var(--ink);
  font-size: 17px;
}

.export-range .seg-opt:first-child,
.place-mode .seg-opt:first-child {
  border-radius: 14px 0 0 14px;
}

.export-range .seg-opt:last-child,
.place-mode .seg-opt:last-child {
  border-radius: 0 14px 14px 0;
}

/* narrow phones: the language switch gets smaller, the title keeps its size */
@media (max-width: 359px) {
  .lang .seg-opt {
    height: 22px;
    padding: 0 6px;
    font-size: 11px;
  }

  .lang .seg-opt::before {
    top: -11px;
    bottom: -11px;
  }

  .lang .seg-opt:first-child::before {
    left: -20px;
  }

  .lang .seg-opt:last-child::before {
    right: -20px;
  }
}

.export-range .seg-opt::before,
.place-mode .seg-opt::before {
  top: -2px;
  bottom: -2px;
}

.export-range .seg-opt.is-on,
.place-mode .seg-opt.is-on {
  background: var(--bar);
  color: var(--on-dark);
}

.scene.no-cursor {
  cursor: none;
}

.rail {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: var(--btn);
}

.tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  border: 0;
  border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  background: var(--disc);
  color: var(--title);
}

.tool svg {
  flex: none;
  width: calc(var(--btn) * 0.5);
  height: calc(var(--btn) * 0.5);
  margin: auto;
}

.tool canvas {
  display: block;
}

/* the face scales with the button when the columns shrink on a narrow screen */
.rail .tool canvas {
  width: calc(var(--btn) * 0.91) !important;
  height: calc(var(--btn) * 0.91) !important;
}

.tool .icon,
.mini .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}



.tool.is-on {
  background: #7d4a3e;
  box-shadow: 0 0 0 3px #f4b863;
}

.tool:disabled {
  opacity: 0.45;
}

.add-btn {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
}

.bin {
  position: absolute;
  pointer-events: none;
}

.add-btn canvas {
  width: 100% !important;
  height: 100% !important;
}

.add-btn:disabled {
  opacity: 0.5;
}

.add-btn.is-on canvas {
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}

/* flesh editor: a cream panel over the pot; tools left, flesh and colours in the middle, history right */
.editor {
  position: absolute;
  z-index: var(--z-float);
}

.editor[hidden] {
  display: none;
}

.editor-bg {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.editor-main {
  position: absolute;
  left: var(--pad, 22px);
  top: var(--pad, 22px);
  right: var(--pad, 22px);
  display: flex;
  align-items: center;
}

.editor-okcol {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  align-self: stretch;
  width: 48px;
  margin-left: 10px;
}

.editor-col {
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  align-self: flex-start;
}

.editor-col > * {
  margin-bottom: 6px;
}

.editor-col.is-two > :nth-child(-n + 3) {
  margin-right: 6px;
}

.editor-stage {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  margin-left: 10px;
}

.editor-flesh {
  display: block;
  flex: none;
  touch-action: none;
  cursor: crosshair;
}

/* bottom row: preset colours, the tick at the right end */
.editor-foot {
  position: absolute;
  left: var(--pad, 22px);
  right: var(--pad, 22px);
  bottom: var(--pad, 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.editor-colors {
  display: flex;
  align-items: center;
}

.swatch {
  position: relative;
  flex: none;
  width: var(--chip, 36px);
  height: var(--chip, 36px);
  margin-right: 3px;
  border: 2px solid rgba(58, 37, 34, 0.35);
  border-radius: 50%;
}

/* touch area reaches 44 px without growing the swatch */
.swatch::before {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: -6px;
  bottom: -6px;
}

.swatch.is-on {
  border-color: var(--bar);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--bar);
}

.mini {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--disc);
  color: var(--title);
}

.mini canvas {
  display: block;
}

.mini svg {
  display: block;
  width: 22px;
  height: 22px;
}

.mini.is-on {
  box-shadow: 0 0 0 3px #f4b863;
}

.mini:disabled {
  opacity: 0.4;
}

.editor-close {
  position: absolute;
  top: 2px;
  right: 2px;
  background: none;
  color: var(--ink-2);
}

.editor-close svg {
  width: 18px;
  height: 18px;
}

/* choosing how an imported picture prints */
.import-modes {
  display: flex;
  justify-content: center;
}

.import-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 8px;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: none;
  color: var(--ink);
  font-size: 15px;
}

.import-mode.is-on {
  border-color: var(--bar);
}

.import-preview {
  display: block;
  width: 72px;
  height: 120px;
  margin-bottom: 6px;
}

/* dialogs in the roasting-room look: cream glazed body, hand-cut edge, chocolate rim and buttons */
.modal-overlay {
  background: rgba(43, 25, 22, 0.55);
}

.modal {
  width: auto;
  min-width: 240px;
  max-width: calc(100% - 24px);
  border: 2.5px solid var(--bar);
  border-radius: 22px 30px 26px 34px / 30px 24px 34px 26px;
  background-color: var(--surface);
  background-image: var(--glaze);
  background-size: 192px 192px;
  color: var(--ink);
}

.modal .btn {
  min-height: 44px;
  border: 2px solid var(--bar);
  border-radius: 16px 20px 18px 22px / 20px 16px 22px 18px;
  background: #f6ead6;
  color: var(--ink);
  font-weight: 900;
}

.modal .btn-primary,
.modal .btn-danger {
  background: var(--bar);
  border-color: var(--bar);
  color: var(--title);
}

.modal-close {
  background: transparent;
  color: var(--bar);
}

.modal-progress {
  border: 2px solid var(--bar);
}

.popover {
  border: 2px solid var(--bar);
  border-radius: 14px 18px 16px 20px / 18px 14px 20px 16px;
  background-color: var(--surface);
}

.btn-primary {
  background: var(--bar);
  border-color: var(--bar);
  color: var(--on-dark);
}

.modal-preview {
  width: auto;
  max-width: 280px;
  max-height: 44vh;
  margin: 0 auto;
}