/* Old crayons: warm beige ground, charcoal title bar, warm taupe round buttons, slate tool buttons, a rust fabric
   crayon pouch at the bottom. Everything is coloured in with wax (js/crayon/skins.js); the whole page, dialogs
   included, jitters in one layer (js/crayon/pageBoil.js on body). */
:root {
  color-scheme: only light;
  --c-ground: #e2d6c2;
  --c-desk: #d2c1a4;
  --c-outside: #8a7663;
  --c-panel: #f4ead8;
  --c-ink: #3b2f2a;
  --c-rust: #8b4a2f;
  --c-dark: #3b2f2a;
  --c-title-ink: #b3a289;
  --bg: #e2d6c2;
  --surface: #f4ead8;
  --surface-2: #e2d3bb;
  --field: #faf3e6;
  --bar: #3b2f2a;
  --ink: #3b2f2a;
  --ink-2: #74533f;
  --ink-3: #a3876c;
  --line: #8b4a2f;
  --accent: #f2c14e;
  --on-dark: #fbf0e0;
  --radius: 0;
  --radius-sm: 0;
  --tap: 44px;
  --side: 44px;
  --top-h: 66px;
  --row-h: 94px;
  --top-mid: 37px;
}

/* the desk colour behind the page too, so the jitter at the page edge never shows a different colour */
html,
body {
  background-color: var(--c-desk);
  color: var(--c-ink);
}

.page-boil,
.modal-overlay,
.popover {
  filter: url(#crayon-boil);
}

/* paused while the hands move the desk (see view.js) */
.page-boil.is-calm {
  -webkit-filter: none;
  filter: none;
}

/* the page lets touches through to the desk layer underneath, except on its controls */
#app {
  z-index: 1;
  pointer-events: none;
}

.touch-layer {
  position: fixed;
  z-index: 0;
  touch-action: none;
  cursor: crosshair;
}

.touch-layer.is-panning {
  cursor: grab;
}

.touch-layer[data-tool='text'] {
  cursor: text;
}

.paper-input,
.place-layer {
  pointer-events: auto;
}

.paper-input-mirror {
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  font-weight: 700;
  white-space: pre;
  pointer-events: none;
}

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

.stage {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--c-desk);
}

/* bars float over the desk: only their own controls take pointer events */
.top,
.basic,
.bottom {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.bottom {
  z-index: 3;
}

/* the controls take touches; the empty space between and round them (title bar, language switch box, the pouch's
   fabric, the settings rows) belongs to the desk */
.paper-btn,
.seg-btn,
.basic > *,
.tools > *,
.pouch-tab,
.crayon-btn,
.pouch-action,
.tool-panel button,
.tool-panel input,
.tool-panel .text-fonts,
.toast.is-shown .toast-action {
  pointer-events: auto;
}

.toast.is-shown,
.title-bar,
.lang-seg,
.float-panel,
.pouch,
.tool-panel,
.tool-panel .text-line,
.tool-panel .text-group {
  pointer-events: none;
}

/* no native panning or zooming starts on the page's controls, so a finger that lands on one can still be one of the
   two that move the desk; the strip of fonts slides under the finger by script (js/ui/stripScroll.js) */
#app,
#app * {
  touch-action: none;
}

.skin {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- top: paper button, title bar in the middle, language switch at the right ---- */
/* Everything sits in the layout flow: three columns, equal side columns so the title stays centred. */
.top {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
  grid-column-gap: calc(var(--u) * 1.5);
  align-items: center;
  height: var(--top-h);
  padding: 0 calc(var(--u) * 2);
}

.paper-btn {
  position: relative;
  justify-self: start;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: none;
}

.title-bar {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 13);
}

.title {
  position: relative;
  margin: 0;
  color: var(--c-title-ink);
  font-weight: 900;
  font-size: calc(var(--u) * 6);
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.lang-seg {
  position: relative;
  justify-self: end;
  display: flex;
  height: calc(var(--u) * 7);
}

.seg-btn {
  position: relative;
  z-index: 1;
  min-width: calc(var(--u) * 6.4);
  height: 100%;
  padding: 0 calc(var(--u) * 1.8);
  background: transparent;
  color: #5b4535;
  font-size: calc(var(--u) * 3);
  line-height: 1;
}

.seg-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc((var(--u) * 7 - 44px) / 2);
  bottom: calc((var(--u) * 7 - 44px) / 2);
}

