/**
 * QR code generator
 * ===============================================================
 * Everything here is specific to this tool. The panels, fields,
 * dropdowns, buttons, statuses and notes all come from devtools.css and
 * tool.css, which is deliberate: a second set of form controls would
 * drift from the first one within a release or two.
 *
 * What is genuinely new is the working surface — a controls column and a
 * preview column — plus the colour and checkbox inputs, which the
 * developer-tools stylesheet has no opinion about because no developer
 * tool had needed one.
 */

/* -----------------------------------------------------------------
   1. Working surface
   ----------------------------------------------------------------- */

.qr__layout {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

/* Stacked on a phone, two columns once there is room. The controls
   column is capped rather than proportional: a form stretched across
   600px to hold a Wi-Fi password looks broken. */
@media (min-width: 900px) {
    .qr__layout {
        grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
        gap: 2.25rem;
    }
}

.qr__controls {
    min-width: 0;
}

.qr__actions {
    margin-top: -.1rem;
}

/* -----------------------------------------------------------------
   2. Preview
   ----------------------------------------------------------------- */

.qr__preview {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

/* The preview follows the controls down a tall page. Above 900px only,
   because sticky inside a stacked column just pins the canvas over the
   form. */
@media (min-width: 900px) {
    .qr__preview {
        position: sticky;
        top: calc(var(--header-h) + 1.25rem);
    }
}

.qr__stage {
    display: grid;
    place-items: center;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--bg-soft);
    /* A checkerboard, so a transparent code reads as transparent rather
       than as a code that happens to be on a grey square. A code with its
       own background paints over this and the pattern never shows. */
    background-image:
        linear-gradient(45deg, var(--bg-muted) 25%, transparent 25%, transparent 75%, var(--bg-muted) 75%),
        linear-gradient(45deg, var(--bg-muted) 25%, transparent 25%, transparent 75%, var(--bg-muted) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.qr__canvas {
    display: block;
    width: min(100%, 20rem);
    height: auto;
    /* No `image-rendering: pixelated`. The canvas backing store is the
       export size — up to 2048 — and is almost always shown smaller, so
       this is a downscale. Nearest-neighbour downscaling drops whole
       modules and produces a preview that can no longer be scanned from
       the screen, which is exactly what a preview is for. The exported
       file is rendered at full size and is unaffected either way. */
}

/* A quiet line of facts under the preview: module count, pixel size and
   the error correction level in force. */
.qr__meta {
    margin: 0;
    font-size: .82rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.qr__meta:empty {
    display: none;
}

.qr__downloads {
    margin-top: 0;
}

/* -----------------------------------------------------------------
   3. Disclosure panels
   ----------------------------------------------------------------- */

.qr__panel {
    margin-top: 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.qr__panel--payload {
    margin-top: 0;
}

.qr__summary {
    cursor: pointer;
    padding: .7rem .9rem;
    font-size: .87rem;
    font-weight: 650;
    color: var(--ink-2);
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.qr__summary::-webkit-details-marker {
    display: none;
}

/* A triangle drawn with borders, so the marker matches the rest of the
   page instead of whatever the platform's default disclosure icon is. */
.qr__summary::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s ease;
}

.qr__panel[open] > .qr__summary::before {
    transform: rotate(90deg);
}

.qr__summary:hover {
    color: var(--ink);
    background: var(--bg-soft);
}

.qr__summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius);
}

.qr__panel-body {
    padding: 0 .9rem 1rem;
}

/* The panel is outdented from the field it follows, so pull the first
   field's own spacing back in. */
.qr__panel-body > .dev-stack,
.qr__panel-body > * {
    margin-top: 0;
}

/* -----------------------------------------------------------------
   4. Controls the developer-tools stylesheet does not define
   ----------------------------------------------------------------- */

/* A colour input is not a text input: it needs a fixed height and no
   inner padding, or the swatch floats inside a taller box. */
.qr__color {
    height: 44px;
    padding: .25rem;
    cursor: pointer;
}

.qr__color::-webkit-color-swatch-wrapper {
    padding: 0;
}

.qr__color::-webkit-color-swatch {
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-sm) - 2px);
}

.qr__color::-moz-color-swatch {
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-sm) - 2px);
}

.qr__check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .87rem;
    color: var(--ink-2);
    cursor: pointer;
    /* Comfortable touch target without a visible box. */
    padding: .35rem 0;
}

.qr__check input {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
    cursor: pointer;
    flex: 0 0 auto;
}

.qr__check input:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

.qr__optional {
    font-weight: 500;
    color: var(--ink-4);
    font-size: .8em;
}

/* -----------------------------------------------------------------
   5. Assessment findings
   ----------------------------------------------------------------- */

.qr__findings {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .85rem;
}

.qr__finding {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    padding: .6rem .75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: .85rem;
    line-height: 1.55;
}

.qr__finding svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: .18em;
}

.qr__finding--warn {
    background: var(--warn-bg);
    border-color: color-mix(in srgb, var(--warn) 30%, transparent);
    color: var(--warn);
}

.qr__finding--error {
    background: var(--err-bg);
    border-color: color-mix(in srgb, var(--err) 30%, transparent);
    color: var(--err);
}

/* -----------------------------------------------------------------
   6. Generated field groups
   ----------------------------------------------------------------- */

/* The controller builds these from the engine's field descriptors.
   Spacing only: every control inside is a .dev-* class already. */
.qr-fields {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.qr-fields__row {
    display: grid;
    gap: .85rem;
}

@media (min-width: 560px) {
    .qr-fields__row--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .qr__summary::before {
        transition: none;
    }
}