/* 1999.LOC — the QR tool's face: a handheld label printer.
 *
 * The kind of chunky plastic label maker that lived in an office drawer: a
 * moulded body, a small green LCD you typed your label into, a row of rubbery
 * keys, and a slot along the bottom that a printed tape slid out of. That is
 * the shape here. You type into the screen, press the big key, and a QR label
 * prints onto the tape below it; the Read side turns the same machine around
 * and reads a label back.
 *
 * No CSS variables, no web fonts. The beige-and-teal plastic, the amber keys
 * and the dark-green LCD are all plain colours and bevels, scoped entirely
 * under [data-app="qr"].
 */

/* ---- the menu bar, pinned to the window --------------------------- */
[data-app="qr"] .app-window > .pt-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 2px 4px;
  background: #d7d2c4;
  border-bottom: 1px solid #9a9483;
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: #201d16;
}
[data-app="qr"] .app-window > .pt-menu .menu-title {
  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  min-height: 26px;
}

[data-app="qr"] .app-body {
  font-family: "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  font-size: 12px;
  color: #201d16;
  background: #b7bcc0;
}
/* The gutter. The shell sets `padding: 0` on an application's body, for the
   programs that lay themselves out in bands and bring their own spacing; this
   one is content, and with no gutter every line starts hard against the tube.
   A plain `[data-app] .app-body` loses to that shell rule, which carries an
   element plus two classes, which is why the padding this asked for never
   arrived. Naming the desk the window sits on wins on class count without
   reaching outside the app. */
[data-app="qr"] .desk-shell .app-window > .app-body { padding: 10px 14px; }

