/* === FONT === */
@font-face {
    font-family: 'handwriting';
    src: url(../fonts/camron-handwriting-uni-ball-signo207-x167-regular.otf) format('opentype'),
         url(../fonts/camron-handwriting-uni-ball-signo207-x167-regular.ttf) format('truetype');
}

/* === COLOR PALETTE === */
:root {
    --bg:       #faf6f0;   /* warm cream paper */
    --ink:      #1a1a1a;
    --card:     #ffffff;
    --coral:    #e85d3d;
    --sky:      #4a9fd5;
    --yellow:   #f5c842;
    --sage:     #6aaa6a;
    --lavender: #9b7fd4;
    --border:   2px solid var(--ink);
    --shadow:   3px 3px 0 rgba(0, 0, 0, 0.18);
}

/* === BASE === */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'handwriting', sans-serif;
    font-size: 1rem;
    background-color: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    margin: 0;
}

h1 {
    font-size: 2.8rem;
    line-height: 1.1;
    margin: 0 0 0.3em 0;
}

h2 {
    font-size: 1.8rem;
    margin: 0 0 0.75em 0;
    border-bottom: var(--border);
    padding-bottom: 0.2em;
}

h3 {
    font-size: 1.3rem;
    margin: 0 0 0.4em 0;
}

p {
    margin: 0 0 0.6em 0;
    line-height: 1.5;
}

a {
    color: var(--ink);
}

/* === LAYOUT: CSS GRID === */
main {
    display: grid;
    min-height: 100vh;
    grid-template-areas:
        "thetop     thetop          thetop"
        "leftside   stuff           rightside"
        "dabottom   dabottom        dabottom";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 4fr minmax(290px, 2fr);
    /* Positioning context for the absolutely-placed todo note */
    position: relative;
}

header { grid-area: thetop; }
aside  { grid-area: leftside; }

article {
    grid-area: stuff;
    padding: 2em 2.5em 5em;
}

nav {
    grid-area: rightside;
    padding: 1.5em 0.5em 2.5em 0; /* left padding removed to pull card toward article */
}

footer {
    grid-area: dabottom;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5em 0;
    border-top: var(--border);
}

/* === SECTIONS === */
section {
    margin-bottom: 3.5em;
}

/* === HERO === */
#hero {
    margin-bottom: 1.5em;
}

.hero-header {
    margin-bottom: 1.5em;
    padding-bottom: 0.8em;
    border-bottom: var(--border);
}

#hero h1 {
    font-size: 3.4rem;
    line-height: 1.05;
    margin: 0 0 0.2em 0;
}

.tagline {
    font-size: 1.35rem;
    color: var(--coral);
    margin: 0;
}

.hero-body {
    display: flex;
    gap: 1.2em;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 1.2em;
}

.hero-bio {
    flex: 2;
    min-width: 220px;
    background: var(--card);
    border: var(--border);
    box-shadow: var(--shadow);
    padding: 1.1em 1.4em;
    transform: rotate(-0.4deg);
}

.hero-bio p:last-child {
    margin-bottom: 0;
}

.hero-photo-card {
    flex: 1;
    min-width: 160px;
    max-width: 230px;
    background: var(--card);
    border: var(--border);
    box-shadow: var(--shadow);
    padding: 0.5em 0.5em 1.8em;
    transform: rotate(2deg);
    align-self: flex-start;
}

.hero-photo-card img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 3 / 4;
    background: var(--bg);
}

/* Uncomment in HTML to use: floats right of bio text */
.hero-photo {
    float: right;
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: var(--border);
    box-shadow: var(--shadow);
    margin: 0 0 1em 1.5em;
    transform: rotate(1.5deg);
}

.contact-note {
    display: inline-block;
    margin-top: 0.5em;
    padding: 0.7em 1.1em;
    background: var(--yellow);
    border: var(--border);
    box-shadow: var(--shadow);
    transform: rotate(-1deg);
    line-height: 1.9;
}

.contact-note a {
    text-decoration: underline;
    color: var(--ink);
}

