/* The label maker tags: a strip of kraft cardboard (the box the labels go on) with glossy embossed labels stuck on
   it, and under it an old label maker in graphite plastic and chrome, the tape coming out of its snout onto a pale
   groove. On a white page. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #1e1b18;           /* the words */
  --muted: #8a837a;         /* the hint, the words on the groove */
  --bad: #be3220;           /* the hint when something can't be done */
  --kraft: #c7a172;         /* the cardboard of the box */
  --kraft-deep: #a37b4e;    /* the cardboard at its edges */
  --track: #f3f1ed;         /* the groove the tape slides out on */
  --red: #cf2132;           /* the red tape */
  --blue: #1f50b2;          /* the blue tape */
  --black: #1d1d21;         /* the black tape */
  --body: #2a2b30;          /* the machine's plastic */
  --body-hi: #4a4c53;       /* its top, in the light */
  --body-deep: #121316;     /* its bottom, in the shade */
  --pointer: #d6242f;       /* the pointer and the cutter lever */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* in a real page the tags sit wherever the form needs them; here they are in the middle */
.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

.maker {
  position: relative;
  width: min(520px, 100%);
}

.maker__ask {
  margin: 0 0 10px 2px;
  font-size: 17px;
  font-weight: 700;
  font-stretch: 112%;
  line-height: 22px;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------- the box */
.board {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 14px 14px;
  min-height: 60px;
  margin: 0;
  padding: 17px 18px;
  list-style: none;
  border-radius: 14px;
  background-color: var(--kraft);
  /* the fibres of the cardboard, and its edges a little darker */
  background-image:
    radial-gradient(120% 140% at 50% 0%, rgba(255, 240, 215, 0.22), rgba(255, 240, 215, 0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.018 0.03' numOctaves='4' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.22 0 0 0 0 0.08 1.3 0 0 0 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.18 0 0 0 0 0.06 1.6 0 0 0 -0.82'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08 0.5' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.94 0 0 0 0 0.84 1.4 0 0 0 -0.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E");
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 228, 0.45),
    inset 0 0 0 1px rgba(110, 76, 38, 0.18),
    inset 0 -10px 18px -10px var(--kraft-deep),
    0 1px 2px rgba(60, 40, 20, 0.16),
    0 10px 24px -14px rgba(60, 40, 20, 0.45);
}

/* ---------------------------------------------------------------- a label on the box */
.label {
  position: relative;
  flex: none;
  height: 26px;
}

.label__btn {
  position: absolute;
  inset: -4px 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

.label.is-armed .label__btn {
  outline: 2px dashed var(--ink);
  outline-offset: 3px;
}

.label__art {
  position: absolute;
  left: -16px;
  top: -12px;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the machine and its groove */
.bench {
  position: relative;
  height: 124px;
  /* room for a label to fly between the box and the machine */
  margin-top: 46px;
  cursor: text;
  -webkit-tap-highlight-color: transparent;
}

.bench__track {
  position: absolute;
  border-radius: 9px;
  background: var(--track);
  box-shadow: inset 0 1px 2px rgba(40, 30, 20, 0.08);
  transition: box-shadow 0.25s ease;
}

.bench.is-on .bench__track {
  box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(30, 27, 24, 0.07);
}

/* a ruler along the groove, one mark for every letter, the longest label long */
.bench__ruler {
  position: absolute;
  right: 0;
  bottom: 3px;
  height: 4px;
  background-image: repeating-linear-gradient(270deg, rgba(40, 30, 20, 0.2) 0 1px, transparent 1px var(--pitch, 12px));
  background-position: right 0 top 0;
}

.bench__ghost {
  position: absolute;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* it comes back only once the label just cut has flown away */
.bench__ghost.is-shown {
  opacity: 1;
  transition: opacity 0.4s ease 0.9s;
}

.bench__caret {
  position: absolute;
  width: 2px;
  height: 18px;
  border-radius: 1px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
}

.bench.is-on .bench__caret.is-shown {
  opacity: 1;
}

.bench__tape {
  position: absolute;
  left: 0;
  pointer-events: none;
}

.machine {
  position: absolute;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.bench__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  cursor: text;
}

.bench__cut {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

/* the drawing of the machine */
.st-body-hi { stop-color: var(--body-hi); }
.st-body { stop-color: var(--body); }
.st-body-deep { stop-color: var(--body-deep); }
.st-red-hi { stop-color: #ff6b62; }
.st-red { stop-color: var(--pointer); }
.st-red-deep { stop-color: #7d0c14; }

.mk-shadow { fill: rgba(20, 16, 12, 0.34); }
.mk-snout { fill: var(--body); }
.mk-snout-rim { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.mk-jaw { fill: url(#mk-chrome-v); }
.mk-slot { fill: #050506; }
.mk-arm { fill: url(#mk-chrome-v); stroke: rgba(0, 0, 0, 0.28); stroke-width: 0.5; }
.mk-paddle-shine { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; stroke-linecap: round; }
.mk-pin { fill: url(#mk-chrome); stroke: rgba(0, 0, 0, 0.35); stroke-width: 0.5; }
.mk-body { fill: url(#mk-body); }
.mk-body-rim { fill: url(#mk-rim); stroke: rgba(255, 255, 255, 0.2); stroke-width: 0.8; }
.mk-body-edge { fill: none; stroke: rgba(0, 0, 0, 0.55); stroke-width: 1.2; }
.mk-ribs path { fill: none; stroke: rgba(0, 0, 0, 0.55); stroke-width: 1.6; stroke-linecap: round; }
.mk-ribs path + path { stroke: rgba(0, 0, 0, 0.5); }
.mk-recess { fill: #08080a; }
.mk-coil { stroke: none; }
.mk-wrap { fill: none; stroke: rgba(0, 0, 0, 0.2); stroke-width: 0.6; }
.mk-hub { fill: #ece6da; }
.mk-spoke { fill: none; stroke: #b9b1a2; stroke-width: 1.4; stroke-linecap: round; }
.mk-hole { fill: #1a1a1d; }
.mk-bezel { fill: none; stroke: url(#mk-chrome); stroke-width: 2.4; }
.mk-ring-shadow { fill: rgba(0, 0, 0, 0.55); }
.mk-knurl line { stroke: rgba(30, 32, 36, 0.42); stroke-width: 0.8; }
.mk-groove { fill: none; stroke: rgba(0, 0, 0, 0.75); stroke-width: 1.2; }
.mk-groove-hi { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.8; }
.mk-knob-shadow { fill: rgba(0, 0, 0, 0.6); }
.mk-knob-line { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.5; }
.mk-knob-line--dark { stroke: rgba(40, 44, 50, 0.28); }
.mk-knob-shine { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.6; stroke-linecap: round; }
.mk-pointer-base { fill: url(#mk-chrome-v); }

/* the letters on the wheel */
.mk-letter {
  fill: #b9b4aa;
  font-family: 'Archivo Variable', 'Arial Narrow', sans-serif;
  font-size: 8.4px;
  font-weight: 800;
  font-stretch: 75%;
  text-anchor: middle;
}

.mk-letter.is-on {
  fill: #ffffff;
}

.mk-space {
  stroke: #b9b4aa;
  stroke-width: 1.2;
  stroke-linecap: round;
}

/* ---------------------------------------------------------------- under the machine */
.maker__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-top: 12px;
}

.maker__hint {
  flex: 1 1 220px;
  min-height: 20px;
  margin: 0 0 0 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  transition: color 0.25s ease;
}

.maker__hint.is-bad {
  color: var(--bad);
}

/* the three tapes to choose from: little stubs of tape, the one in the machine pulled out */
.tapes {
  display: flex;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tapes__name {
  margin-right: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.pick {
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* a finger gets more than the stub */
.pick::after {
  content: '';
  position: absolute;
  inset: -10px -3px;
}

.pick input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pick__tape {
  display: block;
  height: 22px;
  padding: 0 8px 0 9px;
  border-radius: 1.5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 32%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.16)),
    var(--t);
  color: rgba(250, 248, 244, 0.92);
  font-size: 12px;
  font-weight: 800;
  font-stretch: 75%;
  line-height: 22px;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0.6px rgba(0, 0, 0, 0.5), 0 -0.5px 0 rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 1.5px rgba(30, 20, 10, 0.28);
  opacity: 0.72;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, opacity 0.25s ease;
}

.pick input:checked + .pick__tape {
  opacity: 1;
  transform: translateY(-3px) rotate(-3deg);
  box-shadow: 0 6px 9px -3px rgba(30, 20, 10, 0.38);
}

.pick input:focus-visible + .pick__tape {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (hover: hover) {
  .pick:hover input:not(:checked) + .pick__tape {
    opacity: 1;
    transform: translateY(-1.5px);
  }
}

/* ---------------------------------------------------------------- the crumpled labels, over everything */
.wads {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  pointer-events: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* on a phone the box is two rows high, so a fourth label does not push the machine down */
@media (max-width: 480px) {
  .board {
    min-height: 100px;
    padding: 17px 14px;
    gap: 14px 12px;
  }
}