.seg-btn.is-on {
  color: #fff3e4;
}

/* ---- the five round buttons ---- */
.basic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: calc(var(--basic-tap) + var(--u) * 2.5);
}

.basic .tool {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--basic-tap);
  height: var(--basic-tap);
  margin: 0 var(--basic-m);
  padding: 0;
  background: none;
  color: #fbf1e3;
}

.basic .tool .icon {
  position: relative;
  display: block;
  width: calc(var(--basic-tap) * 0.5);
  height: calc(var(--basic-tap) * 0.5);
}

.basic .tool svg {
  display: block;
  width: 100%;
  height: 100%;
}

.basic .tool[disabled] {
  opacity: 0.4;
}

/* ---- the desk and the paper on it: the desk fills the page behind everything ---- */
.paper-area {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  pointer-events: none;
}

.paper-port {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.paper-port.is-panning {
  cursor: grab;
}

.paper-port[data-tool='text'] {
  cursor: text;
}

.sheet {
  position: absolute;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.sheet-inner {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.sheet canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.sheet .sheet-frame {
  width: auto;
  height: auto;
}

.paper-input {
  position: absolute;
  z-index: 2;
  min-width: 3em;
  margin: 0;
  padding: 0;
  border: 2px dashed rgba(91, 69, 53, 0.7);
  background: transparent;
  font-weight: 700;
  resize: none;
  overflow: hidden;
  white-space: pre;
  -webkit-user-select: text;
  user-select: text;
}

/* ---- bottom: four tools in the middle, the crayon pouch with its label ---- */
.bottom {
  flex: none;
}

.tools-line {
  position: relative;
  height: calc(var(--tap) + var(--row-h) * 0.15 + var(--u) * 2);
}

.tools {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding-top: calc(var(--u) * 1);
}

.tool-btn {
  position: relative;
  flex: none;
  width: var(--tool-tap);
  height: var(--tool-tap);
  margin: 0 var(--tool-m);
  padding: 0;
  background: none;
}

.float-panel {
  display: none;
}

.pouch {
  position: relative;
  margin: 0 calc(var(--u) * 2) calc(var(--u) * 1.5);
}

/* the fabric sheet grows upward out of the pouch, over everything, when pulled up */
.pouch-sheet {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
}

.pouch-skin-clip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: calc(var(--u) * 1.2);
  background-color: #a9643f;
  pointer-events: none;
}

.pouch-skin {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.pouch-skin,
.pouch-band {
  pointer-events: none;
}

/* the window onto what is in the pouch: it is as tall as the pouch is pulled out, so what lies below it (the second
   row, the button line) is neither seen nor tappable until the pouch is pulled up */
.pouch-view {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.pouch-body {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--row-h) * 0.2 + var(--u) * 1.5);
}

/* only the crayons and the button take the finger; the empty fabric lets touches through to the desk (only the label
   on the top edge and a drag that starts on a crayon pull the pouch), and the hidden second row never catches touches
   meant for the paper */
.pouch-body,
.pouch-row {
  pointer-events: none;
}

.crayon-btn,
.pouch-action {
  pointer-events: auto;
}

/* the label sewn onto the top edge of the pouch: flat, part of the fabric */
.pouch-tab {
  position: absolute;
  z-index: 6;
  right: calc(var(--u) * 1.5);
  width: var(--tap);
  height: calc(var(--tap) * 0.56);
  padding: 0;
  background: none;
}

.pouch-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc((var(--tap) * 0.56 - 44px) / 2);
  bottom: calc((var(--tap) * 0.56 - 44px) / 2);
}

.pouch-row {
  position: relative;
  display: flex;
  height: var(--row-h);
  padding: 0 calc(var(--u) * 1.5);
}

.crayon-btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: none;
}

.crayon-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.pouch-band {
  position: absolute;
  z-index: 2;
  left: calc(var(--u) * 1.2);
  bottom: calc(var(--u) * 1.5);
  width: calc(100% - var(--u) * 2.4);
  height: calc(var(--u) * 6);
  pointer-events: none;
}

