/* ── Sidebar ── */
/* Separated from the page by elevation and a fold rather than by a drawn 1px
   line. rtl.css mirrors this to the other side. */
.sidebar {
    grid-area: sidebar;
    box-shadow: 1px 0 0 var(--seam), 6px 0 26px var(--shadow-sm);
    background: var(--panel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Token counter */
.token-panel {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--seam);
    background: var(--token-bg);
}

.token-label {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.token-main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.token-count {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    font-weight: 300;
    color: var(--gold);
    line-height: 1;
    text-shadow: 0 0 18px rgba(221,168,120,0.4);
    transition: all 0.3s;
}
.token-count.bump { animation: countBump 0.4s ease; }

@keyframes countBump {
    0%  { transform: scale(1); }
    40% { transform: scale(1.22); color: #f8c898; }
    100%{ transform: scale(1); }
}

.token-unit {
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.token-total {
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.08em;
}
.token-total span { color: var(--text); }

/* Tasks */
.tasks-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}
.tasks-wrap::-webkit-scrollbar { width: 3px; }
.tasks-wrap::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 2px; }

.section-label {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 0.65rem;
}
.task-count-badge {
    margin-left: 0.45rem;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    opacity: 0.45;
    font-weight: 400;
    text-transform: none;
}

@keyframes sparkle-fly {
    0%   { transform: translate(-50%,-50%) translate(0,0) scale(1); opacity: 1; }
    100% { transform: translate(-50%,-50%) translate(var(--sx),var(--sy)) scale(0); opacity: 0; }
}
.sparkle-p {
    position: fixed; pointer-events: none; z-index: 9999;
    font-size: 0.85rem; color: var(--gold);
    animation: sparkle-fly 0.75s ease-out forwards;
    will-change: transform, opacity;
}

.task-list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }

.task-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    border: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}
.task-item:hover { background: var(--wash); border-color: var(--border); }
.task-item.done  { opacity: 0.42; }

.task-check {
    width: 14px; height: 14px;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
}
.task-item:not(.done) .task-check:hover { border-color: var(--gold); background: rgba(221,168,120,0.14); }
.task-item.done .task-check { background: var(--gold); border-color: var(--gold); }
.task-check::after {
    content: ''; display: none;
    width: 4px; height: 7px;
    border-right: 1.5px solid var(--bg);
    border-bottom: 1.5px solid var(--bg);
    transform: rotate(45deg) translate(-1px, -1px);
}
.task-item.done .task-check::after { display: block; }

.task-icon {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0px;
    width: 1.4rem;
    text-align: center;
    line-height: 1.3;
}

.task-text {
    flex: 1;
    font-size: 0.88rem;
    margin-left: 0.35rem;
    line-height: 1.45;
    color: var(--text);
    min-width: 0;
}
.task-item.done .task-text { color: var(--muted); }
/* Struck through only when it is actually finished. A checked ritual is done for
   today and back tomorrow, the way it keeps its Edit button below. */
.task-item.done:not(.daily) .task-text { text-decoration: line-through; }

.task-del, .task-edit {
    opacity: 0;
    background: none; border: none;
    cursor: pointer;
    font-size: 0.72rem;
    padding: 1px 4px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 1px;
    transition: opacity 0.15s;
}
.task-del  { color: var(--danger); }
.task-edit { color: var(--muted); }
.task-item:hover .task-del  { opacity: 0.6; }
.task-item:hover .task-edit { opacity: 0.5; }
.task-del:hover  { opacity: 1 !important; }
.task-edit:hover { opacity: 1 !important; color: var(--accent); }
.task-del.armed  { opacity: 1 !important; color: var(--gold); font-size: 0.7rem; letter-spacing: 0.04em; }
.task-check.armed { outline: 2px solid var(--gold); border-radius: 4px; opacity: 1 !important; }
/* Collapsing it shifts every pip in the row into its slot, and a checked daily
   stays in the list where that shows. It also still needs its menu — unchecking
   to reach Edit would rewind the chain. */
.task-item.done:not(.daily) .task-edit { display: none; }

/* ── Frog Pond ── */
.frog-pond-header {
    background: linear-gradient(90deg, var(--frog-wash), transparent);
    border-bottom-color: var(--frog-line) !important;
    margin-top: 0 !important;
}
.frog-pond-header .section-header-label { color: var(--frog-ink); letter-spacing: 0.06em; }

/* ── Daily Manifest ── */
.manifest-header {
    background: linear-gradient(90deg, rgba(230,180,60,0.12), transparent);
    border-bottom-color: rgba(230,190,80,0.3) !important;
    margin-top: 0 !important;
}
.manifest-header .section-header-label { color: var(--danger); letter-spacing: 0.06em; }

/* ── Rituals ── blossom pink on the label, over the gold wash of a counting chain. */
.rituals-header {
    background: linear-gradient(90deg, var(--gold-wash), transparent);
    border-bottom-color: var(--gold-line-2) !important;
    margin-top: 0 !important;
}
.rituals-header .section-header-label { color: var(--ritual-ink); letter-spacing: 0.06em; }

/* One rule closing the pinned block off from the list, in no group's colour. */
.pinned-divider {
    list-style: none;
    border-top: 1px dashed var(--seam);
    margin: 0.4rem 0 0.55rem;
    padding: 0;
    height: 0;
}

