/* The printed tag sheet (Components/Pages/Sheet.razor). Everything that ends up on paper
   is sized in inches: a tag is 1.5in by 2in, its QR code 1in square at left 0.25in and top
   0.7in, so there is at least a quarter inch of white on every side of it (the quiet zone
   of four modules needs 0.138in). The punch mark is 0.25in across, centred 0.3in from the
   top; its lower edge is 0.275in above the code. */

@page {
    size: letter;
    margin: 0.5in;
}

body {
    margin: 0;
    background: #e9e6e1;
    color: #222;
    font-family: system-ui, sans-serif;
}

.sheet-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    max-width: 8.5in;
    margin: 1rem auto;
    padding: 0 1rem;
}

.sheet-toolbar form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sheet-toolbar input {
    width: 4rem;
}

.sheet-toolbar p {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.9rem;
}

.sheet {
    box-sizing: border-box;
    width: 8.5in;
    min-height: 11in;
    margin: 1rem auto;
    padding: 0.5in;
    background: #fff;
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.25);
}

.tags {
    display: grid;
    grid-template-columns: repeat(3, 1.5in);
    grid-auto-rows: 2in;
    justify-content: center;
    padding-top: 0.5in;
}

/* The outline is the cut line; neighbours share it, so a trimmer takes four cuts each way. */
.tag {
    position: relative;
    outline: 0.5pt solid #999;
}

.tag svg {
    position: absolute;
    top: 0.7in;
    left: 0.25in;
    width: 1in;
    height: 1in;
}

.punch {
    position: absolute;
    top: 0.175in;
    left: 0.625in;
    box-sizing: border-box;
    width: 0.25in;
    height: 0.25in;
    border: 0.5pt solid #999;
    border-radius: 50%;
}

.sheet-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15in;
    margin: 0.5in 0 0;
    font-size: 9pt;
    color: #555;
}

.inch {
    width: 1in;
    border-top: 1pt solid #000;
}

@media print {
    body {
        background: none;
    }

    .sheet-toolbar {
        display: none;
    }

    .sheet {
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        box-shadow: none;
        break-after: page;
    }

    .sheet:last-of-type {
        break-after: auto;
    }
}