/* wall.css — the public pinboard (/wall) and its admin view. */

.wall-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.wall-main { position: relative; z-index: 2; }

.wall-heading { margin-left: 6%; }

.wall-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 10px 20px 11px;
    border: 2.5px solid var(--black);
    border-radius: 8px 12px 9px 11px;
    background: var(--accent-yellow);
    box-shadow: 4px 4px 0 var(--black);
    color: #121212;
    font: 700 1.25rem var(--font-hand);
    cursor: pointer;
    transform: rotate(-1.2deg);
    transition: transform .18s ease, box-shadow .18s ease;
}

.wall-open:hover,
.wall-open:focus-visible { transform: rotate(0deg) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }
.wall-open[aria-expanded="true"] { background: var(--white); color: var(--black); }
.wall-open:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.wall-heading .route-hand-note { right: auto; left: 230px; bottom: -6px; }

/* ---------------- a sticky note (always paper, even at night) ---------------- */

.wall-note {
    --black: #121212;
    --white: #FFFDF7;
    --ink-rgb: 18, 18, 18;
    --paper: #fff4b8;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 170px;
    padding: 28px 18px 14px;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, .035), transparent 18%),
        var(--paper);
    color: #121212;
    border-radius: 2px 2px 3px 14px / 2px 2px 3px 22px;
    box-shadow: 3px 6px 0 rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .12);
    transform: rotate(var(--tilt, 0deg));
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), box-shadow .25s ease;
}

