/**
 * Gutter Cutter, the panel builder at /comic-panel-builder.
 *
 * Black ink on white paper, like the page it makes. Blue (--color-guide) is
 * everything that does not print: handles, the selected gutter, the trim
 * line. Orange is the download and nothing else.
 */

#comic-panel-builder .main-content {
    padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-5xl);
}

.gc-head,
.gc-next {
    max-width: 42rem;
    margin: 0 auto;
    text-align: center;
}

.gc-head h1 {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.15;
    margin: 0 0 var(--spacing-md);
}

/* The written half of the page, under the builder. */
.gc-about {
    max-width: 42rem;
    margin: var(--spacing-4xl) auto 0;
}

.gc-about h2,
.gc-about h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    margin: var(--spacing-xl) 0 var(--spacing-xs);
}

.gc-about h2 { font-size: var(--font-size-2xl); margin-top: 0; }
.gc-about h3 { font-size: var(--font-size-lg); }

.gc-head p,
.gc-about p,
.gc-next p {
    color: var(--color-text-light);
    margin: 0;
}

.gc-head p { font-size: var(--font-size-lg); }

.gc {
    max-width: var(--max-width);
    margin: var(--spacing-2xl) auto 0;
}

/* Setup on the left, the page on the right. */
.gc-body {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.gc-side {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
}

.gc-setup { flex: 0 0 15rem; }

.gc-side h2 {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    margin: var(--spacing-lg) 0 var(--spacing-xs);
}

.gc-side h2:first-child { margin-top: 0; }

/* The browser's own arrow sits hard against the rounded edge, so the select
   drops it and the wrapper draws one with room around it. */
.gc-select {
    position: relative;
    display: block;
}

.gc-select select {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-xl) var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
    cursor: pointer;
}

.gc-select i {
    position: absolute;
    top: 50%;
    right: var(--spacing-sm);
    transform: translateY(-50%);
    font-size: var(--font-size-xxs);
    color: var(--color-text-light);
    pointer-events: none;
}

.gc-templates {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs);
}

.gc-template {
    padding: var(--spacing-xs);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: border-color var(--transition-base);
}

.gc-template:hover { border-color: var(--color-ink-black); }
.gc-template:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.gc-template svg { display: block; width: 100%; }
.gc-template rect { fill: none; stroke: var(--color-text); stroke-width: 1; }

.gc-advanced { margin-top: var(--spacing-lg); }

.gc-advanced .expandable-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.gc-advanced .expandable-content h2 { margin-bottom: 0; }
.gc-advanced .expandable-content > div { width: 100%; }

.gc-field {
    display: grid;
    grid-template-columns: 3.5rem 1fr 3.25rem;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-xxs) 0;
}

.gc-field > span { color: var(--color-text-light); }

/* The site's input rule draws a bordered, padded box, which a slider and a
   tick box are not. */
.gc-side input[type="range"],
.gc-side input[type="checkbox"] {
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--color-ink-black);
}

.gc-field input[type="range"] { width: 100%; min-width: 0; }
.gc-field output { text-align: right; font-variant-numeric: tabular-nums; }

.gc-check {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.gc-desk {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--color-background-muted);
    border-radius: var(--radius-card);
    padding: var(--spacing-md);
}

/* The tool's name, then Undo, Clear and Delete centred over the page they
   act on, and the download across from the name. */
.gc-desk-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.gc-name {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    padding-left: var(--spacing-xs);
}

.gc-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
}

.gc-desk-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.gc-desk-end #gc-status {
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-light);
    white-space: nowrap;
}

#gc-stage {
    display: block;
    width: 100%;
    height: 80vh;
    min-height: 28rem;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: crosshair;
}

/* The page. White paper and black ink in both themes: it is a print, and the
   download is these borders exactly. */
.gc-paper { fill: var(--color-neutral-50); }
.gc-ink { fill: var(--color-ink-black); }
.gc-panel { fill: var(--color-paper); }

/* Guides: on screen only. */
.gc-guide { fill: var(--color-guide); }
.gc-guide-line { fill: none; stroke: var(--color-guide); stroke-width: 1.5; }
.gc-guide-wash { stroke: var(--color-guide); stroke-opacity: 0.28; }
.gc-trim { fill: none; stroke: var(--color-guide); stroke-opacity: 0.7; stroke-dasharray: 6 4; }
.gc-handle,
.gc-corner { fill: var(--color-neutral-50); stroke: var(--color-guide); stroke-width: 2.5; }
.gc-cross { fill: none; stroke: var(--color-neutral-50); stroke-width: 2.2; stroke-linecap: round; }
.gc-quiet { pointer-events: none; }

.gc-hit,
.gc-boxhit { cursor: move; }
.gc-handle,
.gc-rot { cursor: grab; }
.gc-bleed,
.gc-join { cursor: pointer; }
.gc-edge { stroke: transparent; }
.gc-edge:hover { stroke: var(--color-guide); stroke-opacity: 0.45; }
.gc-edge-t, .gc-edge-b { cursor: ns-resize; }
.gc-edge-l, .gc-edge-r { cursor: ew-resize; }
.gc-corner-tl, .gc-corner-br { cursor: nwse-resize; }
.gc-corner-tr, .gc-corner-bl { cursor: nesw-resize; }

.gc-next {
    margin-top: var(--spacing-4xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.gc-next h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    margin: 0;
}

/* Narrow: setup stacks above the page. */
@media (max-width: 800px) {
    .gc-body { flex-direction: column; align-items: stretch; }
    .gc-setup { flex-basis: auto; }
    .gc-templates { grid-template-columns: repeat(7, 1fr); }
}

@media (max-width: 640px) {
    .gc-desk-bar { grid-template-columns: 1fr auto; }
    .gc-actions { grid-column: 1 / -1; grid-row: 2; }
    #comic-panel-builder .main-content { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
    .gc-head h1 { font-size: var(--font-size-3xl); }
    #gc-stage { height: 70vh; }
}