/* === SONG CARDS === */
.song-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1em;
}

.song-card {
    background: var(--card);
    border: var(--border);
    box-shadow: var(--shadow);
    padding: 0.8em 1em 1em;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

/* Slight tilts for the handmade/pinned feel */
.song-card:nth-child(3n+1) { transform: rotate(-0.6deg); }
.song-card:nth-child(3n+2) { transform: rotate(0.4deg); }
.song-card:nth-child(3n)   { transform: rotate(-0.3deg); }

.song-title {
    font-size: 1.05rem;
    font-weight: bold;
}

.song-date {
    font-size: 0.78rem;
    background: var(--sky);
    color: white;
    border: 1px solid var(--ink);
    padding: 0.1em 0.5em;
    display: inline-block;
    align-self: flex-start;
}

.song-card audio {
    width: 100%;
    margin-top: 0.3em;
}

/* === IMPROV VIDEOS === */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5em;
}

.video-card {
    position: relative;
    background: var(--card);
    border: var(--border);
    box-shadow: var(--shadow);
    padding: 0.8em;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Scoped to .video-grid (not just .video-card) so this can never match the
   expanded card — opening the lightbox moves that node out of .video-grid
   entirely, into #video-lightbox-backdrop. Split by nth-child so the tiny
   hover lift can combine with (not replace) the card's resting tilt. */
.video-grid .video-card:nth-child(odd):hover {
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.25);
    transform: rotate(-0.4deg) translateY(-3px);
}

.video-grid .video-card:nth-child(even):hover {
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.25);
    transform: rotate(0.5deg) translateY(-3px);
}

.video-card:nth-child(odd)  { transform: rotate(-0.4deg); }
.video-card:nth-child(even) { transform: rotate(0.5deg); }

.video-card:focus-visible {
    outline: 3px solid var(--sky);
    outline-offset: 3px;
}

/* Responsive 16:9 wrapper — holds the grid preview iframe, and the
   interactive player iframe once the lightbox opens. */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* Grid preview: a real YouTube embed, left at its own default (unplayed)
   state so YouTube's own poster/play-button/title/channel chrome renders
   naturally — no custom overlay layered on top of it. pointer-events:none
   (+ tabindex:-1) keeps it purely decorative: clicks and keyboard focus
   pass straight through to the .video-card itself, which is what opens
   the interactive expanded player (video-lightbox.js). */
.video-preview-frame {
    pointer-events: none;
}

/* Avoid loading two live iframes at once — the interactive player iframe
   (.video-player-frame) is inserted alongside this one when the lightbox
   opens; hide the preview underneath it while expanded. */
.video-card--expanded .video-preview-frame {
    display: none;
}

.video-title {
    margin: 0.6em 0 0;
    font-size: 1rem;
    font-weight: bold;
}

/* === VIDEO LIGHTBOX ===
   In-page expanded view — NOT the browser Fullscreen API. #video-lightbox-
   backdrop is built once by video-lightbox.js and stays in the DOM; opening
   a card moves its real .video-card node inside it (see .video-card--
   expanded below) and moves it straight back to the grid on close. */
#video-lightbox-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, 0.72); /* var(--ink), dimmed */
}

#video-lightbox-backdrop.is-open {
    display: flex;
}

/* Locks background scroll while the lightbox is open (set on <body> by JS) */
body.video-lightbox-open {
    overflow: hidden;
}

/* Expanded Polaroid — the SAME plain block-flow structure as the grid card
   above (video block, then a title paragraph below it; background/border/
   shadow/cursor all inherited from .video-card). No flexbox here on purpose:
   the goal is "grid card, scaled up, un-rotated" — not a separately laid-
   out modal. Knobs to retune by eye:
     --frame-pad          top/side/bottom white margin around the video
     --caption-pad        top+bottom breathing room inside the title strip
                           (slightly biased below-center in the rule itself,
                           so the handwriting optically centers)
     --title-min/-max     clamp() bounds for the expanded title's font-size
   --polaroid-ratio only matters as a soft width cap on very short/wide
   viewports — most of the time width is simply capped by 94vw and the
   card's actual height follows from the video's 16:9 ratio + the padding
   above, exactly like the grid card sizes itself from its own content. */
