/* ============================================================
   "ONE LINE" — COLLECTIVE DRAWING FEATURE
   Built on the color/font variables defined in style.css —
   changing the site palette there reskins this automatically.
   ============================================================ */

.ol-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 60px 20px 80px;
}

.ol-intro {
    text-align: left;
    max-width: 760px;
    margin: 0 auto;
    padding: 50px 24px 40px;
}

.ol-single-polaroid-wrap {
    text-align: center;
}

.ol-single-polaroid {
    display: inline-block;
    background: #FDFCF9;
    padding: 14px 14px 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    transform: rotate(-3deg);
    margin-top: 30px;
}

.ol-single-polaroid-photo {
    display: block;
    width: 260px;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
}

.ol-intro p {
    font-size: 18px;
    line-height: 1.6;
    opacity: 0.85;
    max-width: 650px;
    margin: 12px 0 0;
}

.ol-intro p.ol-artist-quote {
    font-style: italic;
    max-width: 760px;
}

.ol-card {
    border: 1px solid rgba(55, 57, 58, 0.3);
    border-radius: 10px;
    padding: 28px;
    margin-bottom: 32px;
}

.ol-card h3 {
    font-size: 30px;
}

.ol-card h2 {
    font-size: 28px;
    margin-bottom: 4px;
}

.ol-section-note {
    font-size: 15px;
    opacity: 0.7;
    line-height: 1.5;
    margin: 0 0 16px;
}

.ol-canvas-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(55, 57, 58, 0.4);
    border-radius: 6px;
    overflow: hidden;
    touch-action: none;
    cursor: crosshair;
    background: rgba(255, 255, 255, 0.5);
}

.ol-master-frame {
    cursor: grab;
}

.ol-master-frame:active {
    cursor: grabbing;
}

.ol-canvas-frame canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.ol-name-field {
    margin-top: 16px;
}

.ol-name-field label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.ol-name-field input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(55, 57, 58, 0.4);
    background: rgba(255, 255, 255, 0.5);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 18px;
}

.ol-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    min-height: 20px;
}

.ol-status {
    font-size: 15px;
    opacity: 0.75;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ol-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(55, 57, 58, 0.3);
    transition: background 0.2s ease;
}

.ol-status-dot.active {
    background: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(55, 57, 58, 0.15);
}

.ol-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.ol-actions {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, max-height 0.25s ease, margin 0.25s ease;
}

.ol-actions.visible {
    opacity: 1;
    max-height: 60px;
    margin-top: 14px;
}

.ol-form-error {
    color: #a13a2f;
    font-size: 15px;
    margin-top: 10px;
}

.ol-card button {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    padding: 11px 16px;
    border-radius: 6px;
    cursor: pointer;
    flex: 1;
    white-space: nowrap;
}

.ol-card button:active { opacity: 0.7; }

.ol-btn-outline {
    background: transparent;
    border: 1px solid rgba(55, 57, 58, 0.4);
    color: var(--color-text);
}

.ol-btn-solid {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-background);
}

.ol-btn-solid:disabled {
    opacity: 0.35;
    cursor: default;
}

.ol-color-controls {
    margin-bottom: 16px;
}

.ol-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.ol-mode-btn {
    flex: none;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid rgba(55, 57, 58, 0.3);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-body);
}

.ol-mode-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-background);
}

.ol-color-inputs {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 30px;
    flex-wrap: wrap;
}

.ol-color-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ol-color-field label {
    font-size: 14px;
    opacity: 0.75;
}

.ol-color-inputs input[type="color"] {
    width: 34px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(55, 57, 58, 0.4);
    border-radius: 4px;
    background: none;
    cursor: pointer;
}

.ol-mode-hint {
    font-size: 14px;
    opacity: 0.65;
    font-style: italic;
}

.ol-shuffle-btn {
    flex: none;
    padding: 7px 14px;
    font-size: 14px;
}

.ol-view-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
}

.ol-stroke-count {
    font-size: 15px;
    opacity: 0.7;
}

.ol-hover-label {
    position: absolute;
    transform: translate(-50%, -100%);
    background: var(--color-primary);
    color: var(--color-background);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.ol-hover-label.visible {
    opacity: 1;
}

.ol-hover-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-primary);
}

@media (max-width: 600px) {
    .ol-wrap { padding: 40px 16px 60px; }
    .ol-intro { padding: 40px 16px 30px; }
    .ol-artist-section { padding: 0 16px 20px; }
    .ol-card { padding: 20px; }
    .ol-single-polaroid-photo { width: 46vw; max-width: 220px; }
}

/* The view page (one-line-view.php) isn't constrained to the same small
   size as the capture canvas — visitors aren't drawing here, just
   looking, so it can take up much more of a desktop screen. */
.ol-wrap-wide {
    max-width: 1200px;
}

@media (min-width: 900px) {
    .ol-wrap-wide .ol-master-frame {
        aspect-ratio: auto;
        height: 78vh;
        max-height: 900px;
    }
}

.ol-btn-link {
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.ol-view-link {
    text-align: center;
    font-size: 16px;
    margin-top: -12px;
}

/* ---- Artwork teaser (above the One Line section) ----
   Not cropped to squares — each piece keeps its real aspect ratio,
   standardized to a fixed height instead. Constrained container width
   (rather than a rigid CSS grid) so two typically-proportioned pieces
   land per row without fighting variable widths. */

/* Separate, wider container for the artist intro + artwork teaser —
   deliberately NOT nested inside .ol-wrap, since that's sized narrow
   (480px) specifically for the drawing capture canvas. Reusing that
   width here was what caused the teaser to only ever fit one image
   per row instead of two. */
.ol-artist-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.ol-art-teaser {
    margin: 0 auto;
}

.ol-art-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.ol-art-piece {
    display: block;
    background: #FDFCF9;
    padding: 12px 12px 18px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ol-art-piece:hover {
    transform: rotate(0deg) scale(1.05) translateY(-6px) !important;
    box-shadow: 0 16px 28px rgba(0,0,0,0.24);
    z-index: 2;
    position: relative;
}

.ol-art-piece img {
    display: block;
    height: 260px;
    width: auto;
}

.ol-art-more {
    text-align: center;
    margin-top: 18px;
    font-size: 16px;
}

@media (max-width: 600px) {
    .ol-art-piece { padding: 9px 9px 14px; }
    .ol-art-piece img { height: 170px; }
    .ol-art-grid { gap: 20px; }
}