/* goal-panel.css — minimal styling for the Goal panel's panel-specific bits.
   Structure/chrome come from the shared panel + .report-tab / .report-weekly-*
   classes; this file only styles the Current-goal line, the Activity rows, and the
   This-Week grid. No bespoke panel chrome. See SPEC-goal-panel-and-per-goal-boosts.md. */

/* ---- Today: Current goal ---- */
.goal-current {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 16px;     /* (#1) gap above Current Goal */
    margin-bottom: 24px;  /* (#2) gap above Pursue Goal button */
}
.goal-current-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.goal-current-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--accent-color);
    line-height: 1.2;
}

/* The Pursue Goal button reuses .score-pursue-goal-btn (health-score.css). Here it's
   always shown (not today-gated like the Score panel's copy) and given bottom spacing. */
#goal-panel-pursue-btn {
    display: block;
    margin: 0 0 24px;     /* (#3) gap below the button, above the divider */
}

/* (#3) Divider in the gap above Activity — matches the 1px line under each
   activity row (.goal-activity-row border-bottom). */
.goal-section-divider {
    border: 0;
    border-top: 1px solid var(--box-border, rgba(255, 255, 255, 0.08));
    margin: 0 0 24px;     /* gap between the divider and Activity */
}

/* ---- Today: Activity list ----
   Header uses the shared .stage-section-label (left-aligned, like the score/food
   "Log Activity" headers). Rows are LEFT-aligned "Label (count)" together — not
   label-left/count-right. */
.goal-activity-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--box-border, rgba(255, 255, 255, 0.08));
}
.goal-activity-label {
    color: var(--text-main);
    font-size: 15px;
}
.goal-activity-count {
    color: var(--accent-color);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.goal-activity-empty {
    color: var(--text-muted);
    font-size: 14px;
    padding: 8px 2px;
}

/* ---- This Week: per-goal × 7-day grid ---- */
.goal-week-grid {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.goal-week-row {
    display: grid;
    grid-template-columns: minmax(96px, 1.4fr) repeat(7, 1fr);
    align-items: center;
    gap: 4px;
}
.goal-week-label {
    font-size: 13px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.goal-week-head .goal-week-dow {
    color: var(--text-muted);
    font-size: 11px;
}
.goal-week-cell {
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    padding: 6px 0;
    border-radius: 6px;
    background: transparent;
}
.goal-week-cell--on {
    color: var(--accent-color);
    font-weight: 600;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
}