/*
 * QR Studio — layout that the shared media-tools kit does not cover:
 * the three-column create bench, the code stage, the camera viewfinder,
 * and the scan/history lists. Everything is prefixed .qr- so it cannot
 * leak into another tool that happens to reuse the same shared classes.
 */

.qr-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.qr-modes {
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  flex: 0 0 auto;
}

.qr-panel { padding: 18px; }
.qr-panel + .qr-panel { margin-top: 18px; }

.qr-create {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 1fr) minmax(268px, .78fr);
  gap: 18px;
  align-items: start;
}

.qr-column {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--media-line);
  border-radius: 17px;
  background: rgba(255, 253, 248, .72);
}

.qr-preview-column { background: rgba(248, 245, 238, .8); }

.qr-column-title {
  margin: 0 0 14px;
  font-size: .95rem;
  letter-spacing: -.025em;
}

/* Nine content types will not fit a fixed grid, so this segmented row wraps. */
.qr-types {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.qr-types button { flex: 1 0 auto; padding: 0 12px; }

.qr-ec { grid-template-columns: repeat(4, 1fr); }
.qr-ec button[disabled] { opacity: .35; cursor: not-allowed; }

.qr-textarea {
  min-height: 92px;
  padding: 11px 12px;
  line-height: 1.5;
  resize: vertical;
  font-family: inherit;
}

.qr-inline { display: flex; gap: 8px; }
.qr-inline .media-input { flex: 1 1 auto; min-width: 0; }
.qr-inline .btn { flex: 0 0 auto; }

/* Mirrors .field label for headings that sit above a wrapping <label>, where a
 * second <label for> would append itself to the control's accessible name. */
.qr-create .field-title {
  display: block;
  margin-bottom: 7px;
  color: #625f58;
  font-size: .66rem;
  font-weight: 700;
}

.qr-check-box {
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid var(--media-line);
  border-radius: 10px;
  background: #fffdf8;
}

.qr-fields > .settings-grid + .control-help { margin-top: 12px; }

.qr-payload {
  margin-top: 18px;
  padding: 11px 13px;
  border: 1px solid var(--media-line);
  border-radius: 12px;
  background: rgba(248, 245, 238, .7);
}

.qr-payload summary {
  cursor: pointer;
  color: #56534d;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.qr-payload-text {
  max-height: 168px;
  margin: 11px 0 0;
  overflow: auto;
  color: #4c4a44;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .66rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.qr-capacity { margin-top: 16px; }
.qr-capacity-label { margin: 0; }
.qr-capacity.is-full .progress-bar { background: #cb4d3c; }
.qr-capacity.is-tight .progress-bar { background: #c98a1e; }

/* Stage — the code sits on its own background color, so the frame stays neutral. */
.qr-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 18px;
  border: 1px solid var(--media-line);
  border-radius: 17px;
  background:
    linear-gradient(45deg, #ece7de 25%, transparent 25%) 0 0/18px 18px,
    linear-gradient(-45deg, #ece7de 25%, transparent 25%) 0 9px/18px 18px,
    linear-gradient(45deg, transparent 75%, #ece7de 75%) 9px -9px/18px 18px,
    linear-gradient(-45deg, transparent 75%, #ece7de 75%) -9px 0/18px 18px,
    #fffdf8;
}

.qr-stage canvas {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 420px;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(48, 42, 31, .12);
  image-rendering: pixelated;
}

.qr-stage.is-empty canvas { display: none; }

.qr-stage-empty {
  max-width: 260px;
  color: var(--media-muted);
  font-size: .78rem;
  line-height: 1.55;
  text-align: center;
}

.qr-stage:not(.is-empty) .qr-stage-empty { display: none; }
.qr-stage-empty p { margin: 0; }

.qr-verify { margin-top: 14px; }

.qr-note {
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid #e8d9a8;
  border-radius: 11px;
  color: #6d5613;
  background: #fbf4de;
  font-size: .68rem;
  line-height: 1.5;
}

.qr-note.is-bad { border-color: #eec3ba; color: #7d2b1d; background: #fbe8e3; }
.qr-note.is-good { border-color: #bfe0cb; color: #1f5e3c; background: #e6f4eb; }
.qr-note p { margin: 0; }
.qr-note p + p { margin-top: 5px; }

.qr-export-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.qr-export-grid .btn { padding: 0 8px; font-size: .68rem; }

.qr-logo-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: start; }

.qr-logo-preview {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--media-line);
  border-radius: 12px;
  background: #fffdf8;
}

.qr-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.qr-logo-preview.has-image { border-style: solid; }

/* Batch */
.qr-batch {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--media-line);
  border-radius: 17px;
  background: rgba(255, 253, 248, .72);
}

.qr-batch .results-head h2 { margin: 0; font-size: .95rem; }
.qr-batch-help { margin: 0 0 14px; }

.qr-batch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, .7fr);
  gap: 18px;
  align-items: start;
}

.qr-batch-input { min-height: 150px; font-family: "DM Mono", ui-monospace, monospace; font-size: .7rem; }

.qr-batch-drop {
  min-height: 0;
  margin-top: 10px;
  padding: 14px;
  border-radius: 12px;
}

.qr-batch-drop .dropzone-inner p,
.qr-scan-drop .dropzone-inner p { margin: 0; }

.qr-linkbutton {
  padding: 0;
  border: 0;
  background: none;
  color: var(--media-accent-dark);
  cursor: pointer;
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* Scan */
.qr-scan {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 18px;
  align-items: start;
}

.qr-camera {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--media-line);
  border-radius: 17px;
  background: #211f1c;
}

.qr-camera video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-camera-idle {
  position: relative;
  z-index: 2;
  max-width: 300px;
  padding: 20px;
  color: #cfc9bd;
  font-size: .78rem;
  line-height: 1.55;
  text-align: center;
}

.qr-camera-idle .drop-icon {
  border-color: rgba(255, 255, 255, .16);
  color: #f4f0e8;
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}

.qr-camera-idle p { margin: 0; }
.qr-camera.is-live .qr-camera-idle { display: none; }

.qr-reticle {
  position: absolute;
  z-index: 3;
  width: min(62%, 260px);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.qr-camera.is-live .qr-reticle { opacity: 1; }

.qr-reticle span {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, .92);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4));
}

.qr-reticle span:nth-child(1) { top: 0; left: 0; border-width: 3px 0 0 3px; border-radius: 12px 0 0 0; }
.qr-reticle span:nth-child(2) { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 12px 0 0; }
.qr-reticle span:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-radius: 0 0 0 12px; }
.qr-reticle span:nth-child(4) { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 12px 0; }

.qr-camera.is-hit .qr-reticle span { border-color: #6ee7a8; }

.qr-camera-bar { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.qr-camera-bar .btn { flex: 1 1 auto; }
.qr-camera-bar button[aria-pressed="true"] { border-color: var(--media-accent); color: var(--media-accent-dark); }

.qr-scan-drop { min-height: 0; padding: 16px; border-radius: 12px; }
.qr-scan-help { margin: 0 0 12px; }

.qr-results, .qr-history { display: grid; gap: 9px; }

.qr-results:empty::after,
.qr-history:empty::after {
  display: block;
  padding: 30px 12px;
  border: 1px dashed var(--media-line);
  border-radius: 12px;
  color: #89847a;
  font-size: .72rem;
  text-align: center;
}

.qr-results:empty::after { content: "Decoded codes land here"; }
.qr-history:empty::after { content: "Nothing stored in this browser yet"; }

.qr-entry {
  padding: 12px;
  border: 1px solid var(--media-line);
  border-radius: 12px;
  background: #fffdf8;
}

.qr-entry-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.qr-tag {
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--media-accent-dark);
  background: var(--media-soft);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.qr-tag.is-scan { color: #2b5d43; background: #e2f0e7; }
.qr-time { margin-left: auto; color: #8f8a80; font-size: .6rem; }

.qr-entry-text {
  margin: 0;
  max-height: 96px;
  overflow: auto;
  color: #34322e;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .66rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.qr-entry-detail { margin: 6px 0 0; color: #77736a; font-size: .64rem; line-height: 1.45; }

.qr-entry-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qr-entry-actions .btn { min-height: 32px; padding: 0 10px; font-size: .64rem; }

.qr-warn {
  margin: 8px 0 0;
  padding: 8px 9px;
  border-radius: 8px;
  color: #7d2b1d;
  background: #fbe8e3;
  font-size: .63rem;
  line-height: 1.45;
}

.qr-history-panel { padding: 20px; }
.qr-history-panel .results-head h2 { margin: 0; font-size: .95rem; }
.qr-history-help { margin: 0 0 14px; }

/* Confirmation modal — this tool never uses window.confirm(). */
.qr-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(30, 27, 22, .45);
  backdrop-filter: blur(6px);
}

.qr-modal-card {
  width: min(380px, 100%);
  padding: 22px;
  border: 1px solid var(--media-line);
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 26px 60px rgba(40, 34, 24, .28);
}

.qr-modal-card h3 { margin: 0 0 8px; font-size: 1rem; letter-spacing: -.02em; }
.qr-modal-card p { margin: 0; color: var(--media-muted); font-size: .76rem; line-height: 1.55; }
.qr-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

@media (max-width: 1180px) {
  .qr-create { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qr-preview-column { grid-row: span 2; }
}

@media (max-width: 900px) {
  .qr-create,
  .qr-scan,
  .qr-batch-grid { grid-template-columns: minmax(0, 1fr); }
  .qr-preview-column { grid-row: auto; }
  .qr-hero { align-items: flex-start; flex-direction: column; }
  .qr-modes { width: 100%; }
}

/* The label wraps its checkbox, so the whole row already toggles it; on a
   touch screen the row is made finger-tall and the box itself bigger. Inside a
   .field the shared `.field label` rule makes it a block, so flex centring is
   restated here. */
@media (pointer: coarse) {
  .qr-create .inline-check { display: flex; align-items: center; min-height: 44px; }
  .qr-create .inline-check input { width: 20px; height: 20px; margin: 0; }
}

@media (max-width: 540px) {
  .qr-panel { padding: 10px; }
  .qr-column, .qr-batch { padding: 15px; }
  .qr-export-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qr-logo-row { grid-template-columns: 1fr; }
  .qr-stage { min-height: 220px; padding: 12px; }
}