.video-card--expanded {
    --polaroid-ratio: 1.45;
    --frame-pad: 1.4em;
    --caption-pad: 1.1em;
    --title-min: 1.4rem;
    --title-max: 1.6rem;

    position: relative;
    width: min(94vw, calc(94vh * var(--polaroid-ratio)));
    max-width: 94vw;
    max-height: 94vh;
    margin: 0;
    padding: var(--frame-pad);
    transform: none;
    cursor: default;
    overflow: hidden; /* safety clamp for extreme viewport shapes near max-height */
}

/* Video itself stays true 16:9, sized to the card's own (padded) width. */
.video-card--expanded .video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    padding-bottom: 0; /* replaces the intrinsic-ratio padding-bottom trick used in the grid */
}

/* Handwriting scales up with the card (clamp between --title-min/-max)
   instead of a flat multiplier. Padding is slightly bottom-heavy rather
   than perfectly symmetric so the text optically centers. max-width keeps
   a right-hand gutter for wrapped long titles; left inset is just the
   card's own --frame-pad (0 horizontal padding here), same as the video
   above it, so the writing lines up flush with the photo's left edge. */
.video-card--expanded .video-title {
    margin: 0;
    padding: calc(var(--caption-pad) * 0.85) 0 calc(var(--caption-pad) * 1.15);
    max-width: 88%;
    font-size: clamp(var(--title-min), 1.1rem + 0.6vw, var(--title-max));
}

/* Small close control, tucked into the white frame rather than floating
   over the image — deliberately subtle (no circle/background), with a
   padded-but-invisible tap target so it stays easy to hit. */
.video-exit-btn {
    display: none;
    position: absolute;
    top: 0.2em;
    right: 0.4em;
    z-index: 2;
    padding: 0.35em 0.5em;
    background: none;
    border: none;
    color: var(--ink);
    font-size: 1.3em;
    line-height: 1;
    opacity: 0.55;
    cursor: pointer;
}

.video-exit-btn:hover,
.video-exit-btn:focus-visible {
    opacity: 1;
    color: var(--coral);
}

.video-card--expanded .video-exit-btn {
    display: block;
}

/* === SONG RENTAL LIBRARY === */
.rental-card {
    background: var(--card);
    border: var(--border);
    box-shadow: var(--shadow);
    padding: 1.2em 1.5em;
    max-width: 500px;
    transform: rotate(-0.3deg);
}

.rental-subtitle {
    font-size: 0.9rem;
    color: #555;
    margin: 0 0 1em;
}

#rental-display {
    font-size: 1.05rem;
    padding: 0.5em 0.7em;
    background: var(--yellow);
    border: 1px dashed var(--ink);
    margin: 0 0 1em;
    min-height: 2.2em;
}

#rental-song-select {
    font-family: 'handwriting', sans-serif;
    font-size: 1rem;
    padding: 0.4em;
    border: var(--border);
    background: var(--bg);
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}

#rent-btn,
#return-btn {
    font-family: 'handwriting', sans-serif;
    font-size: 1rem;
    padding: 0.4em 1em;
    border: var(--border);
    cursor: pointer;
    box-shadow: var(--shadow);
}

#rent-btn   { background: var(--coral);  color: white; }
#return-btn { background: var(--sage);   color: white; }

#rent-btn:hover,
#return-btn:hover { opacity: 0.85; }

/* === NEWSLETTER === */
.newsletter-card {
    background: var(--lavender);
    border: var(--border);
    box-shadow: var(--shadow);
    padding: 1.2em 1.5em;
    max-width: 480px;
    transform: rotate(0.4deg);
}

.newsletter-card label {
    display: block;
    margin-bottom: 0.7em;
    font-size: 1rem;
}

.newsletter-row {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
}

.newsletter-card input[type="email"] {
    font-family: 'handwriting', sans-serif;
    font-size: 1rem;
    padding: 0.4em 0.6em;
    border: var(--border);
    flex: 1;
    min-width: 160px;
    background: var(--bg);
}

