/* Quima QR Code Studio. Uses the site.css tokens, panels and buttons shared by the other tools.
   Mobile contract: fields >= 16px, targets >= 44px, no sideways scroll at 320px, no fixed bars. */
.qs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.qs-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.qr-studio { display: grid; gap: 20px; min-width: 0; padding-bottom: 2rem; }
.qr-studio h2 { margin-top: 0; }
.qr-studio h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.qs-status { margin: 0; min-height: 1.6em; overflow-wrap: anywhere; }
.qs-notes-block { color: var(--muted); font-size: .92rem; }
.qs-notes-block p { margin: .25rem 0; }

/* Tabs */
.qs-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); gap: 6px; }
.qs-tab { min-height: 48px; padding: 8px 10px; font: inherit; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; touch-action: manipulation; overflow-wrap: anywhere; }
.qs-tab[aria-selected=true] { color: #fff; background: var(--brand); border-color: var(--brand); }
.qs-tab:focus-visible, .qs-type:focus-visible, .qs-step:focus-visible, .qs-swatch:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Steps (phone) */
.qs-bar { display: grid; gap: 10px; }
.qs-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; }
.qs-step { width: 100%; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; font: inherit; font-size: .78rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere; }
.qs-step span { font-weight: 700; font-size: .95rem; }
.qs-step[aria-current=step] { color: var(--brand-strong); background: var(--brand-soft); border: 2px solid var(--brand); }
.qs-stepnav { display: flex; justify-content: space-between; gap: 10px; }

/* Layout */
.qs-grid { display: grid; gap: 16px; align-items: start; min-width: 0; }
.qs-col { display: grid; gap: 16px; min-width: 0; align-content: start; }
.qs-col > .panel { min-width: 0; }
@media (max-width: 1023px) {
    .qs-studio [data-show] { display: none; }
    .qs-studio[data-step="1"] [data-show~="1"], .qs-studio[data-step="2"] [data-show~="2"], .qs-studio[data-step="3"] [data-show~="3"],
    .qs-studio[data-step="4"] [data-show~="4"], .qs-studio[data-step="5"] [data-show~="5"] { display: block; }
}
@media (min-width: 1024px) {
    .qs-steps, .qs-stepnav { display: none; }
    .qs-bar { justify-content: end; justify-items: end; }
    .qs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); }
    .qs-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    /* The type cards form a full-width strip; the form, preview and style columns share the row below it. */
    .qs-studio > .qs-grid > .qs-col-data { display: contents; }
    .qs-types-panel { grid-column: 1 / -1; }
    .qs-types-panel .qs-types { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
    .qs-preview-panel { position: sticky; top: 76px; }
}

/* Types */
.qs-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); gap: 8px; }
.qs-type { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 8px 6px; font: inherit; font-size: .9rem; font-weight: 600; text-align: center; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; touch-action: manipulation; overflow-wrap: anywhere; }
.qs-type[aria-pressed=true] { border: 2px solid var(--brand); background: var(--brand-soft); color: var(--brand-strong); }
.qs-icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Fields (the shared .field and input styles come from site.css; these cover what it lacks) */
.qs-form { display: grid; gap: 0; }
.qr-studio input:not([type=checkbox]):not([type=color]):not([type=file]):not([type=range]), .qr-studio select, .qr-studio textarea { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; font-size: 1rem; }
.qr-studio textarea { resize: vertical; }
.qr-studio input[type=checkbox] { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--brand); }
.qr-studio input[type=range] { width: 100%; min-height: 44px; accent-color: var(--brand); }
.qs-check, .qs-checks label { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.qs-check label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.qs-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 16px; }
.qs-color { width: 72px; height: 44px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.qr-studio input[type=color] { min-height: 44px; }
.qr-studio [aria-invalid=true] { border-color: var(--err) !important; box-shadow: 0 0 0 2px var(--err-soft); }
.qr-studio input:focus-visible, .qr-studio select:focus-visible, .qr-studio textarea:focus-visible, .qr-studio summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.qs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0 16px; }
.qs-narrow { max-width: 5.5rem; }
.qs-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.qs-swatch { width: 52px; min-height: 44px; font: inherit; font-weight: 700; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
.qs-file { cursor: pointer; }
.is-warn { color: var(--warn); }
.qs-bad { color: var(--err); font-weight: 600; }
.qr-studio .btn-small { min-height: 44px; }

/* Groups */
.qs-group { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-block: 10px; background: var(--surface); }
.qs-group > summary { min-height: 48px; display: flex; align-items: center; padding: 10px 14px; font-weight: 700; cursor: pointer; list-style-position: inside; }
.qs-group[open] > summary { border-bottom: 1px solid var(--line); }
.qs-group-body { padding: 10px 14px 12px; min-width: 0; }

/* Preview */
.qs-preview { display: grid; place-items: center; min-height: 220px; padding: 12px; background: repeating-conic-gradient(#f1f3f7 0% 25%, #fff 0% 50%) 50% / 20px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.qs-svg { display: block; width: 100%; max-width: 420px; height: auto; background: #fff; }
.qs-placeholder { margin: 0; color: var(--muted); text-align: center; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-sm); }
.qs-info { margin: 8px 0; font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; }
.qs-badge { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; padding: 6px 14px; border-radius: 999px; font-weight: 700; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); }
.qs-badge.is-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.qs-badge.is-ok::before { content: "✓"; }
.qs-badge.is-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.qs-badge.is-warn::before { content: "!"; }
.qs-badge.is-fail { background: var(--err-soft); color: var(--err); border-color: var(--err); }
.qs-badge.is-fail::before { content: "✕"; }
.qs-issues, .qs-notes { margin: 8px 0; padding-left: 1.1rem; font-size: .92rem; }
.qs-issues li, .qs-notes li { margin-block: 4px; overflow-wrap: anywhere; }
.qs-issues li.is-fail { color: var(--err); font-weight: 600; }
.qs-issues li.is-warn, .qs-notes li.is-warn { color: var(--warn); }
.qs-issues li.is-ok { color: var(--ok); font-weight: 600; }
.qs-issues li.is-info, .qs-notes li.is-info { color: var(--muted); }
.qs-encoded { margin-top: 10px; }
.qs-encoded > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.qs-pre { margin: 6px 0; padding: 10px; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: .85rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.qs-dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px 12px; margin: 8px 0; }
.qs-dl dt { font-weight: 600; }
.qs-dl dd { margin: 0; overflow-wrap: anywhere; }
.qs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 10px; }
.qs-quick .qs-pro-only { display: none; }

