/* QR Code Generator — preview, scan check, type picker, shape pickers and the help-section cards. */

/* The settings panel is long, so on wide screens the preview stays in view while you scroll it. */
.qr-workspace .workspace-side { position: static; }
@media (min-width: 921px) {
  .qr-workspace .workspace-main { position: sticky; top: calc(var(--header-h) + 12px); }
}

.qr-preview { min-height: 0; padding: clamp(.75rem, 3vw, 2rem); }
.qr-preview > svg { width: 100%; max-width: 500px; max-height: none; height: auto; border-radius: 6px; }

.qr-check { display: flex; align-items: flex-start; gap: .55rem; margin: 0; min-height: 1.5em; font-size: .92rem; font-weight: 550; color: var(--text-soft); }
.qr-check .icon { flex: none; margin-top: .12em; }
.qr-check.is-ok { color: var(--success); }
.qr-check.is-warn { color: var(--warning); }
.qr-check.is-bad { color: var(--danger); }
.qr-check.is-wait .icon { animation: qr-spin 1s linear infinite; }
@keyframes qr-spin { to { transform: rotate(360deg); } }

.qr-panel { display: flex; flex-direction: column; gap: 1.1rem; container-type: inline-size; }
/* four tabs share the panel's width; their icons go when it's too narrow for icon + word */
.qr-panel .tabs { overflow: visible; }
.qr-panel .tab { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: .3rem; gap: .35rem; }
@container (max-width: 400px) { .qr-panel .tab .icon { display: none; } }
.qr-tab[hidden] { display: none; }
.qr-sub { margin: 0; font-size: .95rem; font-weight: 600; }
.qr-current { margin-left: auto; padding-left: .5rem; font-weight: 500; color: var(--text-faint); font-size: .88rem; }
.qr-panel .more > summary { display: flex; align-items: center; }

/* What the code opens: a grid of small buttons */
.qr-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .45rem; }
.qr-type {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 64px; padding: .5rem .25rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-soft);
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.qr-type .icon { width: 20px; height: 20px; }
.qr-type:hover { border-color: var(--border-strong); color: var(--text); }
.qr-type[aria-checked="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.qr-type:focus-visible, .qr-option:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }

/* Shape and preset pickers */
.qr-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: .45rem; }
.qr-options-presets { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.qr-option {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .45rem .25rem .4rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-soft);
  font: inherit; font-size: .74rem; font-weight: 550; line-height: 1.2; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.qr-option:hover { border-color: var(--border-strong); color: var(--text); }
.qr-option[aria-checked="true"] { border-color: var(--primary); background: var(--primary-softer); color: var(--primary); }
.qr-option-art { display: grid; place-items: center; width: 40px; height: 40px; color: var(--text); }
.qr-options-presets .qr-option-art { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; }
.qr-option-art svg { width: 100%; height: 100%; display: block; }

.qr-colors { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.qr-colors input[type="color"] { width: 52px; height: 40px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.qr-colors select { flex: 1 1 140px; min-height: 40px; }

.qr-formats { display: flex; flex-wrap: wrap; gap: .5rem; }
.qr-formats .btn { flex: 1 1 auto; }

.qr-logo-pick { display: flex; align-items: center; gap: .6rem; }
.qr-logo-thumb { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunken); }
[data-logo-body].is-disabled { opacity: .5; }

/* Help section */
.qr-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin: 1rem 0 1.5rem; }
.qr-info-grid h3 { margin: 0 0 .3rem; font-size: 1rem; }
.qr-info-grid p { margin: 0; color: var(--text-soft); font-size: .93rem; }
.qr-type-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .6rem; margin: 1rem 0 1.5rem; }
.qr-type-list > div { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.qr-type-list > div > .icon { flex: none; width: 20px; height: 20px; margin-top: .1rem; color: var(--primary); }
.qr-type-list h3 { margin: 0 0 .15rem; font-size: .95rem; }
.qr-type-list p { margin: 0; color: var(--text-soft); font-size: .88rem; }