.newsletter-card button[type="submit"] {
    font-family: 'handwriting', sans-serif;
    font-size: 1rem;
    padding: 0.4em 1em;
    background: var(--ink);
    color: var(--bg);
    border: var(--border);
    cursor: pointer;
}

.newsletter-card button[type="submit"]:hover {
    opacity: 0.8;
}

/* === BEAT PLAYGROUND TEASER === */
.teaser-card {
    position: relative;
    background: var(--card);
    border: var(--border);
    box-shadow: var(--shadow);
    padding: 1.5em 1.5em 1.2em;
    max-width: 300px;
    transform: rotate(-1deg);
    opacity: 0.82;
}

.teaser-label {
    position: absolute;
    top: -0.75em;
    right: 1em;
    background: var(--coral);
    color: white;
    font-size: 0.72rem;
    padding: 0.2em 0.6em;
    border: 1px solid var(--ink);
    transform: rotate(2deg);
    display: inline-block;
}

.teaser-card p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* === TO-DO LIST (right sidebar) === */

/* Tack clearance only; margin-top removed — note is absolutely positioned now */
#to-do-list {
    padding-top: 18px;
}

.todo-note {
    /*
     * Positioned absolutely within <main> (the workspace canvas).
     * JS sets left/top as percentages of main's dimensions so the note
     * stays in roughly the same visual area across different screen sizes.
     * CSS fallback values match the JS DEFAULT_NOTE_POS constants.
     *
     * On mobile (max-width: 767px) this switches to position: static
     * so the note stacks naturally in page flow — see the media query below.
     */
    position: absolute;
    left: 65%;
    top: 40%;
    width: clamp(360px, 28vw, 460px);
    /* Legal-pad yellow; red margin line baked into the background */
    background-color: #fff9e6;
    background-image: linear-gradient(
        to right,
        transparent 2em,
        rgba(210, 55, 55, 0.35) 2em,
        rgba(210, 55, 55, 0.35) calc(2em + 2px),
        transparent calc(2em + 2px)
    );
    border: var(--border);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.22);
    /* Extra padding-top so the heading clears the lowered thumbtack */
    padding: 3em 1.2em 1.4em 2.8em;
    transform: rotate(-1.8deg);
}

/* Thumbtack image — sits lower on the paper so it looks embedded.
   translateX(-35%) instead of (-50%) shifts the image rightward so the
   silver pin tip (which sits left of the image's center) lands at center. */
.todo-thumbtack {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-35%);
    width: 46px;
    height: auto;
    cursor: pointer;
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.38));
    z-index: 2;
    transition: filter 0.12s;
}

.todo-thumbtack:hover {
    filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.5)) brightness(1.06);
}

/* Wiggle + press animation — plays when the thumbtack is clicked */
@keyframes tack-wiggle {
    0%   { transform: translateX(-35%) rotate(0deg)   scale(1);    }
    15%  { transform: translateX(-35%) rotate(-18deg) scale(0.86); }
    35%  { transform: translateX(-35%) rotate(12deg)  scale(0.93); }
    55%  { transform: translateX(-35%) rotate(-7deg)  scale(0.96); }
    75%  { transform: translateX(-35%) rotate(4deg)   scale(0.99); }
    100% { transform: translateX(-35%) rotate(0deg)   scale(1);    }
}

.todo-thumbtack.tack-wiggle {
    animation: tack-wiggle 0.45s ease;
}

.todo-heading {
    font-size: 1.15rem;
    margin: 0 0 0.5em;   /* padding-top on .todo-note handles tack clearance */
    padding-bottom: 0.3em;
    border-bottom: var(--border);
}

.todo-note ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Each item: checkbox + editable text, sitting on a blue ruled line */
.todo-note li {
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.4em 0;
    border-bottom: 1px solid #a8cfe0;
    font-size: 0.88rem;
    line-height: 1.4;
}