[data-app="qr"] .app-body h3 { font-size: 13px; color: #0a5c5c; margin: 10px 0 5px 0; }
[data-app="qr"] .app-body .note { color: #3a3a3a; }
[data-app="qr"] .app-body a { color: #0a5f7a; }

/* ---- the machine ------------------------------------------------- */
[data-app="qr"] .pt-machine {
  max-width: 460px;
  margin: 0 auto;
  padding: 14px 14px 18px;
  border-radius: 16px 16px 20px 20px;
  background: #e7e2d3;
  border: 1px solid #b3ac97;
  border-top-color: #f6f2e7;
  box-shadow: inset 0 2px 0 #fffefb, inset 0 -3px 8px rgba(90, 80, 55, 0.25), 0 3px 6px rgba(0, 0, 0, 0.28);
}

[data-app="qr"] .pt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
[data-app="qr"] .pt-brand {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 15px;
  color: #0e6b6b;
  text-shadow: 0 1px 0 #fbf8ef;
}
[data-app="qr"] .pt-lamp {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ff5a3c;
  box-shadow: 0 0 5px #ff5a3c, inset 0 1px 1px #ffd0c6;
}

/* ---- the LCD ----------------------------------------------------- */
[data-app="qr"] .pt-screen {
  background: #10160c;
  border: 2px solid #2c3722;
  border-radius: 5px;
  padding: 8px 10px;
  box-shadow: inset 0 0 0 2px #05330f, inset 0 2px 10px rgba(0, 0, 0, 0.7);
}
[data-app="qr"] .pt-scr-line:not(.hidden) { display: flex; align-items: flex-start; gap: 8px; }
[data-app="qr"] .pt-scr-label {
  font-family: "Courier New", Courier, monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #4f7a3a;
  padding-top: 4px;
  -webkit-user-select: none;
  user-select: none;
}
[data-app="qr"] #pt-text {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  border: none;
  outline: none;
  background: transparent;
  color: #a7e05f;
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
  line-height: 1.35;
  text-shadow: 0 0 4px rgba(120, 220, 90, 0.5);
}
[data-app="qr"] #pt-text::placeholder { color: #4c6d38; }
[data-app="qr"] .pt-decoded {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  color: #a7e05f;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
  text-shadow: 0 0 4px rgba(120, 220, 90, 0.5);
}

/* ---- the mode keys ----------------------------------------------- */
[data-app="qr"] .pt-mode {
  display: flex;
  gap: 8px;
  margin: 12px 0 6px;
}
[data-app="qr"] .pt-modebtn {
  flex: 1 1 0;
  padding: 8px 0;
  border-radius: 7px;
  border: 1px solid #b0a98f;
  border-top-color: #fffdf6;
  background: #efeadc;
  color: #40382a;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 2px 0 #b8b09733, inset 0 1px 0 #fffdf6;
}
[data-app="qr"] .pt-modebtn.is-on {
  background: #ffc63f;
  border-color: #d79f1e;
  border-top-color: #ffe9a6;
  color: #3a2a05;
  box-shadow: inset 0 2px 5px rgba(120, 80, 0, 0.35);
}

/* ---- the make panel ---------------------------------------------- */
[data-app="qr"] .pt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 2px;
}
[data-app="qr"] .pt-row-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5b5443;
  min-width: 66px;
}
[data-app="qr"] .pt-ec { display: flex; gap: 5px; }
[data-app="qr"] .pt-ecbtn {
  width: 30px; height: 28px;
  border-radius: 5px;
  border: 1px solid #b0a98f;
  border-top-color: #fffdf6;
  background: #efeadc;
  color: #40382a;
  font-weight: 700;
  font-family: "Courier New", Courier, monospace;
  cursor: pointer;
}
[data-app="qr"] .pt-ecbtn.is-on {
  background: #0e6b6b;
  border-color: #094b4b;
  color: #eafcfc;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

[data-app="qr"] .pt-print {
  display: block;
  width: 100%;
  margin: 6px 0 2px;
  padding: 13px 0;
  border-radius: 9px;
  border: 1px solid #b8480f;
  border-top-color: #ff9163;
  background: #e8621f;
  color: #fff7f2;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 3px 0 #a53f10, inset 0 1px 0 #ffb08c;
}
[data-app="qr"] .pt-print:active { transform: translateY(2px); box-shadow: 0 1px 0 #a53f10, inset 0 2px 6px rgba(90, 30, 0, 0.4); }

/* ---- the printed tape -------------------------------------------- */
[data-app="qr"] .pt-tape {
  margin: 14px 0 8px;
  padding: 10px;
  background:
    repeating-linear-gradient(90deg, #cfd3d6 0, #cfd3d6 2px, #c2c7ca 2px, #c2c7ca 6px);
  border-radius: 4px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}
[data-app="qr"] .pt-tape-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #d8d8d8;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
[data-app="qr"] .pt-qr { flex: 0 0 auto; line-height: 0; }
[data-app="qr"] .pt-qr svg { display: block; width: 140px; height: 140px; }
[data-app="qr"] .pt-caption {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  color: #111;
  word-break: break-word;
  white-space: pre-wrap;
  max-height: 140px;
  overflow: auto;
}

[data-app="qr"] .pt-saverow:not(.hidden) {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
[data-app="qr"] .pt-saverow button,
[data-app="qr"] .pt-readbtns button {
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid #9aa0a4;
  border-top-color: #ffffff;
  background: #eef1f2;
  color: #23282b;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff;
}
[data-app="qr"] .pt-saverow button:active,
[data-app="qr"] .pt-readbtns button:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25); }
[data-app="qr"] .pt-meta { font-size: 11px; color: #5b5443; }

/* ---- the read panel ---------------------------------------------- */
[data-app="qr"] .pt-readbtns { justify-content: flex-start; }
[data-app="qr"] .pt-drop {
  margin: 6px 0;
  padding: 14px;
  min-height: 120px;
  background: #f4f2ea;
  border: 2px dashed #9aa0a4;
  border-radius: 8px;
  text-align: center;
  color: #5b5443;
}
[data-app="qr"] .pt-drop.is-over { border-color: #0e6b6b; background: #e6f3f3; }
[data-app="qr"] .pt-drop-hint { margin: 6px 0; }

[data-app="qr"] .pt-cam-wrap:not(.hidden) {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}
[data-app="qr"] #pt-video {
  max-width: 100%;
  max-height: 320px;
  border-radius: 6px;
  background: #000;
}
[data-app="qr"] .pt-reticle {
  position: absolute;
  top: 12%; left: 12%; right: 12%; bottom: 12%;
  border: 2px solid rgba(167, 224, 95, 0.9);
  border-radius: 8px;
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
[data-app="qr"] .pt-cam-stop {
  position: absolute;
  top: 8px; right: 8px;
  padding: 5px 12px;
  border: 1px solid #b8480f;
  border-radius: 6px;
  background: #e8621f;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}
[data-app="qr"] .pt-preview:not(.hidden) {
  display: block;
  max-width: 100%;
  max-height: 320px;
  margin: 0 auto;
  border-radius: 6px;
}

[data-app="qr"] .pt-result {
  margin-top: 10px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #c9cccf;
  border-radius: 6px;
}
[data-app="qr"] .pt-result-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #0e6b6b;
  margin-bottom: 4px;
}
[data-app="qr"] .pt-result-text {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  color: #111;
  word-break: break-word;
  white-space: pre-wrap;
}
[data-app="qr"] .pt-result-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
[data-app="qr"] .pt-result-actions button,
[data-app="qr"] .pt-openlink:not(.hidden) {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #9aa0a4;
  border-top-color: #ffffff;
  background: #eef1f2;
  color: #23282b;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
[data-app="qr"] .pt-openlink:not(.hidden) { background: #0e6b6b; color: #eafcfc; border-color: #094b4b; }

[data-app="qr"] .error { color: #a01010; margin: 8px 2px 0; }

/* ---- responsive --------------------------------------------------- */
@media (max-width: 700px) {
  [data-app="qr"] .app-window > .pt-menu span { padding: 2px 5px; }
  [data-app="qr"] .pt-machine { max-width: none; }
  [data-app="qr"] .pt-tape-inner { flex-direction: column; align-items: flex-start; }
  [data-app="qr"] .pt-qr svg { width: 120px; height: 120px; }
  [data-app="qr"] .pt-caption { max-height: none; }
}