/* ── Section headers in task list ── */
.task-item.section-header-item {
    padding: 0.55rem 0.3rem 0.2rem;
    border: none;
    border-radius: 0;
    background: transparent !important;
    margin-top: 0.3rem;
    align-items: center;
}
.task-item.section-header-item:first-child { margin-top: 0; }
.section-header-label {
    flex: 1; min-width: 0;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.section-header-input {
    flex: 1; min-width: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--accent);
    border-radius: 0;
    padding: 0 0.15rem;
    color: var(--accent);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    outline: none;
}
.section-task-count {
    font-size: 0.6rem;
    color: var(--muted);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    margin-left: 0.25rem;
    opacity: 0.7;
}
.section-toggle-btn {
    background: none; border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
    flex-shrink: 0;
    line-height: 1;
    opacity: 0.45;
    transition: opacity 0.15s, color 0.15s;
}
.task-item.section-header-item:hover .section-toggle-btn { opacity: 0.8; }
.section-toggle-btn:hover { opacity: 1 !important; color: var(--accent); }
.task-item.section-header-item.active {
    box-shadow: inset 2px 0 0 var(--accent);
    background: var(--accent-wash) !important;
}
.task-item.section-header-item.active .section-header-label { color: var(--cream); }

/* ── Daily task visual indicator ── */
/* The chain itself, resting at 0. Muted while there is nothing to show, gold once
   there is — so a run reads as earned and losing one reads as losing something. */
.task-daily-pip {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    opacity: 0.55;
    flex-shrink: 0;
    /* The row aligns to the top, so a shorter line box rides above the text
       instead of sitting in it. Match the task text's own (0.88rem x 1.45) and
       the two centre on each other. */
    line-height: 1.276rem;
    letter-spacing: 0.02em;
    min-width: 0.75rem;
    text-align: center;
    pointer-events: none;
}
/* pointer-events is inherited, and the pip switches it off — a live count has a
   tooltip worth reading, so it takes the hover back. */
.task-daily-pip.counting { color: var(--gold); opacity: 0.9; pointer-events: auto; }
.task-daily-pip.bump { animation: countBump 0.4s ease; display: inline-block; }

/* Tinted, but no more persistent than any other row's — the pip is the daily's
   marker now, and a pencil parked at rest just competes with it. */
.task-item.daily .task-edit  { color: var(--accent); }
.task-item.daily:hover .task-edit { opacity: 1 !important; }

.task-item.frog .task-text {
    color: #a8f0a8;
    background: linear-gradient(180deg, #a8f0a8, #e8f4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Those two stops are near-white — legible over navy, gone over cream. Same
   gradient, walked down to the theme's own frog ink. background-image, not the
   background shorthand: the shorthand would reset background-clip off text and
   paint the box instead of the letters. */
body.theme-cream .task-item.frog .task-text {
    color: var(--frog-ink);
    background-image: linear-gradient(180deg, var(--frog-ink), var(--gold));
}
.task-frog-pip { font-size: 0.82rem; opacity: 0.75; flex-shrink: 0; line-height: 1; pointer-events: none; margin-left: -3px; }
.task-menu-item.frog-on { color: #6dbb6d; }

.task-item.manifest .task-text { color: var(--text); }
.task-manifest-pip { font-size: 0.82rem; opacity: 0.75; flex-shrink: 0; line-height: 1; pointer-events: none; }
.task-menu-item.manifest-on { color: var(--gold); }

/* ── Task options floating menu ── */
/* Shell and rows are .floating-menu / .menu-item (static/css/components.css);
   only the state colours below are task-specific. */
.task-menu-item.daily-on { color: var(--accent); }

/* ── Completed sub-section ── */
.completed-section-header {
    margin-top: 0.7rem;
    cursor: default;
}
.completed-section-header .section-header-label {
    color: var(--muted);
    cursor: default;
    letter-spacing: 0.14em;
}
.add-section-row {
    padding: 0.3rem 1.25rem 0.6rem;
    border-top: none;
}
.add-section-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    transition: color 0.15s;
}
.add-section-btn:hover { color: var(--accent); }

.task-edit-input {
    flex: 1; min-width: 0;
    background: var(--panel2);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    color: var(--cream);
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    line-height: 1.45;
}

.add-task {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--seam);
    position: relative;
}
.add-task input {
    width: 100%;
    background: var(--input-dark);
    border: none;
    border-radius: 10px;
    padding: 0.5rem 2.6rem 0.5rem 0.7rem; /* right padding clears the nested button */
    color: var(--cream);
    font-family: 'Nunito', sans-serif;
    font-size: 0.85rem;
    outline: none;
    transition: background 0.18s;
}
.add-task input:focus { background: var(--panel2); }
.add-task input::placeholder { color: var(--muted); }
body.theme-espresso .add-task input { background: var(--player-bg); }
.add-task button {
    position: absolute;
    right: calc(1.25rem + 5px);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    width: 32px; height: 32px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.18s, border-color 0.18s;
    color: var(--accent);
}
.add-task button svg { width: 15px; height: 15px; }
.add-task button:hover:not(:disabled) {
    background: var(--accent-wash);
    border-color: var(--accent);
}
.add-task button:disabled { opacity: 0.5; cursor: not-allowed; }