.wall-note--yellow { --paper: #fff4b8; }
.wall-note--pink { --paper: #ffd9e2; }
.wall-note--blue { --paper: #d9ecff; }
.wall-note--green { --paper: #daf3d2; }

.wall-board .wall-note:hover {
    transform: rotate(0deg) translateY(-4px) scale(1.03);
    box-shadow: 6px 12px 0 rgba(0, 0, 0, .14), 0 2px 4px rgba(0, 0, 0, .12);
    z-index: 2;
}

.wall-note-pin {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border: 2px solid #121212;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff8a80 0 25%, #e03a3a 30%);
    box-shadow: 1px 2px 0 rgba(0, 0, 0, .3);
}

.wall-note--blue .wall-note-pin { background: radial-gradient(circle at 35% 35%, #ffe08a 0 25%, #f0b429 30%); }
.wall-note--green .wall-note-pin { background: radial-gradient(circle at 35% 35%, #9ec5ff 0 25%, #2b6be0 30%); }

.wall-note-body {
    margin: 0;
    font: 400 1.18rem/1.32 var(--font-hand);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wall-note-drawing {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.wall-note-sign {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
}

.wall-note-sign strong {
    font: 700 1rem var(--font-hand);
    overflow-wrap: anywhere;
}

.wall-note-sign time {
    flex: 0 0 auto;
    font: .6rem var(--font-mono);
    color: rgba(18, 18, 18, .5);
}

.wall-note.is-pending {
    outline: 2px dashed rgba(18, 18, 18, .4);
    outline-offset: 5px;
}

.wall-note-badge {
    position: absolute;
    top: -12px;
    right: -8px;
    padding: 3px 8px;
    border: 2px solid #121212;
    background: #fffdf7;
    font: 700 .58rem var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .04em;
    transform: rotate(4deg);
}

/* ---------------- the board ---------------- */

.wall-board-wrap { position: relative; margin-top: 56px; }

.wall-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 40px 30px;
    align-items: start;
    padding: 10px 4px 40px;
}

.wall-state,
.wall-thanks {
    margin: 0 0 24px;
    font: 700 1.15rem var(--font-hand);
    color: rgba(var(--ink-rgb), .7);
    text-align: center;
}

.wall-thanks {
    width: fit-content;
    margin: 0 auto 26px;
    padding: 6px 14px;
    border: 2px solid var(--black);
    background: #b8f0a8;
    color: #121212;
    box-shadow: 3px 3px 0 var(--black);
    transform: rotate(-1deg);
}

.wall-state[hidden] { display: none; }

/* ---------------- composer ---------------- */

.wall-composer { margin-top: 40px; }

.wall-form {
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    gap: 34px 46px;
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
    padding: 30px 32px;
    border: 2.5px dashed rgba(var(--ink-rgb), .35);
    border-radius: 14px;
}

.wall-draft {
    --tilt: -1.5deg;
    min-height: 0;
    box-shadow: 5px 8px 0 rgba(0, 0, 0, .18);
}

.wall-draft textarea,
.wall-draft input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #121212;
    font: 400 1.18rem/1.32 var(--font-hand);
    resize: none;
}

.wall-draft textarea::placeholder,
.wall-draft input::placeholder { color: rgba(18, 18, 18, .4); }

.wall-draft textarea:focus-visible,
.wall-draft input:focus-visible { outline: none; box-shadow: 0 2px 0 rgba(18, 18, 18, .4); }

.wall-pad { position: relative; }

.wall-pad canvas {
    display: block;
    width: 100%;
    aspect-ratio: 280 / 160;
    border: 2px dashed rgba(18, 18, 18, .28);
    border-radius: 6px;
    cursor: crosshair;
    touch-action: none;
}

.wall-pad-hint {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 700 1rem var(--font-hand);
    color: rgba(18, 18, 18, .35);
    pointer-events: none;
}

.wall-pad-hint[hidden] { display: none; }

.wall-sign { display: flex; align-items: baseline; gap: 8px; }
.wall-sign label { flex: 0 0 auto; font: 700 1rem var(--font-hand); }

.wall-tools { display: grid; gap: 18px; }

.wall-tool-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.wall-tool-group legend {
    float: left;
    width: 64px;
    margin-right: 6px;
    font: 700 .68rem var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(var(--ink-rgb), .6);
}

.wall-tool-group input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wall-swatch span,
.wall-ink span,
.wall-size span {
    display: block;
    width: 34px;
    height: 34px;
    border: 2px solid var(--black);
    font-size: 0;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.wall-swatch span { border-radius: 3px 3px 3px 9px; }
.wall-swatch--yellow span { background: #fff4b8; }
.wall-swatch--pink span { background: #ffd9e2; }
.wall-swatch--blue span { background: #d9ecff; }
.wall-swatch--green span { background: #daf3d2; }

.wall-ink span { border-radius: 50%; background: var(--ink); }

.wall-size span {
    position: relative;
    border-radius: 8px;
    background: var(--white);
}

.wall-size span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: var(--black);
    transform: translate(-50%, -50%);
}

.wall-tool-group input:checked + span {
    box-shadow: 3px 3px 0 var(--black);
    transform: translate(-2px, -2px) rotate(-4deg);
    outline: 2px solid var(--accent-yellow);
    outline-offset: 2px;
}

.wall-tool-group input:focus-visible + span { outline: 3px solid #2f7d32; outline-offset: 3px; }

.wall-tool-actions button,
.wall-cancel {
    padding: 7px 12px;
    border: 2px solid var(--black);
    border-radius: 6px;
    background: var(--white);
    color: var(--black);
    font: 700 .72rem var(--font-mono);
    cursor: pointer;
}

.wall-tool-actions button:hover,
.wall-cancel:hover { background: var(--paper-tint); }

.wall-submit-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.wall-status {
    flex: 1 1 200px;
    margin: 0;
    font: 700 1rem var(--font-hand);
    color: rgba(var(--ink-rgb), .75);
}

.wall-submit {
    padding: 10px 20px 11px;
    border: 2.5px solid var(--black);
    border-radius: 9px 7px 10px 8px;
    background: var(--accent-yellow);
    box-shadow: 4px 4px 0 var(--black);
    color: #121212;
    font: 700 1.2rem var(--font-hand);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.wall-submit:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }
.wall-submit:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black); }
.wall-submit:disabled { opacity: .6; cursor: progress; }

@media (max-width: 760px) {
    .wall-heading { margin-left: 0; }
    .wall-heading .route-hand-note { position: static; display: block; margin-top: 14px; }
    .wall-form { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; gap: 26px; }
    .wall-board { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 18px; }
    .wall-note { min-height: 140px; padding: 26px 14px 12px; }
    .wall-note-body { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    .wall-note, .wall-open, .wall-submit { transition: none; }
}

/* ---------------- admin (/admin/wall) ---------------- */

.wall-admin {
    width: min(1100px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0 80px;
}

.wall-admin-top {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.wall-admin-top h1 { margin: 0; font: 700 2.6rem/1 var(--font-hand); }

.wall-admin-auth,
.wall-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.wall-admin-auth input {
    min-width: 260px;
    padding: 9px 11px;
    border: 2px solid var(--black);
    background: var(--white);
    font: .75rem var(--font-mono);
}

.wall-admin button {
    padding: 8px 13px;
    border: 2px solid var(--black);
    border-radius: 6px;
    background: var(--white);
    color: var(--black);
    font: 700 .72rem var(--font-mono);
    cursor: pointer;
}

.wall-admin button[aria-pressed="true"],
.wall-admin button.is-primary { background: var(--accent-yellow); color: #121212; box-shadow: 3px 3px 0 var(--black); }

.wall-admin-msg { min-height: 1.4em; margin: 0 0 18px; font: 700 .75rem var(--font-mono); }

.wall-admin-item { display: flex; flex-direction: column; gap: 12px; }
.wall-admin-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.wall-admin-actions .is-approve { background: #b8f0a8; }
.wall-admin-actions .is-reject { background: #ffe1e4; }

/* ---------------- /admin/unlock ---------------- */

.admin-unlock { max-width: 560px; padding-top: 12vh; }
.admin-unlock h1 { margin: 6px 0 10px; font: 700 clamp(2.4rem, 7vw, 3.6rem)/1 var(--font-hand); }
.admin-unlock-copy { margin: 0 0 24px; font: 700 1.15rem var(--font-hand); color: rgba(var(--ink-rgb), .7); }
.admin-unlock-links { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }

.admin-unlock-links a {
    padding: 9px 16px 10px;
    border: 2.5px solid var(--black);
    border-radius: 8px 11px 9px 10px;
    background: var(--accent-yellow);
    box-shadow: 4px 4px 0 var(--black);
    color: #121212;
    font: 700 1.1rem var(--font-hand);
    text-decoration: none;
}

.admin-unlock-links a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }

/* ---------------- drawing tools v2: any color, eraser, 5 sizes ---------------- */

.wall-tool-group--pen { align-items: flex-start; }

.wall-inks {
    display: grid;
    grid-template-columns: repeat(8, 30px);
    gap: 8px;
}

.wall-inks .wall-ink span { width: 30px; height: 30px; }

.wall-ink--custom { position: relative; }

.wall-ink--custom span {
    background:
        radial-gradient(circle, var(--ink, #ff6b00) 0 34%, transparent 36%),
        conic-gradient(#ff4d4d, #ffb84d, #f5f54d, #4dff88, #4dc3ff, #8a4dff, #ff4dd2, #ff4d4d);
}

/* The real color input sits on top of the rainbow swatch. */
.wall-ink--custom input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
}

.wall-ink--eraser span {
    position: relative;
    border-radius: 6px;
    background: repeating-linear-gradient(-45deg, var(--white) 0 4px, rgba(var(--ink-rgb), .14) 4px 6px);
}

.wall-ink--eraser span::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 15px;
    height: 9px;
    border: 2px solid var(--black);
    border-radius: 2px;
    background: #ff8fab;
    transform: translate(-50%, -50%) rotate(-30deg);
}

.wall-board .wall-note { cursor: zoom-in; }
.wall-board .wall-note:focus-visible { outline: 3px solid #2f7d32; outline-offset: 6px; }

/* ---------------- "leave it anonymous?" ---------------- */

.wall-anon {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 14px 16px;
    border: 2.5px solid var(--black);
    border-radius: 10px 6px 11px 7px;
    background: #fff4b8;
    color: #121212;
    box-shadow: 4px 4px 0 var(--black);
    transform: rotate(-.6deg);
    animation: wallAnonIn .25s cubic-bezier(.2, .9, .3, 1.3);
}

.wall-anon[hidden] { display: none; }
.wall-anon p { margin: 0; font: 400 1.08rem/1.35 var(--font-hand); }
.wall-anon div { display: flex; flex-wrap: wrap; gap: 8px; }

.wall-anon button {
    padding: 7px 13px;
    border: 2px solid #121212;
    border-radius: 7px;
    background: #fffdf7;
    color: #121212;
    font: 700 .74rem var(--font-mono);
    cursor: pointer;
}

.wall-anon .wall-anon-sign { background: var(--accent-yellow); box-shadow: 2px 2px 0 #121212; }

@keyframes wallAnonIn {
    from { opacity: 0; transform: translateY(6px) rotate(-.6deg); }
    to { opacity: 1; transform: translateY(0) rotate(-.6deg); }
}

/* ---------------- zoomed note ---------------- */

.wall-zoom {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: grid;
    place-items: center;
    padding: 24px;
}

.wall-zoom[hidden] { display: none; }

.wall-zoom-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(3px);
    cursor: zoom-out;
}

.wall-zoom-stage {
    position: relative;
    width: min(680px, 100%);
    max-height: calc(100dvh - 48px);
    padding: 22px 20px 28px;
    overflow: auto;
    outline: none;
}

.wall-note--zoomed {
    --tilt: -1deg;
    min-height: 0;
    padding: 34px 26px 18px;
    box-shadow: 8px 14px 0 rgba(0, 0, 0, .3);
    animation: wallZoomIn .28s cubic-bezier(.2, .9, .3, 1.2);
}

.wall-note--zoomed .wall-note-body { font-size: 1.45rem; }
.wall-note--zoomed .wall-note-sign strong { font-size: 1.2rem; }

.wall-zoom-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border: 2px solid #121212;
    border-radius: 50%;
    background: var(--accent-yellow);
    color: #121212;
    font: 700 1.4rem/1 var(--font-mono);
    cursor: pointer;
}

@keyframes wallZoomIn {
    from { opacity: 0; transform: scale(.85) rotate(4deg); }
    to { opacity: 1; transform: scale(1) rotate(var(--tilt)); }
}

@media (max-width: 760px) {
    .wall-inks { grid-template-columns: repeat(8, minmax(0, 30px)); gap: 7px; }
    .wall-tool-group legend { float: none; width: 100%; margin-bottom: 2px; }
}

@media (max-width: 380px) {
    .wall-inks { grid-template-columns: repeat(6, 30px); }
}

@media (prefers-reduced-motion: reduce) {
    .wall-anon, .wall-note--zoomed { animation: none; }
}