/* qr-code only: the form beside a sticky preview of the code. */
.qc-cols { display: grid; gap: var(--matrix-space-16); }
.qc-form { display: grid; gap: var(--matrix-space-16); min-width: 0; }
.qc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: var(--matrix-space-12); align-items: start; }
.qc-stack { display: grid; gap: var(--matrix-space-12); min-width: 0; }
.qc-field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.qc-field > label { font-weight: 600; }
.qc-field input:not([type="color"]):not([type="range"]), .qc-field select, .qc-field textarea { width: 100%; box-sizing: border-box; min-width: 0; }
.matrix-ui .qc-field textarea { resize: vertical; font-family: inherit; line-height: 1.45; }
.qc-colour { width: 4.5em; height: 2.5em; padding: 2px; border: 1px solid var(--matrix-control-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); cursor: pointer; }
.qc-range { width: 100%; accent-color: var(--matrix-brand); }
.matrix-ui .qc-field > .qc-num { max-width: 10em; }
.qc-hint { margin: 0; font-size: var(--matrix-type-caption); overflow-wrap: break-word; }
.qc-check label { flex: 1 1 12em; min-width: 0; }
.qc-bar { display: flex; flex-wrap: wrap; gap: var(--matrix-space-8) var(--matrix-space-12); align-items: center; }
.qc-open-label { display: inline-flex; align-items: center; min-height: var(--matrix-control-min-height); box-sizing: border-box; cursor: pointer; }
#qc-logo-file.visually-hidden { width: 1px; } /* tools.css widens every file input in the options to 100% */
#qc-logo-file:focus-visible + .qc-open-label { outline: 2px solid var(--matrix-focus); outline-offset: 2px; }
.qc-small { padding: 4px 12px; min-height: 32px; font-size: var(--matrix-type-caption); }
.qc-utm { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: var(--matrix-space-8) var(--matrix-space-12); display: grid; gap: var(--matrix-space-8); }
.qc-utm > summary { font-weight: 600; cursor: pointer; }
.qc-utm[open] > summary { margin-bottom: var(--matrix-space-8); }
.qc-jump { justify-self: start; font-size: var(--matrix-type-caption); }
.qc-aside { display: grid; gap: var(--matrix-space-12); padding: var(--matrix-space-12); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-panel); background: var(--matrix-surface-subtle); min-width: 0; align-content: start; }
.qc-title { margin: 0; font-size: 1rem; }
.qc-title:focus { outline: none; }
.qc-subtitle { margin: 0 0 4px; font-size: 0.9375rem; }
.qc-canvas-box { display: grid; place-items: center; min-height: 120px; padding: var(--matrix-space-12); border-radius: var(--matrix-radius-control); background: repeating-conic-gradient(#e5e5ea 0% 25%, #ffffff 0% 50%) 50% / 16px 16px; }
.qc-canvas { display: block; width: min(100%, 280px); height: auto; image-rendering: pixelated; }
.qc-facts { margin: 0; font-size: var(--matrix-type-caption); overflow-wrap: break-word; }
.qc-checks { border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); padding: var(--matrix-space-8) var(--matrix-space-12); background: var(--matrix-surface); }
.qc-list { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: var(--matrix-type-caption); overflow-wrap: anywhere; }
.qc-list:empty { display: none; }
.qc-holds { margin: 0; font-family: var(--matrix-font-mono); font-size: var(--matrix-type-caption); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 10em; overflow: auto; padding: var(--matrix-space-8); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); border: 1px solid var(--matrix-border); }
@media (min-width: 900px) {
  .qc-jump { display: none; }
  .qc-cols { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .qc-aside { position: sticky; top: var(--matrix-space-12); max-height: calc(100vh - 24px); overflow: auto; }
}
/* what adding a logo changed in Error correction, said beside the field until a level is chosen again (qr-code.js sayLevelChange) */
.qc-level-note { border-left: 3px solid var(--matrix-brand); padding-left: var(--matrix-space-8); }