/* Hand-drawn checkbox — minimal square, no browser default */
.todo-checkbox {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 0.85em;
    height: 0.85em;
    border: 1.5px solid #999;
    background: transparent;
    cursor: pointer;
    position: relative;
    top: -0.05em; /* tiny optical alignment with the text */
}

.todo-checkbox:checked {
    background: #aaa;
    border-color: #aaa;
}

/* Small checkmark inside the filled box */
.todo-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: -0.2em;
    left: 0.04em;
    font-size: 0.72em;
    color: #fff9e6;
    line-height: 1;
}

/* Editable text — click to edit in-place */
.todo-text {
    flex: 1;
    min-width: 0;       /* prevents the flex item from overflowing */
    outline: none;
    cursor: text;
    position: relative; /* needed for the strikethrough ::after */
    border-radius: 2px;
}

.todo-text:focus {
    background: rgba(255, 255, 255, 0.6);
}

/* Done items: grey text, strikethrough drawn on the text only */
.todo-note li.done .todo-text {
    color: #aaa;
}

.todo-note li.done .todo-text::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    background: #aaa;
    pointer-events: none;
}

/* Small italic hint below the list */
.todo-hint {
    font-size: 0.68rem;
    color: #aaa;
    margin: 0.8em 0 0;
    line-height: 1.6;
    font-style: italic;
}

.todo-hint small {
    font-size: 0.95em;
    color: #bbb;
}

/* === FOOTER SOCIAL ICONS === */
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
}

.social-icons a {
    text-decoration: none;
    color: var(--ink);
    font-size: 1.5rem;
    transition: color 0.2s;
}

.social-icons a:hover {
    color: var(--coral);
}

/* Temporary dev link — remove when studio prototype ships as homepage */
.studio-proto-link {
    display: block;
    margin-top: 0.6em;
    font-size: 0.72rem;
    color: #aaa;
    text-decoration: none;
    text-align: center;
    transition: color 0.2s;
}

.studio-proto-link:hover {
    color: var(--ink);
}


/* =====================================================================
   LAYOUT EDIT MODE  (body.edit-mode — only present when URL has #edit)
   Normal visitors never see any of these styles take effect.
   ===================================================================== */

/* Dashed outline on draggable items so you can see what's movable */
body.edit-mode .todo-note {
    outline: 1.5px dashed rgba(255, 160, 0, 0.55);
    outline-offset: 5px;
}

/* Drag handle glyph — injected into each draggable element by layout-edit.js */
.edit-drag-handle {
    position: absolute;
    bottom: 0.45em;
    right: 0.45em;
    font-size: 1.15rem;
    font-family: sans-serif; /* ensures the braille dot glyph renders correctly */
    color: #bbb;
    cursor: grab;
    user-select: none;
    line-height: 1;
    padding: 0.1em 0.2em;
    border-radius: 3px;
    transition: color 0.12s, background 0.12s;
}

.edit-drag-handle:hover {
    color: #555;
    background: rgba(0, 0, 0, 0.07);
}

/* Elevated shadow and grabbing cursor while a drag is in progress */
.is-dragging {
    box-shadow: 7px 9px 0 rgba(0, 0, 0, 0.25) !important;
    z-index: 100;
}

/* Fixed toolbar — dark pill, bottom-right of the viewport */
#edit-toolbar {
    position: fixed;
    bottom: 1.2em;
    right: 1.2em;
    background: rgba(16, 16, 16, 0.92);
    color: #ddd;
    padding: 0.55em 1em;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.8em;
    font-family: monospace;
    font-size: 0.78rem;
    z-index: 9999;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Yellow label signals "you're in a special mode" */
.edit-toolbar-label {
    color: var(--yellow);
    font-weight: bold;
    margin-right: 0.15em;
}

#edit-toolbar button {
    font-family: monospace;
    font-size: 0.76rem;
    padding: 0.3em 0.65em;
    background: transparent;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

#edit-toolbar button:hover {
    background: #2a2a2a;
    border-color: #888;
    color: #fff;
}

