/* ===========================================================================
 * Weekly Goals.
 *
 * Colour comes from the per-client tokens the live feed defines, so this pane
 * is themed by the same single source as everything else and carries no
 * per-brand rules. Fallbacks keep it sane if those are not emitted.
 * =========================================================================== */
.wgV2 {
    --wg-ink:     #131a18;
    --wg-ink-2:   #4e5b57;
    --wg-ink-3:   #6b7975;
    --wg-line:    var(--lf-line, #dfe5e2);
    --wg-surface: #ffffff;
    --wg-raise:   #f4f6f7;
    --wg-accent:  var(--lf-accent, #0c7a55);
    --wg-accent-ink: var(--lf-accent-ink, #ffffff);
    --wg-action:  var(--lf-action, var(--lf-accent, #0c7a55));
    --wg-action-ink: var(--lf-action-ink, var(--lf-accent-ink, #ffffff));

    color: var(--wg-ink);
}

.wgV2 h2 { font-size: 19px; font-weight: 650; margin: 0 0 3px; color: var(--wg-ink); }

/* --- this week ---------------------------------------------------------- */
.wgV2 .wgNow { margin-bottom: 34px; }
.wgV2 .wgNow-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.wgV2 .wgNow-head p { margin: 0; color: var(--wg-ink-3); font-size: 13.5px; }

.wgV2 .wgProgress {
    display: flex; align-items: baseline; gap: 6px; flex: none;
    padding: 7px 14px; border-radius: 999px;
    background: var(--wg-raise); border: 1px solid var(--wg-line);
}
.wgV2 .wgProgress-n { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wgV2 .wgProgress-l { font-size: 12.5px; color: var(--wg-ink-3); }

.wgV2 .wgGrid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.wgV2 .wgCard {
    display: flex; flex-direction: column;
    padding: 20px; background: var(--wg-surface);
    border: 1px solid var(--wg-line); border-radius: 14px;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.wgV2 .wgCard:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--wg-accent) 32%, var(--wg-line));
    box-shadow: 0 12px 26px -18px rgba(19, 26, 24, .5);
}
.wgV2 .wgCard.is-done { background: var(--wg-raise); }

.wgV2 .wgCard-icon {
    width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: color-mix(in srgb, var(--wg-accent) 10%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--wg-accent) 22%, var(--wg-line));
}
.wgV2 .wgCard-icon img { width: 26px; height: 26px; object-fit: contain; }
.wgV2 .wgCard-icon i { font-size: 20px; color: var(--lf-accent-strong, var(--wg-accent)); }

.wgV2 .wgCard-cat {
    margin: 0 0 5px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--wg-ink-3);
}
.wgV2 .wgCard-title { margin: 0 0 7px; font-size: 16px; font-weight: 650; line-height: 1.35; }
.wgV2 .wgCard-desc {
    margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--wg-ink-2);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wgV2 .wgCard-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.wgV2 .wgDone {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13.5px; font-weight: 650; color: #1d6a49;
}

/* --- buttons ------------------------------------------------------------ */
.wgV2 .wgBtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 15px; border-radius: 9px; cursor: pointer; white-space: nowrap;
    font-size: 13.5px; font-weight: 650; line-height: 1.2; text-decoration: none;
    border: 1px solid transparent; transition: filter .15s, border-color .15s, background .15s;
}
.wgV2 .wgBtn--primary {
    background: var(--wg-action); border-color: var(--wg-action); color: var(--wg-action-ink);
}
.wgV2 .wgBtn--primary:hover { filter: brightness(1.08); color: var(--wg-action-ink); text-decoration: none; }
.wgV2 .wgBtn--quiet {
    background: var(--wg-surface); border-color: var(--wg-line); color: var(--wg-ink-2);
}
.wgV2 .wgBtn--quiet:hover { border-color: #b9c6c2; color: var(--wg-ink); }

/* --- empty state -------------------------------------------------------- */
.wgV2 .wgEmpty {
    text-align: center; padding: 52px 24px; margin-bottom: 34px;
    background: var(--wg-surface); border: 1px dashed var(--wg-line); border-radius: 14px;
}
.wgV2 .wgEmpty em {
    display: block; font-size: 28px; margin-bottom: 14px;
    color: var(--wg-accent); opacity: .5;
}
.wgV2 .wgEmpty p { margin: 0 auto; max-width: 52ch; color: var(--wg-ink-2); font-size: 14.5px; }
.wgV2 .wgEmpty-alt { margin-top: 8px !important; color: var(--wg-ink-3) !important; font-size: 13.5px !important; }

/* --- history ------------------------------------------------------------ */
.wgV2 .wgHistory h2 { margin-bottom: 12px; }
.wgV2 .wgWeeks { list-style: none; margin: 0 0 14px; padding: 0; }

.wgV2 .wgWeek {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 13px 16px; border: 1px solid var(--wg-line); border-radius: 11px;
    background: var(--wg-surface); margin-bottom: 8px;
}
.wgV2 .wgWeek.is-now { border-color: color-mix(in srgb, var(--wg-accent) 40%, var(--wg-line)); }
.wgV2 .wgWeek--more { display: none; }

.wgV2 .wgWeek-when { flex: 0 0 190px; min-width: 0; }
.wgV2 .wgWeek-label { display: block; font-size: 14px; font-weight: 650; }
.wgV2 .wgWeek-dates { display: block; font-size: 12px; color: var(--wg-ink-3); }

.wgV2 .wgWeek-goals { flex: none; }
.wgV2 .wgPill {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
    background: var(--wg-raise); color: var(--wg-ink-3);
}
.wgV2 .wgPill.is-full { background: #e4f1ea; color: #1d6a49; }
.wgV2 .wgPill.is-part { background: color-mix(in srgb, var(--wg-accent) 14%, #ffffff); color: var(--lf-accent-strong, var(--wg-accent)); }
.wgV2 .wgPill.is-none { opacity: .7; }

.wgV2 .wgWeek-acts { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.wgV2 .wgAct {
    font-size: 12px; color: var(--wg-ink-2); white-space: nowrap;
    background: var(--wg-raise); border-radius: 6px; padding: 3px 8px;
}
.wgV2 .wgAct--none { background: none; color: var(--wg-ink-3); opacity: .7; padding-left: 0; }

@media (max-width: 640px) {
    .wgV2 .wgWeek-when { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .wgV2 .wgCard { transition: none; }
    .wgV2 .wgCard:hover { transform: none; }
}

/* ===========================================================================
 * The tab strip on this page.
 *
 * The active tab was painting three colours at once, none of them the client's.
 * settings.css:181 gives the link `color:#082eb5` over a `1px solid #ff9146`,
 * and companyPage.css:645 adds a second, thicker `2px solid #082eb5` to the list
 * item underneath. Measured on EXL that produced navy text, an orange hairline
 * and an indigo bar stacked together, on a brand whose accent is neither.
 *
 * One line, in the client's accent, and the stray second border removed. Scoped
 * to this page and weighted to outrank both sources and any theme file loading
 * after them.
 * =========================================================================== */
body .profile-challenge-goal .nav-tabs > li > a,
body .profile-challenge-goal .nav-tabs > li > a:focus,
body .profile-challenge-goal .nav-tabs > li > a:hover {
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--wg-ink-3, #6b7975);
    font-weight: 600;
    transition: color .15s, border-color .15s;
}
body .profile-challenge-goal .nav-tabs > li > a:hover {
    color: var(--lf-accent-strong, var(--lf-accent, #0c7a55));
}
body .profile-challenge-goal .nav-tabs > li.active > a,
body .profile-challenge-goal .nav-tabs > li.active > a:focus,
body .profile-challenge-goal .nav-tabs > li.active > a:hover {
    color: var(--lf-accent-strong, var(--lf-accent, #0c7a55));
    border-bottom-color: var(--lf-accent, #0c7a55);
    background: none;
}
/* the duplicate bar companyPage.css puts on the list item */
body .profile-challenge-goal .nav-tabs > li,
body .profile-challenge-goal .nav-tabs > li.active {
    border-bottom: 0;
}