:root {
    --fs: 10pt;
    --lh: 1.35;
    --ls: 0px;
    --zoom: 1;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    font: 13px/1.4 system-ui, sans-serif;
    background: #e9e9ec;
}

/* ---------- toolbar ---------- */

.bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid #ccc;
}

.bar form { display: flex; gap: 4px; }
.bar input[type=url] { width: 22rem; }

.ctl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #555;
}

.ctl input { width: 72px; }
.ctl output { width: 3.5em; font-variant-numeric: tabular-nums; }

#shift {
    min-width: 2.2em;
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: #333;
}

#status { color: #b00; font-size: 11px; }

/* ---------- preview ---------- */

main {
    flex: 1;
    min-height: 0;
}

#preview {
    height: 100%;
    overflow: auto;
    padding: 16px;
}

#pages { zoom: var(--zoom); }

/* Touch devices have no Shift+Enter: split at the caret with this button instead.
   Sticky inside the preview scroller keeps it reachable above the on-screen keyboard. */
#split-touch { display: none; }

@media (pointer: coarse) {
    #split-touch {
        display: block;
        position: sticky;
        top: 8px;
        z-index: 2;
        width: fit-content;
        margin: 0 0 8px auto;
        padding: 6px 12px;
        font: inherit;
    }
}

#pages:empty::before {
    content: "Paste an Ultimate Guitar URL above";
    display: block;
    margin-top: 3rem;
    text-align: center;
    font-size: 14px;
    color: #888;
}

/* ---------- pages ---------- */

.page {
    position: relative;
    width: 210mm;
    height: 297mm;
    padding: 15mm;
    margin: 0 auto 24px;
    display: flex;
    gap: 8mm;
    overflow: visible;         /* overflow runs out past the paper, so it's obvious */
    background: #fff;
    box-shadow: 0 2px 8px #0003;
}

/* One font source of truth for the pages and the measuring probe. */
.page,
#probe {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs);
    line-height: var(--lh);
    letter-spacing: var(--ls);
    white-space: pre;          /* no wrapping: chords keep their lyric line */
}

.col {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    overflow: visible;         /* too-long lines run into the next column, visibly */
    font: inherit;
    outline: none;
}

.col:focus {
    outline: 1px dashed #2a7;
    outline-offset: 4px;
}

.chord { color: #b02a37; font-weight: 600; }

.pno {
    position: absolute;
    right: 15mm;
    bottom: 6mm;
    font: 9pt system-ui, sans-serif;
    font-weight: 400;
    color: #999;
    pointer-events: none;
    user-select: none;
}

#probe {
    position: fixed;
    left: -9999px;
    top: 0;
    visibility: hidden;
}

/* ---------- print ---------- */

@page {
    size: A4;
    margin: 0;          /* page margins are the .page padding */
}

@media print {
    body { height: auto; display: block; background: #fff; }

    .bar, #status, #probe, #split-touch { display: none; }

    main { display: block; }
    #preview { height: auto; overflow: visible; padding: 0; }
    #pages { zoom: 1; }
    #pages:empty::before { content: none; }

    .page {
        margin: 0;
        box-shadow: none;
        overflow: hidden;      /* clip at the paper edge; also stops print fit-to-width scaling */
    }

    .page + .page { break-before: page; }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}