/* ==========================================
   Southbound — workouts and the week (js/weekView.js)
   Used by Today (index.html) and My Plan (plan.html).
========================================== */

.wk-week-card[hidden], .wk-days [hidden]{ display:none !important; }

/* ---- Today's workout ---- */

.wk-today-cards{ display:flex; flex-direction:column; gap:12px; }
.wk-card{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:18px;
    background:var(--surface-light);
    border:1px solid var(--border);
    border-radius:18px;
}
.wk-card.is-done{ border-color:color-mix(in srgb, var(--green) 35%, transparent); }
.wk-card-top{ display:flex; align-items:flex-start; gap:12px; }
.wk-icon{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:14px;
    background:rgba(255,255,255,.05);
    color:var(--primary);
}
.wk-card-title{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.wk-card-title strong{ font-size:20px; line-height:1.2; color:var(--text); overflow-wrap:anywhere; }
.wk-meta{ display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; color:var(--muted); font-size:13px; font-weight:600; }
.wk-meta .ui-icon{ width:13px; height:13px; color:var(--primary); }
.wk-big{ flex-shrink:0; font:800 30px/1 var(--font-body); color:var(--text); letter-spacing:-.01em; }
.wk-big small{ font-size:15px; font-weight:700; color:var(--text-secondary); }
.wk-detail{ margin:0; color:var(--text); font-size:15.5px; line-height:1.5; overflow-wrap:anywhere; }
.wk-logged{ display:flex; align-items:center; gap:6px; margin:0; color:var(--text-secondary); font-size:13.5px; }
.wk-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.wk-actions .sb-btn{ flex:1 1 140px; }

.wk-done{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:var(--control-height);
    padding:0 18px;
    flex:1 1 140px;
    background:var(--primary);
    border:1px solid var(--primary);
    border-radius:var(--radius-pill);
    color:var(--on-primary);
    font:700 14px/1 var(--font-body);
    cursor:pointer;
}
.wk-done.is-done{ background:var(--success-bg); border-color:color-mix(in srgb, var(--green) 45%, transparent); color:var(--success); }
.wk-done.is-compact{
    flex:0 0 auto;
    width:40px;
    min-height:40px;
    padding:0;
    background:transparent;
    border-color:var(--border);
    color:var(--muted);
}
.wk-done.is-compact.is-done{ background:var(--success-bg); border-color:transparent; color:var(--success); }

.wk-rest-day{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    background:var(--surface-light);
    border-radius:18px;
}
.wk-rest-day > div{ display:flex; flex-direction:column; gap:3px; }
.wk-rest-day strong{ font-size:18px; color:var(--text); }
.wk-rest-day span{ color:var(--text-secondary); font-size:14.5px; line-height:1.5; }
.wk-rest-day a{ color:var(--primary); }

/* NEXT, under today's workout or rest day (js/todayGlance.js): one tap
   to what's after today. */
.wk-next{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:12px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:16px;
    color:var(--text);
    text-decoration:none;
    transition:border-color .15s ease, background-color .15s ease;
}
.wk-next:hover{ border-color:var(--primary); background:rgba(201,173,132,.06); }
.wk-next-label{
    flex-shrink:0;
    min-width:44px;
    color:var(--primary);
    font:800 11px/1 var(--font-body);
    letter-spacing:.12em;
    text-transform:uppercase;
}
.wk-next-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.wk-next-text strong{ font-size:15px; color:var(--text); }
.wk-next-text span{ color:var(--text-secondary); font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.wk-next-chevron{ flex-shrink:0; display:flex; color:var(--muted); }
.wk-next-chevron .ui-icon{ width:16px; height:16px; }

/* ---- The week ---- */

.wk-see-all{ display:inline-flex; align-items:center; gap:2px; color:var(--primary); font-size:14px; font-weight:700; text-decoration:none; }
.wk-summary{ margin:-4px 0 10px; color:var(--text-secondary); font-size:14px; font-weight:600; }
.wk-days{ list-style:none; margin:0; padding:0; }
.wk-day{
    padding:10px 8px;
    border-bottom:1px solid var(--border);
}
.wk-day:last-child{ border-bottom:0; }
.wk-day.is-today{ background:rgba(201,173,132,.1); border-radius:12px; border-bottom-color:transparent; }
.wk-day-head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.wk-day-date{ display:flex; flex-direction:column; color:var(--text); font-size:14px; font-weight:800; line-height:1.2; }
.wk-day-date small{ color:var(--muted); font-size:12px; font-weight:600; }
.wk-today{
    padding:3px 9px;
    border-radius:999px;
    background:var(--primary);
    color:var(--on-primary);
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.wk-rest{ margin:0; color:var(--muted); font-size:14.5px; }
.wk-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.wk-item{ display:flex; align-items:center; gap:10px; min-height:44px; }
.wk-dot{ flex-shrink:0; display:flex; }
.wk-item-text{ flex:1; min-width:0; display:flex; flex-direction:column; color:var(--text); font-size:15px; line-height:1.35; }
.wk-item-text small{ color:var(--text-secondary); font-size:13px; overflow-wrap:anywhere; }
.wk-item-text .wk-logged-inline{ color:var(--muted); }
.wk-item.is-done .wk-item-text > span{ color:var(--text-secondary); }
.wk-missed{
    flex-shrink:0;
    padding:2px 8px;
    border-radius:999px;
    background:color-mix(in srgb, var(--muted) 18%, transparent);
    color:var(--text-secondary);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.wk-status{ display:flex; flex-shrink:0; }
.wk-status.is-done{ color:var(--success); }
/* A workout that didn't happen is neutral, not a warning: the Change button beside it is the way back. */
.wk-status.is-missed{ color:var(--muted); }

/* The Today strip: one line per day. */
.wk-days.is-compact .wk-day{ display:flex; align-items:center; gap:12px; min-height:44px; padding:6px 8px; }
.wk-days.is-compact .wk-day-date{ flex:0 0 40px; }
.wk-day-summary{ flex:1; min-width:0; color:var(--text); font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-day-summary.is-rest{ color:var(--muted); }

/* My Plan: week navigation */
.wk-nav{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.wk-nav-title{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
.wk-nav-title strong{ font-size:16px; color:var(--text); }
.wk-nav-title span{ color:var(--muted); font-size:13px; font-weight:600; }
.wk-this-week{ display:block; margin:0 auto 6px; }
.wk-item-link{ color:var(--text); text-decoration:none; }
.wk-item-link:hover{ color:var(--primary); text-decoration:underline; }
.wk-skipped{
    flex-shrink:0;
    padding:2px 8px;
    border-radius:999px;
    background:var(--surface-light);
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.myplan-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px; }
.myplan-foot .myplan-hint{ margin:0; }

.wk-fuel{ display:flex; align-items:flex-start; gap:6px; margin:6px 0 0; color:var(--text-secondary); font-size:13.5px; line-height:1.4; }
.wk-fuel .ui-icon{ color:var(--primary); margin-top:1px; flex-shrink:0; }
.myplan-foot-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.myplan-coros-hint{ margin:12px 0 0; }

/* A coach plan shown two weeks at a time: the last open week says so. */
.myplan-window{ display:flex; align-items:flex-start; gap:8px; margin:10px 0 0; }
.myplan-window svg{ flex-shrink:0; width:16px; height:16px; margin-top:2px; color:var(--primary); }
.wk-nav .sb-btn-icon:disabled{ opacity:.35; cursor:default; }

/* ---- Changing your week (js/weekChangeDialogs.js) ---- */

.wk-change{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:var(--control-height);
    padding:0 16px;
    background:transparent;
    border:1px solid var(--border);
    border-radius:var(--radius-pill);
    color:var(--text-secondary);
    font:700 14px/1 var(--font-body);
    cursor:pointer;
}
.wk-change:hover{ border-color:var(--primary); color:var(--primary-light); }
.wk-change .ui-icon{ width:18px; height:18px; }
.wk-change.is-compact{ flex:0 0 auto; width:40px; min-height:40px; padding:0; }
.wk-actions .wk-change{ flex:0 0 auto; }
.wk-change-note{ color:var(--muted); font-size:13px; }
.wk-detail .wk-change-note{ font-size:14px; }

.wk-feel{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    width:100%;
    margin-top:10px;
    padding:10px 14px;
    background:transparent;
    border:1px dashed var(--border);
    border-radius:14px;
    color:var(--text);
    font:700 14px/1.3 var(--font-body);
    text-align:left;
    cursor:pointer;
}
.wk-feel:hover{ border-color:var(--primary); }
.wk-feel .ui-icon{ width:16px; height:16px; color:var(--pink); }
.wk-feel span{ color:var(--muted); font-weight:600; }

.wc-dialog{ width:min(480px, calc(100vw - 24px)); }
.wc-dialog [hidden]{ display:none !important; }
.wc-dialog .pw-label{ display:flex; flex-direction:column; gap:6px; color:var(--text); font-size:14px; font-weight:700; }
.wc-dialog .cr-reasons, .cr-dialog .cr-reasons{ display:flex; flex-wrap:wrap; gap:8px; }
.wc-dialog .cr-reasons input, .cr-dialog .cr-reasons input{ position:absolute; opacity:0; pointer-events:none; }
.wc-dialog .cr-reasons span, .cr-dialog .cr-reasons span{
    display:inline-flex; align-items:center; min-height:40px; padding:0 14px;
    border:1px solid var(--border); border-radius:var(--radius-pill);
    background:var(--surface-light); color:var(--text-secondary);
    font-weight:700; font-size:14px; cursor:pointer;
}
.wc-dialog .cr-reasons input:checked + span, .cr-dialog .cr-reasons input:checked + span{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.wc-dialog .cr-reasons input:focus-visible + span, .cr-dialog .cr-reasons input:focus-visible + span{ box-shadow:var(--focus-ring); }
.cr-dialog .pw-label{ display:flex; flex-direction:column; gap:6px; color:var(--text); font-size:14px; font-weight:700; }

.wc-menu{ display:flex; flex-direction:column; gap:8px; }
.wc-menu-row{
    display:flex; align-items:center; gap:12px; width:100%;
    min-height:56px; padding:10px 12px;
    background:var(--surface-light); border:1px solid var(--border); border-radius:14px;
    color:var(--text); text-align:left; cursor:pointer;
}
.wc-menu-row:hover{ border-color:var(--primary); }
.wc-menu-row > .ui-icon{ color:var(--muted); width:16px; height:16px; flex-shrink:0; }
.wc-menu-icon{ display:flex; color:var(--primary); flex-shrink:0; }
.wc-menu-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.wc-menu-text strong{ font-size:15px; }
.wc-menu-text small{ color:var(--text-secondary); font-size:13px; line-height:1.4; }

.wc-days{ display:flex; flex-direction:column; gap:8px; }
.wc-day{
    position:relative; display:flex; align-items:flex-start; gap:10px;
    padding:10px 12px; border:1px solid var(--border); border-radius:14px; cursor:pointer;
}
.wc-day input{ margin-top:3px; accent-color:var(--primary); width:18px; height:18px; flex-shrink:0; }
.wc-day:has(input:checked){ border-color:var(--primary); background:rgba(201,173,132,.07); }
.wc-day.is-blocked{ opacity:.55; cursor:not-allowed; }
.wc-day-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wc-day-text strong{ font-size:15px; }
.wc-day-text small{ color:var(--text-secondary); font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.wc-warn{ margin:0; padding:10px 12px; border-radius:12px; background:var(--warning-bg); color:var(--text); font-size:13.5px; line-height:1.45; }
.wc-warn .ui-icon{ width:14px; height:14px; color:var(--warning); vertical-align:-2px; }

.wc-modes{ display:flex; flex-direction:column; gap:8px; }
.wc-mode{ position:relative; display:block; cursor:pointer; }
.wc-mode input{ position:absolute; opacity:0; pointer-events:none; }
.wc-mode > span{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--border); border-radius:14px; }
.wc-mode strong{ font-size:14.5px; }
.wc-mode small{ color:var(--text-secondary); font-size:13px; line-height:1.4; }
.wc-mode input:checked + span{ border-color:var(--primary); background:rgba(201,173,132,.08); }
.wc-mode input:focus-visible + span{ box-shadow:var(--focus-ring); }

.wc-preview{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.wc-preview li{ display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:12px; background:var(--surface-light); }
.wc-preview-day{ flex:0 0 38px; color:var(--muted); font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; padding-top:2px; }
.wc-preview-text{ flex:1; min-width:0; font-size:14px; line-height:1.45; color:var(--text-secondary); overflow-wrap:anywhere; }
.wc-preview-text .ui-icon{ width:12px; height:12px; vertical-align:-1px; }
.wc-preview-text strong{ color:var(--text); }
.wc-preview-text small{ display:block; color:var(--muted); font-size:12.5px; }
.wc-preview li.is-keep strong{ color:var(--muted); font-weight:600; }
.wc-empty{ margin:0; color:var(--text-secondary); font-size:14px; }

/* A bottom sheet on phones. */
@media (max-width:600px){
    .wc-dialog, .cr-dialog{
        width:100vw; max-width:100vw;
        margin:auto 0 0; border-radius:20px 20px 0 0;
        max-height:88dvh;
    }
    .wc-dialog .sb-dialog-form{ padding:18px 16px calc(18px + env(safe-area-inset-bottom)); }
}

/* ==========================================================
   TODAY'S HABITS (js/todayHabits.js, redesign step 3)
   One tap per habit; the whole row is the button.
========================================================== */
.th-card[hidden], .th-card [hidden]{ display:none !important; }
.th-count{ color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums; }
.th-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.th-row{
    display:flex; align-items:center; gap:12px; width:100%; min-height:48px;
    padding:8px 12px; border:1px solid var(--border); border-radius:14px;
    background:rgba(255,255,255,.03); color:var(--text); font:inherit; text-align:left; cursor:pointer;
}
.th-row:hover{ border-color:color-mix(in srgb, var(--primary) 45%, transparent); }
.th-check{
    flex:0 0 24px; width:24px; height:24px; display:grid; place-items:center;
    border:2px solid var(--muted); border-radius:8px; color:var(--on-primary);
}
.th-row.is-on .th-check{ background:var(--green); border-color:var(--green); }
.th-name{ flex:1 1 auto; min-width:0; font-weight:600; }
.th-row.is-on .th-name{ color:var(--text-secondary); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--text-secondary) 60%, transparent); }
.th-empty{ margin:0; color:var(--text-secondary); }
.th-all{ display:inline-flex; align-items:center; gap:4px; margin-top:12px; color:var(--primary); font-weight:600; text-decoration:none; min-height:32px; }

/* ==========================================================
   DIRECTION A (2026-10-14, .claude/skills/southbound-design):
   lines over boxes. Today's workout sits under a 2px tan rule (sage
   when done) instead of in a box inside the Today card; a mono kicker,
   the name in the display face, the miles big in tan.
========================================================== */
.wk-card{
    padding:14px 0 0;
    background:transparent;
    border:0;
    border-top:2px solid var(--primary);
    border-radius:0;
}
.wk-card.is-done{ border-top-color:var(--green); }
.wk-today-cards{ gap:22px; }
.wk-kicker{
    display:block;
    color:var(--primary);
    font:600 11px/1.3 var(--font-mono);
    letter-spacing:.12em;
    text-transform:uppercase;
}
.wk-kicker .ui-icon{ display:inline-block; width:13px; height:13px; margin-right:6px; vertical-align:-2px; color:var(--kind, var(--primary)); }
.wk-card .wk-actions .wk-change.is-compact{ width:var(--control-height); min-height:var(--control-height); }
.wk-card.is-done .wk-kicker{ color:var(--green); }
.wk-card-title{ gap:6px; }
.wk-card-title strong{
    font:800 30px/0.95 var(--font-display);
    letter-spacing:.01em;
    text-transform:uppercase;
}
.wk-big{
    font:900 44px/0.9 var(--font-display);
    color:var(--primary);
    text-transform:uppercase;
}
.wk-big small{ font:600 13px var(--font-mono); color:var(--text-secondary); letter-spacing:.06em; }
.wk-detail{ color:var(--text-secondary); font-size:15px; }
.wk-done.is-secondary{ background:transparent; border-color:var(--border); color:var(--text); }

.wk-rest-day{
    padding:14px 0 0;
    background:transparent;
    border-top:2px solid var(--border);
    border-radius:0;
}
.wk-rest-day .wk-icon{ display:none; }
.wk-rest-day strong{ font:800 28px/0.95 var(--font-display); text-transform:uppercase; }

.wk-next{
    padding:12px 0;
    border:0;
    border-top:1px solid var(--border);
    border-radius:0;
}
.wk-next:hover{ background:transparent; border-top-color:var(--primary); }
.wk-next-label{ font:600 11px/1 var(--font-mono); letter-spacing:.14em; }
.wk-card .wk-actions .sb-btn, .wk-card .wk-actions .wk-done{ flex:1 1 0; min-width:0; padding-left:10px; padding-right:10px; }

/* Today's habits: lines, not a box per habit (direction A). */
.th-list{ gap:0 18px; }
.th-row{ background:transparent; border:0; border-top:1px solid var(--border); border-radius:0; padding:10px 2px; }
.th-row:hover{ border-top-color:var(--primary); }
.th-check{ border-radius:var(--radius-sm); }
@media (min-width:641px){
    .wk-card .wk-actions .sb-btn, .wk-card .wk-actions .wk-done{ flex:0 1 220px; }
}

/* The week list in direction A: today marked by a tan rule, not a filled box. */
.wk-nav-title strong{ font:800 24px/1 var(--font-display); text-transform:uppercase; letter-spacing:.01em; }
.wk-nav-title span{ font:500 11.5px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.wk-day.is-today{ background:transparent; border-radius:0; border-left:2px solid var(--primary); padding-left:12px; }
.wk-day-date{ font:800 18px/1.05 var(--font-display); text-transform:uppercase; letter-spacing:.02em; }
.wk-day-date small{ font:500 10.5px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.wk-today{ border-radius:var(--radius-sm); font-family:var(--font-mono); }