/* --- Global & Layout --- */
body {
    margin: 0;
    background-color: #F7E5AD;
    font-family: sans-serif;
    position: relative;
    min-height: 100vh;
}

main { padding: 0 10px 40px; }

/* Decorative Elements: Screws & Icons */
.screw, .title img { position: absolute; }
.screw { width: 40px; height: 35px; z-index: -1; }
.title img { width: 45px; height: auto; top: 50%; transform: translateY(-50%); }

/* Corner Pins */
.top-left     { top: 15px; left: 15px; }
.top-right    { top: 15px; right: 15px; }
.bottom-left  { bottom: 15px; left: 15px; }
.bottom-right { bottom: 15px; right: 15px; }

/* Title + lines */
.title {
    width: 100%;
    text-align: center;
    padding: 25px 0;
    font-size: 3rem;
    margin-top: 30px;
    font-weight: bold;
    color: white;
    position: relative;
}

/* TOP & BOTTOM LINES Shared */
.title::before, .title::after, .title span::before, .title span::after {
    content: "";
    position: absolute;
    height: 3px;
    background: white;
    border-radius: 2px;
}

/* Specific Line Placements */
.title::before { left: 0; width: 90%; top: 0; }
.title::after { left: 0; width: 85%; top: 7px; }
.title span::before { right: 0; width: 90%; bottom: 0; }
.title span::after { right: 0; width: 85%; bottom: 7px; }

/* Big rectangle box */
.rounded-box {
    position: relative;
    width: 80vw;
    min-height: 60vh;
    background-color: #F0D26C;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    padding: 20px;
    color: #5a4a1f;
    font-size: 1.5rem;
    margin: 40px auto 0;
    box-sizing: border-box;
}

/* Nav & Buttons Shared Style */
.nav1 a, .nav2 button, .secondary-btn {
    text-decoration: none;
    background: #f9e8a6;
    color: #5a4a1f;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.nav1 a, .nav2 button { padding: 8px 14px; font-size: 0.9rem; }

.nav1 { display: flex; gap: 10px; margin-bottom: 15px; }
.nav1 a:hover, .nav2 button:hover { background: #E3D99A; }

.nav-container { position: relative; }
.nav2 { position: absolute; top: 0; right: 0; display: flex; gap: 10px; }

/* Tasks */
#task-list, #completed-list, #deleted-list { list-style: none; padding: 0; margin: 0; }

/* Updated Task Container */
.task {
    background: #F0D26C;
    padding: 10px 15px; /* Slightly more padding for multi-line comfort */
    border-radius: 12px;
    margin-bottom: 8px;
    font-size: 1.2rem;
    color: #5a4a1f;
    display: flex;
    align-items: center; /* This keeps the bullet centered vertically even if text grows */
    gap: 12px;
    word-break: break-word; /* Prevents long single words from breaking layout */
}

/* Updated Editable Area */
.editable {
    flex: 1;
    min-height: 24px;
    line-height: 1.4; /* Increased slightly for better readability on multiple lines */
    cursor: text;
    /* Removed 'display: flex' and 'align-items' to allow natural text wrapping */
    padding: 5px 0;
    white-space: pre-wrap;
    overflow-wrap: break-word; /* Ensures long strings wrap */
}
.editable:focus { outline: none; }
.editable:empty::before {
    content: "Type here...";
    color: #bfae7a;
    opacity: 0.7;
    pointer-events: none;
}

/* Flag circle */
.flag {
    width: 20px;
    height: 20px;
    border: 3px solid #c28a00;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s;
    transform-origin: center;
    display: inline-block; 
}

.flag:hover {
    transform: scale(1.25);
    filter: brightness(1.1);
    z-index: 10;
}

/* Secondary Actions */
.secondary-btn {
    padding: 4px 10px;
    font-size: 0.8rem;
    margin-left: 8px;
}

.clear-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ff4d4d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 10;
    transition: background 0.2s;
}
.clear-btn:hover { background: #cc0000; }

.icon-left { left: 20px; }
.icon-right { right: 20px; }

/* Container Grid */
.post-it-mode {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

/* The Square */
/* The Square */
.post-it-note {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
    overflow: hidden; /*Cut off reminder if too long*/
    word-break: break-word;
}


.post-it-note span {
    display: -webkit-box;
    -webkit-line-clamp: 6; /* Limits to 6 lines depending on font size */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
    max-height: 100%;
}

.post-it-note .flag { position: absolute; top: 12px; left: 12px; }
.post-it-note .secondary-btn, .post-it-note .icon-btn { display: none !important; }

/* Neon Colors */
.neon-yellow { background-color: #faff00 !important; color: #333; }
.neon-pink   { background-color: #ff00ff !important; color: #fff; }
.neon-green  { background-color: #39ff14 !important; color: #333; }
.neon-blue   { background-color: #00f2ff !important; color: #333; }

#start-help {
    position: absolute;
    top: 36px;
    right: 100%;
    width: 140px;
    margin-right: 40px; 
    padding: 25px 15px;
    /*Cloud Body */
    background: #fff;
    color: black;
    font-weight: bold;
    text-align: center;
    font-size: 0.9rem;
    border-radius: 50%; /*oval shape*/
    box-shadow: 
        -25px -15px 0 -5px #fff,
        25px -15px 0 -5px #fff,
        -20px 15px 0 -8px #fff,
        20px 15px 0 -8px #fff,
        -25px -15px 0 -2px #5a4a1f, 
        25px -15px 0 -2px #5a4a1f, 
        -20px 15px 0 -5px #5a4a1f, 
        20px 15px 0 -5px #5a4a1f;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 10;
}

.hide-cloud {
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    border-color: transparent !important;
}

/* While dragging, the original spot looks faint */
.dragging {
    opacity: 0.2;
    background: #d4bc6a !important;
}

/* Make sure the list behaves as a vertical column in priority mode */
#task-list.priority-mode {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* This allows the whole row to be the "handle" */
.priority-mode .task {
    cursor: move;
    transition: transform 0.1s ease; /* Makes the "pushing" look smoother */
}

.drag-handle {
    margin-right: 10px;
    color: #8a763a;
}