.pouch-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--tap) + var(--u) * 2);
}

.pouch-bar .pouch-action {
  margin: 0;
}

.pouch-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--u) * 14);
  height: var(--tap);
  margin: 0 calc(var(--u) * 2);
  padding: 0 calc(var(--u) * 2);
  border-style: solid;
  border-width: calc(var(--u) * 1);
  border-image: var(--wax-dark) 28 fill round;
  background: var(--c-dark);
  background-clip: padding-box;
}

.pouch-action[disabled] {
  opacity: 0.45;
}

.pouch-renew {
  color: #fbf0e0;
  font-size: calc(var(--u) * 3.4);
  white-space: nowrap;
}


.pouch-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--row-h) * 0.2);
  display: none;
  padding: calc((var(--bag-h) - var(--tap) * 2) / 3) calc(var(--u) * 2.5) 0;
  color: #fbf0e0;
  pointer-events: none;
}

.pouch-panel .text-line:first-child {
  margin-bottom: calc((var(--bag-h) - var(--tap) * 2) / 3);
}

.pouch.is-panel .pouch-tab {
  display: none;
}

.pouch.is-panel .pouch-body {
  display: none;
}

.pouch.is-panel .pouch-panel {
  display: block;
}

/* ---- tool settings (inside the pouch, or the small window on wide screens) ---- */
.text-panel {
  width: 100%;
}

.text-line {
  display: flex;
  align-items: center;
  height: var(--tap);
  margin-bottom: calc(var(--u) * 1);
}

.text-line:last-child {
  margin-bottom: 0;
}

.text-group {
  display: flex;
  flex: none;
  margin-right: calc(var(--u) * 3);
}

.text-fonts {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: calc(var(--u) * 2);
}

/* many fonts: one line that slides sideways, never wrapping */
.text-fonts .text-group {
  flex-wrap: nowrap;
  width: -webkit-max-content;
  width: max-content;
  min-width: 100%;
  margin-right: 0;
}

.text-group .chip,
.text-group .chip-wrap {
  flex: none;
  margin: 0 calc(var(--u) * 1) 0 0;
}

.text-group .chip {
  padding: 0 calc(var(--u) * 1.8);
  font-size: calc(var(--u) * 3.4);
}

.text-group.text-size {
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}

.text-range {
  flex: 1 1 auto;
  width: calc(var(--u) * 38);
  min-width: 60px;
  height: 44px;
  margin: 0 calc(var(--u) * 2) 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.text-range::-webkit-slider-runnable-track {
  height: 14px;
  border: 0;
  background: var(--wax-groove) center / 100% 100% no-repeat;
}

.text-range::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  margin-top: -16px;
  border: 0;
  background: var(--wax-thumb) center / 100% 100% no-repeat;
  -webkit-appearance: none;
  appearance: none;
}

.text-range::-moz-range-track {
  height: 14px;
  border: 0;
  background: var(--wax-groove) center / 100% 100% no-repeat;
}

.text-range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: var(--wax-thumb) center / 100% 100% no-repeat;
}

.text-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--u) * 8);
  height: var(--tap);
  margin: 0 calc(var(--u) * 1) 0 0;
  color: #fbf0e0;
  font-size: calc(var(--u) * 4.2);
}

.chip-dot {
  display: inline-block;
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  border-radius: 50%;
}

.chip-wrap {
  display: inline-flex;
  align-items: center;
}

.chip-wrap .chip {
  margin: 0;
}

.chip-del {
  width: 44px;
  height: 44px;
  margin-left: calc(var(--u) * -1);
  background: none;
  color: #fbe6d2;
  font-size: calc(var(--u) * 4.4);
}

/* ---- paper picker contents ---- */
/* the portrait / landscape pair sits in the middle of the picker */
.paper-pop .paper-orient {
  justify-content: center;
  width: 100%;
  margin-right: 0;
  margin-bottom: calc(var(--u) * 1);
}

.paper-pop .paper-orient .chip {
  margin: 0 calc(var(--u) * 0.5);
}