/* "Save official version" — stands out from the other toolbar buttons */
.edit-admin-btn {
    background: rgba(245, 200, 66, 0.15) !important;
    border-color: var(--yellow) !important;
    color: var(--yellow) !important;
}

.edit-admin-btn:hover {
    background: rgba(245, 200, 66, 0.28) !important;
}

/* Admin entrance — the 🍓 in the hero bio. Otherwise visually unchanged;
   the only affordance is the pointer cursor. */
#admin-entry {
    cursor: pointer;
}

/* Persistent "✓ Cam" indicator — only rendered (see admin-ui.js) once a
   session is confirmed admin, and hidden again while the panel or the
   edit toolbar already occupies this corner. */
#admin-indicator {
    display: none;
    position: fixed;
    bottom: 1.2em;
    right: 1.2em;
    background: rgba(16, 16, 16, 0.92);
    color: var(--sage);
    font-family: monospace;
    font-size: 0.76rem;
    padding: 0.4em 0.8em;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    cursor: pointer;
    z-index: 9998;
    backdrop-filter: blur(6px);
    transition: background 0.1s;
}

#admin-indicator:hover {
    background: #1e1e1e;
}

/* Single reusable admin panel — its contents swap between the login form,
   admin controls (Edit site / Log out), and a connection-issue message;
   see admin-ui.js. Never appears on its own — only via a direct click on
   the 🍓 or the indicator above. */
#admin-panel {
    position: fixed;
    bottom: 1.2em;
    right: 1.2em;
    background: rgba(16, 16, 16, 0.92);
    color: #ddd;
    padding: 0.6em 1em;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.78rem;
    z-index: 9999;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    max-width: 260px;
}

.admin-panel-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

.admin-panel-row + .admin-panel-row {
    margin-top: 0.4em;
}

.admin-login-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

#admin-email-input,
#admin-password-input {
    font-family: monospace;
    font-size: 0.76rem;
    padding: 0.28em 0.5em;
    background: #1e1e1e;
    color: #eee;
    border: 1px solid #444;
    border-radius: 3px;
    width: 130px;
}

.admin-panel-btn {
    font-family: monospace;
    font-size: 0.76rem;
    padding: 0.28em 0.65em;
    background: transparent;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.admin-panel-btn:hover {
    background: #2a2a2a;
    border-color: #888;
    color: #fff;
}

#admin-login-status {
    margin-top: 0.3em;
    color: var(--coral);
    font-size: 0.72rem;
    min-height: 1em;
}

/* === PASSWORD RESET PANEL === */
/* Shown only when arriving via a Supabase password-recovery email link. */
#password-reset-panel {
    position: fixed;
    bottom: 1.2em;
    right: 1.2em;
    background: rgba(16, 16, 16, 0.92);
    color: #ddd;
    padding: 0.6em 1em;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.78rem;
    z-index: 9999;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

#pw-reset-new,
#pw-reset-confirm {
    font-family: monospace;
    font-size: 0.76rem;
    padding: 0.28em 0.5em;
    background: #1e1e1e;
    color: #eee;
    border: 1px solid #444;
    border-radius: 3px;
    width: 130px;
}

#pw-reset-btn {
    font-family: monospace;
    font-size: 0.76rem;
    padding: 0.28em 0.65em;
    background: transparent;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

#pw-reset-btn:hover {
    background: #2a2a2a;
    border-color: #888;
    color: #fff;
}

#pw-reset-status {
    margin-top: 0.3em;
    color: var(--coral);
    font-size: 0.72rem;
    min-height: 1em;
}

/* Placeholder "..." shown while Supabase fetch is in flight */
.todo-loading {
    color: #ccc;
    font-style: italic;
    font-size: 0.82rem;
    list-style: none;
    padding: 0.5em 0;
    border-bottom: none;
}


/* === POCKET PIANO === */

/* Card — rough paper patch, sticker label peeks above the top edge */
.piano-card {
    position: relative;
    background: #fffcf4;
    border: var(--border);
    box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.18);
    padding: 1.3em 1.4em 1.8em;
    max-width: 570px;
    transform: rotate(-1.1deg);
}