/* Batch */
.qs-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border: 2px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); }
.qs-drop p { flex-basis: 100%; margin: 0; }
.qs-drop.is-over { border-color: var(--brand); background: var(--brand-soft); }
.qs-mapping { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 16px; }
.qs-split { display: grid; gap: 16px; }
@media (min-width: 1024px) { .qs-split { grid-template-columns: minmax(0, 1fr) 260px; } }
.qs-table-wrap { min-width: 0; overflow-x: auto; }
.qs-table { width: 100%; font-size: .9rem; }
.qs-table td input[type=text] { min-width: 180px; }
.qs-table td, .qs-table th { vertical-align: middle; }
.qs-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.qs-sample { min-width: 0; }
.qs-summary { font-weight: 600; }
.qs-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--bg); border: 1px solid var(--line-strong); overflow-wrap: anywhere; }
.qs-chip.is-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.qs-chip.is-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.qs-chip.is-fail, .qs-chip.is-error { background: var(--err-soft); color: var(--err); border-color: var(--err); }
.qs-table tr.is-error td { background: #fff8f7; }
.qs-table tr.is-excluded td { opacity: .55; }
.qs-progress { margin: 10px 0; }
.qs-progress progress { width: 100%; height: 14px; }

/* Sheets and labels */
.qs-queue { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.qs-queue-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.qs-queue-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, auto); gap: 6px; min-width: 0; }
@media (max-width: 520px) { .qs-queue-item { grid-template-columns: minmax(0, 1fr); } .qs-queue-fields { grid-template-columns: minmax(0, 1fr); } .qs-narrow { max-width: none; } }
.qs-sheet { max-width: 560px; }
.qs-sheet-svg { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line-strong); box-shadow: var(--shadow); }

/* Scanner */
.qs-video { display: block; width: 100%; max-width: 480px; margin-top: 12px; border-radius: var(--radius-sm); background: #000; }
.qs-result { margin-top: 14px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.qs-result:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* Library */
.qs-cards { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.qs-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.qs-card-body { display: grid; gap: 2px; align-content: start; min-width: 0; overflow-wrap: anywhere; }
.qs-card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.qs-thumb { width: 88px; height: 88px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.qs-thumb svg { width: 100%; height: 100%; display: block; }
.qs-thumb-empty { font-size: .7rem; color: var(--muted); text-align: center; padding: 4px; }
.qs-choices { display: grid; gap: 8px; margin-block: 12px; }
.qs-scroll { overflow-x: auto; }

@media (hover: hover) {
    .qs-tab:hover, .qs-type:hover, .qs-step:hover { border-color: var(--brand); }
}

/* Print: only the vector pages, at the exact sheet size chosen. */
.qs-print { display: none; }
@page qs-a4-portrait { size: 210mm 297mm; margin: 0; }
@page qs-a4-landscape { size: 297mm 210mm; margin: 0; }
@page qs-letter-portrait { size: 215.9mm 279.4mm; margin: 0; }
@page qs-letter-landscape { size: 279.4mm 215.9mm; margin: 0; }
@media print {
    body.qs-printing > *:not(.qs-print) { display: none !important; }
    body.qs-printing .qs-print { display: block; }
    .qs-print svg { display: block; break-after: page; page-break-after: always; }
    .qs-print svg:last-child { break-after: auto; page-break-after: auto; }
    .qs-print-a4-portrait svg { page: qs-a4-portrait; }
    .qs-print-a4-landscape svg { page: qs-a4-landscape; }
    .qs-print-letter-portrait svg { page: qs-letter-portrait; }
    .qs-print-letter-landscape svg { page: qs-letter-landscape; }
    .qr-studio, [data-qr-guide] { display: none !important; }
}