/* ═══════════════════════════════════════════════════
   AREAS
   ═══════════════════════════════════════════════════ */

/* ── Area badge (used on goal cards, goal detail header, area list rows) ── */
.area-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.area-badge-icon {
    font-size: 12px;
    flex-shrink: 0;
}

/* ── Compact goal label inside project-group headers ── */
.project-group-goal-label {
    padding: 0.1rem 0.4rem;
    font-size: 0.65rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.project-group-goal-label:hover {
    text-decoration: underline;
}

.area-badge--blue   { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.area-badge--green  { background: color-mix(in srgb, var(--green)  15%, transparent); border-color: color-mix(in srgb, var(--green)  40%, transparent); color: var(--green); }
.area-badge--amber  { background: color-mix(in srgb, var(--amber)  15%, transparent); border-color: color-mix(in srgb, var(--amber)  40%, transparent); color: var(--amber); }
.area-badge--red    { background: color-mix(in srgb, #e05c6e       15%, transparent); border-color: color-mix(in srgb, #e05c6e       40%, transparent); color: #e05c6e; }
.area-badge--purple { background: color-mix(in srgb, #9b8ecf       15%, transparent); border-color: color-mix(in srgb, #9b8ecf       40%, transparent); color: #9b8ecf; }
.area-badge--teal   { background: color-mix(in srgb, #4db6ac       15%, transparent); border-color: color-mix(in srgb, #4db6ac       40%, transparent); color: #4db6ac; }

/* ── Goal panel area color tinting ── */
/* Area color tints the background; health color still controls the left border */
.goal-panel--area-blue   { background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); }
.goal-panel--area-green  { background: color-mix(in srgb, var(--green)  6%, var(--bg-card)); }
.goal-panel--area-amber  { background: color-mix(in srgb, var(--amber)  6%, var(--bg-card)); }
.goal-panel--area-red    { background: color-mix(in srgb, #e05c6e       6%, var(--bg-card)); }
.goal-panel--area-purple { background: color-mix(in srgb, #9b8ecf       6%, var(--bg-card)); }
.goal-panel--area-teal   { background: color-mix(in srgb, #4db6ac       6%, var(--bg-card)); }

/* ── Task item area color tinting ── */
/* Subtle background tint + left accent border; color is from the task's goal area */
.task-item--area-blue,
.task-item--area-green,
.task-item--area-amber,
.task-item--area-red,
.task-item--area-purple,
.task-item--area-teal {
    border-left: 2px solid transparent;
}

.task-item--area-blue   { border-left-color: var(--accent); }
.task-item--area-green  { border-left-color: var(--green); }
.task-item--area-amber  { border-left-color: var(--amber); }
.task-item--area-red    { border-left-color: #e05c6e; }
.task-item--area-purple { border-left-color: #9b8ecf; }
.task-item--area-teal   { border-left-color: #4db6ac; }