.paper-grid {
  display: flex;
  flex-wrap: wrap;
  width: calc(var(--u) * 60);
  max-width: 100%;
  padding: calc(var(--u) * 1);
}

.paper-choice {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 22.7);
  min-width: 44px;
  min-height: 58px;
  margin: calc(var(--u) * 1.2);
  padding: 0;
  background: none;
  border: 2px solid #5b4535;
}

.paper-choice img {
  display: block;
  width: 100%;
  height: 100%;
}

.paper-choice.is-on {
  box-shadow: 0 0 0 3px #b5543a;
}

/* ---- dialogs, popovers, buttons and chips in crayon ---- */
.modal-overlay {
  background: rgba(59, 40, 30, 0.5);
}

.modal,
.popover {
  border-style: solid;
  border-width: calc(var(--u) * 2.6);
  border-image: var(--wax-panel) 46 round;
  border-radius: 0;
  background-color: var(--c-panel);
  background-image: var(--wax-hatch);
  background-clip: padding-box;
  color: var(--c-ink);
}

.popover {
  border-width: calc(var(--u) * 1.9);
}

.modal-title {
  color: var(--c-rust);
  font-weight: 900;
}

.modal-close {
  background: var(--c-panel);
  color: var(--c-rust);
  border-radius: 0;
}

.btn,
.chip {
  border-style: solid;
  border-width: calc(var(--u) * 1.1);
  border-image: var(--wax-chip) 28 round;
  border-radius: 0;
  background-color: var(--c-panel);
  background-clip: padding-box;
  color: var(--c-ink);
}

.btn-primary,
.chip.is-on {
  border-image: var(--wax-dark) 28 fill round;
  background-color: var(--c-dark);
  color: var(--on-dark);
}

.toast {
  border-style: solid;
  border-width: calc(var(--u) * 1);
  border-image: var(--wax-dark) 28 fill round;
  background: var(--c-dark);
  background-clip: padding-box;
  border-radius: 0;
}

/* ---- wide screens (computers, tablets and phones on their side): the desk goes right across and the paper lies in the
   middle of it; every control stands against an edge of the screen: the five buttons in a column on the left, the four
   tools and the pouch in the bottom right corner, the typing settings coming up above them ---- */
.stage.is-wide {
  display: grid;
  grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w);
  grid-template-rows: var(--top-h) minmax(0, 1fr);
}

.stage.is-wide .top {
  grid-column: 1 / 4;
  grid-row: 1;
}

.stage.is-wide .paper-area {
  grid-column: 2;
  grid-row: 2;
}

.stage.is-wide .basic {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  padding-left: calc(var(--u) * 2);
}

.stage.is-wide .basic .tool {
  margin: var(--basic-m) 0;
}

.stage.is-wide .bottom {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-direction: column;
  padding-right: calc(var(--u) * 2);
}

/* the typing settings come up out of the top of the tools line, over the desk; the tools and the pouch do not move */
.stage.is-wide:not(.is-tight) .float-panel {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin: 0 0 calc(var(--u) * 1);
  padding: calc(var(--u) * 2) calc(var(--u) * 2.5);
  color: #fbf0e0;
}

.float-skin {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.float-panel .text-panel {
  position: relative;
}

.stage.is-wide:not(.is-tight) .pouch-tab {
  display: none;
}

.stage.is-wide .pouch {
  margin: 0 0 calc(var(--u) * 2);
}

/* ---- placing an imported picture ---- */
.place-layer {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  touch-action: none;
  cursor: move;
}

.place-canvas {
  position: absolute;
  left: 0;
  top: 0;
}

.place-bar {
  position: absolute;
  top: calc(var(--top-h) + var(--tap) + var(--u) * 4);
  left: 50%;
  display: flex;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.place-btn {
  width: var(--tap);
  height: var(--tap);
  margin: 0 calc(var(--u) * 2);
  border-style: solid;
  border-width: calc(var(--u) * 1);
  border-image: var(--wax-dark) 28 fill round;
  background: var(--c-dark);
  background-clip: padding-box;
  color: var(--on-dark);
  font-size: calc(var(--tap) * 0.45);
  line-height: 1;
}

.toast {
  --toast-top: calc(var(--top-h) + var(--u) * 1);
}