/* Handwritten sticker label — replaces the formal section heading */
.piano-card::before {
    content: 'pocket piano';
    position: absolute;
    top: -0.88em;
    left: 1.3em;
    font-family: 'handwriting', sans-serif;
    font-size: 0.76rem;
    font-style: italic;
    background: var(--yellow);
    color: var(--ink);
    padding: 0.15em 0.85em;
    border: 1px solid var(--ink);
    transform: rotate(-1.6deg);
    display: inline-block;
    line-height: 1.7;
}

.piano-tagline {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--ink);
    opacity: 0.45;
    margin: 0 0 1em;
    display: block;
}

.piano-kbd-hint {
    font-style: normal;
    opacity: 0.8;
}

/* Keys row — bottom-aligned so different heights feel like they rest on a surface */
.piano-keys {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    overflow-x: clip;   /* clips horizontal overflow without locking overflow-y */
    padding: 4px 5px 5px; /* top padding gives animated keys room to bounce upward */
}

/* ---- Base key style ---- */
.piano-key {
    --rot: 0deg;
    flex: 1 1 0;
    min-width: 40px;
    font-family: 'handwriting', sans-serif;
    color: white;
    border: var(--border);
    box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.22);
    padding: 0.5em 0.15em 0.65em;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transform: rotate(var(--rot));
    transition: box-shadow 0.08s;
}

.piano-key:hover {
    box-shadow: 3px 6px 0 rgba(0, 0, 0, 0.3);
}

/* ---- Per-key: color · tilt · height · corner shape ---- */
.piano-key:nth-child(1) { --rot: -1.8deg; background: var(--coral);    min-height: 88px; border-radius:  5px  9px 10px  4px; }
.piano-key:nth-child(2) { --rot:  1.4deg; background: var(--sky);      min-height: 82px; border-radius:  9px  5px  7px 11px; }
.piano-key:nth-child(3) { --rot: -0.9deg; background: var(--yellow);   min-height: 90px; border-radius:  6px 11px  5px  8px; color: var(--ink); }
.piano-key:nth-child(4) { --rot:  2.3deg; background: var(--sage);     min-height: 84px; border-radius: 11px  5px  9px  5px; }
.piano-key:nth-child(5) { --rot: -0.6deg; background: var(--lavender); min-height: 86px; border-radius:  5px  7px 11px  8px; }
.piano-key:nth-child(6) { --rot:  1.1deg; background: #e0883a;         min-height: 92px; border-radius:  8px 11px  5px  7px; }
.piano-key:nth-child(7) { --rot: -2.4deg; background: #c9506b;         min-height: 80px; border-radius:  7px  5px  9px 11px; }
.piano-key:nth-child(8) { --rot:  0.6deg; background: var(--coral);    min-height: 85px; border-radius: 11px  9px  5px  6px; }

.piano-key-name {
    font-size: 1.05rem;
    font-weight: bold;
    line-height: 1;
}

.piano-key-shortcut {
    font-size: 0.62rem;
    opacity: 0.6;
    line-height: 1;
}

/* ---- Boing animation on press ---- */
/* var(--rot) resolves per-element, so each key bounces from its own tilt */
@keyframes key-boing {
    0%   { transform: rotate(var(--rot)) scale(1);    filter: brightness(1); }
    20%  { transform: rotate(var(--rot)) scale(0.85); filter: brightness(0.74); }
    58%  { transform: rotate(var(--rot)) scale(1.10); filter: brightness(1.16); }
    100% { transform: rotate(var(--rot)) scale(1);    filter: brightness(1); }
}

.piano-key--pressed {
    animation: key-boing 0.27s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* =====================================================================
   MOBILE — disable free absolute positioning for the todo note.
   The saved desktop xPercent/yPercent are ignored; the note stacks
   naturally in page flow within the nav/rightside grid column.
   ===================================================================== */
@media (max-width: 767px) {
    .todo-note {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 420px;
        transform: rotate(-1.8deg);
        margin: 1em auto;
    }

    #to-do-list {
        padding-top: 0;
    }
}