/* Reset and sizing helpers */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

/* Layout: title at top, columns below */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* ensure full screen height */
    margin: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Top title bar: full width, 10% of viewport height, text aligned right */
#title {
    width: calc(100% - 12px);
    /* account for left+right margins */
    height: 10vh;
    /* 10% of the screen height */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* text to the left */
    margin-top: 6px;
    /* top margin for the red border */
    margin-left: 6px;
    /* left margin for the red border */
    margin-right: 6px;
    /* right margin for the red border */
    padding-right: 6px;
    /* align visually with content's right padding */
    padding-left: 6px;
    /* align visually with content's left padding */
    /* make the text scale to exactly fill the title box height (10vh) minus the 8px top+bottom borders */
    font-size: calc(10vh - 16px);
    line-height: 1;
    box-sizing: border-box;
    border: 8px solid red;
    /* same proportions as the pink/blue borders */
    border-radius: 12px;
}

/* Content area holds the two vertical columns and occupies the rest */
#content {
    display: flex;
    gap: 6px;
    /* space between columns */
    padding-left: 6px;
    /* left margin for pink border */
    padding-right: 6px;
    /* right margin for blue border */
    height: calc(100vh - 10vh - 6px);
    /* remaining 90% minus title top margin */
    box-sizing: border-box;
}

/* Left column: fixed to 20% of viewport width */
#left-column {
    width: 20vw;
    /* 20% of screen width */
    min-width: 140px;
    /* small safeguard for very narrow viewports */
    border: 8px solid pink;
    border-radius: 12px;
    height: 100%;
    margin: 6px 0;
    /* keep vertical spacing, horizontal gap handled by container gap */
    padding: 1rem;
    background: rgba(255, 192, 203, 0.03);
    /* subtle tint */
    overflow: auto;
}

/* make left column a column-flex so we can pin download controls to the bottom */
#left-column {
    display: flex;
    flex-direction: column;
}

.download-area {
    /* keep pinned to bottom but left-align contents to match other controls */
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    /* left-align the button */
    padding-top: 24px;
    /* 24px gap above the button */
}


/* Thumbnails inside left column */
.thumbnails {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Additional image selector layout in the left column */
.additional-image {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    /* left-align children */
}

.additional-image input,
.additional-image button {
    /* keep natural sizing but stack vertically with same left edge */
    display: block;
}

/* Slider for additional image scaling */
.additional-image #additional-image-scaler {
    width: 100%;
    margin-top: 0.25rem;
}

.thumb {
    width: 80%;
    /* 80% of the left column */
    overflow: hidden;
    background: #fff;
    display: block;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 4px;
}

.thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Visual state for selected thumbnail: double the border width */
.thumb.selected {
    border-width: 8px !important;
    background: #eee !important;
    /* light grey background for selected thumb */
}

/* Colored 4px borders for each thumbnail (chosen colors) */
.thumbnails .thumb:nth-child(1) {
    border: 4px solid #ff8a65;
}

.thumbnails .thumb:nth-child(2) {
    border: 4px solid #4db6ac;
}

.thumbnails .thumb:nth-child(3) {
    border: 4px solid #9575cd;
}

.thumbnails .thumb:nth-child(4) {
    border: 4px solid #f06292;
}

/* Main area: fills remaining space to the right */
#main-area {
    flex: 1;
    /* fill remaining horizontal space */
    border: 8px solid blue;
    border-radius: 12px;
    height: 100%;
    margin: 6px 0;
    /* keep vertical spacing, horizontal gap handled by container gap */
    padding: 1rem;
    overflow: auto;
}

/* Canvas inside main area */
#main-canvas {
    display: block;
    width: calc(100% - 20px);
    /* account for requested 10px margin on both sides */
    height: calc(100% - 20px);
    margin: 10px;
    /* interpreted as 10px */
    padding: 8px;
    /* inner padding requested */
    box-sizing: border-box;
    border: 4px solid green;
    /* 4px green border */
    border-radius: 6px;
    /* 6px radius */
    background: white;
    /* default cursor left to user agent when no additional image is present */
}

/* apply grab/grabbing only when canvas has the 'can-grab' class (enabled by JS) */
#main-canvas.can-grab {
    cursor: grab;
}

#main-canvas.can-grab.grabbing {
    cursor: grabbing;
}

/* Small responsive tweak: stack columns on narrow screens */
@media (max-width: 480px) {
    #content {
        flex-direction: column;
    }

    #left-column,
    #main-area {
        width: 100%;
        height: auto;
    }

    /* Smartphone (portrait) tweaks: reduce title size and make thumbnails two per row */
    #title {
        /* smaller title to fit small screens: 6vh minus borders (top+bottom = 16px) */
        font-size: calc(6vh - 16px);
        line-height: 1;
    }

    .thumbnails {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: space-between;
    }

    .thumbnails .thumb {
        width: calc(50% - 4px);
        box-sizing: border-box;
    }
}