/* Planning pages: settings, month list, and the month detail view. */
.field { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
@media (max-width: 540px) { .row4 { grid-template-columns: repeat(2, 1fr); } }

.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}
.panel h3 { margin: 0 0 .25rem; }
.panel h4 { margin: .75rem 0 0; font-size: .9rem; color: var(--muted); }

a.month-link { text-decoration: none; color: inherit; display: block; transition: border-color .15s; }
a.month-link:hover { border-color: var(--accent); }

/* Soft budget bar on the month view. */
.budget {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.budget-head { display: flex; justify-content: space-between; align-items: baseline; }
.budget .bar { height: 8px; background: #f0eae6; border-radius: 999px; margin-top: .5rem; overflow: hidden; }
.budget .bar span { display: block; height: 100%; background: #2f7a43; border-radius: 999px; }
.budget.over .bar span { background: var(--accent); }
.over-note { margin: .4rem 0 0; }

.slot-group { margin-bottom: 1rem; }
.slot-group-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.progress { height: 5px; background: #f0eae6; border-radius: 999px; margin-bottom: .5rem; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.slot .sched { margin-left: .4rem; font-weight: 600; color: var(--accent); }

/* Month calendar: per-slot follow-through cards. */
.item.slot.mslot { display: block; }
.mslot-head { display: flex; align-items: center; gap: .5rem; }
.mslot-head .title { font-weight: 600; margin-right: auto; }
.mslot.done { border-left: 3px solid #2f7a43; }
.mslot.skipped { border-left: 3px solid var(--muted); }
.mslot-do { margin-top: .5rem; }
.mslot-do summary { cursor: pointer; font-size: .8rem; color: var(--accent); }
.mslot-do .form { margin-top: .5rem; }
.mslot-result { margin-top: .5rem; display: flex; flex-direction: column; gap: .25rem; }
.mslot-result .notes { color: var(--muted); }
.mslot-result form { margin: 0; }
.mslot-result .rating-set { display: flex; align-items: flex-end; gap: .5rem; }
.mslot-result .rating-set .field { width: 6rem; }

.schedule-bar { display: flex; align-items: flex-end; gap: 1rem; margin: 1rem 0; }
.schedule-bar form { display: flex; align-items: flex-end; gap: .5rem; margin: 0; }
.item.slot { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; }
.item.slot .title { font-weight: 600; margin-right: auto; }

/* Slot detail: candidates + voting. */
.candidate { display: flex; align-items: center; gap: .75rem; }
.candidate.chosen { border-color: var(--accent); background: #fdf6f5; }
.candidate-body { flex: 1; min-width: 0; }
.candidate-actions { display: flex; align-items: center; gap: .75rem; }
.candidate-actions form { margin: 0; }

.vote { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.vote-btn {
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: .8rem; line-height: 1; color: var(--muted);
}
.vote-btn:hover { color: var(--fg); }
.vote-btn.on { color: var(--accent); }
.vote .score { font-weight: 700; font-size: .9rem; min-width: 1.2rem; text-align: center; }
.vote .score.pos { color: #2f7a43; }
.vote .score.neg { color: #b23b30; }

.badge.chosen-badge { background: var(--accent); color: #fff; }
.link-btn.danger { color: var(--muted); }
.link-btn.danger:hover { color: #b23b30; }

.locked-note { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.locked-note form { margin: 0; }

/* Spend report: history table + mix rows. */
table.report {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
table.report th, table.report td { padding: .55rem .75rem; text-align: left; }
table.report thead th { font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--border); }
table.report tbody tr { border-bottom: 1px solid var(--border); }
table.report tbody td.over { color: #b23b30; font-weight: 600; }
table.report tfoot td { font-weight: 700; border-top: 2px solid var(--border); }
table.report a { color: var(--accent); text-decoration: none; }

.mix-row { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; }
.mix-row .cost { margin-left: auto; }

/* Browse: filter bar + status badges. */
.filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 1.5rem; }
.filters .field { width: 9rem; }
.badge.status-open { background: #f0eae6; color: var(--muted); }
.badge.status-locked { background: var(--accent); color: #fff; }
.badge.status-done { background: #e7f1ea; color: #2f7a43; }
.badge.status-skipped { background: #f0eae6; color: var(--muted); }

/* Follow-through: mark done / skip and the recorded result. */
.followup-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.followup-head h3 { margin: 0; }
.followup-head form { margin: 0; }
.followup.done { border-left: 3px solid #2f7a43; }
.followup.skipped { border-left: 3px solid var(--muted); }
.followup-actions { display: flex; align-items: center; gap: 1rem; }

.ratings { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; }
.rating-set { display: flex; align-items: flex-end; gap: .5rem; margin: 0; }
.rating-set .field { width: 7rem; }
.rating-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

/* Suggestions board. */
.suggestion { display: flex; align-items: flex-start; gap: .75rem; }
.suggestion.locked { border-color: var(--accent); background: #fdf6f5; }
.suggestion-body { flex: 1; min-width: 0; }
.suggestion-actions form { margin: 0; }
.comments { margin-top: .5rem; }
.comment { margin: .15rem 0; font-size: .9rem; }
.comment-form { display: flex; gap: .5rem; margin-top: .4rem; }
.comment-form input { flex: 1; min-width: 0; }

/* Mutual accept + lock-in on suggestion cards. */
.accept-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.accept-pill {
    font-size: .75rem; padding: .1rem .5rem; border-radius: 999px;
    border: 1px solid var(--border); color: var(--muted);
}
.accept-pill.yes { border-color: #2f7a43; color: #2f7a43; background: #f0f7f1; }
.accept-btn {
    margin-left: auto; cursor: pointer; font-size: .8rem;
    padding: .25rem .7rem; border-radius: 999px;
    border: 1px solid var(--accent); background: none; color: var(--accent);
}
.accept-btn.on { background: var(--accent); color: #fff; }
.lock-line { margin: .4rem 0; font-size: .85rem; }
.needs-slot { color: #b23b30; }
.needs-slot form { display: inline; margin: 0; }
.day-edit { display: flex; align-items: flex-end; gap: .5rem; margin: .4rem 0; }
.day-edit .field { width: auto; }