/* ==========================================
   Southbound — My Plan (plan.html)
   Builds on css/clients.css (cards, tabs).
========================================== */

.myplan-page [hidden]{ display:none !important; }

.myplan-meta{ color:var(--muted); font-size:13px; font-weight:600; }
.myplan-label{ margin:12px 0 4px; color:var(--text); font-size:13px; font-weight:700; }

/* ---- "Your plan was updated" ---- */

.myplan-notice{
    border-left:3px solid var(--primary);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
}
.myplan-notice-head{ display:flex; align-items:flex-start; gap:12px; }
.myplan-notice-head > div{ display:flex; flex-direction:column; gap:2px; }
.myplan-notice-head strong{ font-size:16px; }
.myplan-notice-icon{
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(201,173,132,.14);
    color:var(--primary);
}
.myplan-note{ margin:4px 0 0; color:var(--text); font-size:15px; line-height:1.55; white-space:pre-line; }
.myplan-changes{ margin:0 0 8px 18px; color:var(--text-secondary); font-size:14px; line-height:1.6; }

/* ---- Big picture ---- */

.myplan-switch{ margin-bottom:14px; overflow-x:auto; }
.myplan-title h2{ margin:0 0 2px; font-size:22px; overflow-wrap:anywhere; }
.myplan-title{ margin-bottom:12px; }
.myplan-facts{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:10px;
    margin:0;
}
.myplan-facts div{
    padding:10px 12px;
    background:var(--surface-light);
    border-radius:12px;
}
.myplan-facts dt{ color:var(--muted); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.myplan-facts dd{ margin:2px 0 0; color:var(--text); font-size:15px; font-weight:700; overflow-wrap:anywhere; }

/* ---- The week: css/week.css ---- */

.myplan-progress{ margin:8px 0 10px; text-align:center; color:var(--text-secondary); font-size:14px; font-weight:600; }
.myplan-hint{ margin-top:12px; }
.myplan-hint a{ color:var(--primary); }

/* ==========================================================
   DIRECTION A (2026-10-14, .claude/skills/southbound-design):
   the plan is one line with its details folded, so the week is on
   the first screen (redesign step 6); facts are lines, not tiles.
========================================================== */
.myplan-overview{ margin:0 0 16px; padding:0 2px 12px; border-bottom:1px solid var(--border); }
.myplan-line{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; color:var(--text-secondary); font-size:14px; line-height:1.4; }
.myplan-line strong{ color:var(--text); font:800 22px/1 var(--font-display); text-transform:uppercase; letter-spacing:.01em; }
.myplan-kicker{ color:var(--primary); font:600 11px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }
.myplan-details{ margin-top:8px; }
.myplan-details summary{ cursor:pointer; color:var(--primary); font-weight:600; font-size:14px; min-height:32px; display:inline-flex; align-items:center; }
.myplan-details .myplan-facts{ display:block; margin-top:6px; }
.myplan-details .myplan-facts div{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; background:transparent; border-radius:0; border-top:1px solid var(--border); }
.myplan-details .myplan-facts dt{ font:600 11px/1.4 var(--font-mono); letter-spacing:.12em; }
.myplan-details .myplan-facts dd{ margin:0; text-align:right; font-weight:600; }
.myplan-progress{ font-size:13.5px; }

/* ==========================================================
   MY PLAN, PREMIUM (redesign step 4, 2026-10-15). The week is a ridge
   (js/weekRidge.js): one peak per day, as tall as its planned miles, done
   days sage, today sand. Sections are hairlines under the heading, not
   boxes. The one raised surface is the coach's update, when there is one
   (the same look as Today's workout card). Scoped to .myplan-page.
   ========================================================== */

.myplan-page .eos-today-eyebrow{ display:none; }
.myplan-page .eos-today-hero::before{ display:none; }

/* The overview: a line with a hairline under it. Plain text labels, not small mono capitals. */
.myplan-page .myplan-overview{ margin:0 0 4px; padding:0 0 18px; border-bottom:1px solid var(--border); }
.myplan-page .myplan-kicker{ font:600 13px/1.3 var(--font-body); letter-spacing:0; text-transform:none; color:var(--text-secondary); }
.myplan-page .myplan-line strong{ font:800 26px/1 var(--font-display); letter-spacing:.01em; text-transform:uppercase; }
.myplan-page .myplan-line{ font-size:15px; }

/* The coach's update: the one raised surface on this page. */
.myplan-page .myplan-notice{
    background:linear-gradient(180deg,var(--surface-light),var(--surface) 58%);
    border:1px solid rgba(236,230,212,.09);
    border-left:1px solid rgba(236,230,212,.09);
    border-radius:30px;
    padding:20px 20px 22px;
    box-shadow:inset 0 1px 0 rgba(255,244,222,.07),0 2px 6px rgba(0,0,0,.26),0 28px 56px -28px rgba(0,0,0,.75);
    margin:0 0 24px;
}
.myplan-page .myplan-notice-icon{ background:rgba(214,185,142,.14); }

/* The week: a hairline section, not a card. */
.myplan-page .myplan-week{
    background:none;
    border:0;
    border-top:1px solid var(--border);
    border-radius:0;
    box-shadow:none;
    padding:22px 0 0;
    margin:24px 0 0;
}
.myplan-page .wk-nav-title strong{ font:800 26px/1 var(--font-display); text-transform:uppercase; letter-spacing:.01em; }
.myplan-page .wk-nav-title span{ font:500 14px/1.3 var(--font-body); letter-spacing:0; text-transform:none; color:var(--text-secondary); }
.myplan-page .myplan-progress{ margin:12px 0 0; font-size:15px; color:var(--text); font-weight:600; text-align:left; }

/* The ridge, as on Today's pictures: sized to the card, the day labels under it. */
.myplan-page .ridge{ margin:18px 0 0; }
.myplan-page .ridge svg{ display:block; width:100%; height:auto; overflow:visible; }
.myplan-page .ridge-days{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); margin-top:8px; text-align:center; }
.myplan-page .ridge-days span{ display:grid; gap:2px; min-width:0; }
.myplan-page .ridge-days b{ font:650 13px/1.2 var(--font-body); color:var(--text); overflow-wrap:anywhere; }
.myplan-page .ridge-days em{ font-style:normal; font:500 12.5px/1.2 var(--font-body); color:var(--text-secondary); }
.myplan-page .ridge-days .now b, .myplan-page .ridge-days .now em{ color:var(--primary-light); }

/* The day list: hairlines between days; today is a soft tinted band. */
.myplan-page .wk-days{ margin-top:18px; border-top:1px solid var(--border); }
.myplan-page .wk-day{ padding:12px 0; border:0; border-bottom:1px solid var(--border); border-radius:0; background:none; }
.myplan-page .wk-day:last-child{ border-bottom:0; }
.myplan-page .wk-day{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:6px 12px; align-items:start; }
.myplan-page .wk-day-head{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:0; }
.myplan-page .wk-items, .myplan-page .wk-rest{ grid-column:2; min-width:0; }
.myplan-page .wk-change{ width:44px; min-width:44px; height:44px; min-height:44px; }
.myplan-page .wk-day.is-today{
    background:linear-gradient(180deg,rgba(214,185,142,.09),rgba(214,185,142,.02));
    border-bottom-color:transparent;
    border-left:0;
    border-radius:16px;
    padding-left:12px;
    padding-right:8px;
    margin:4px 0;
}
.myplan-page .wk-day-date{ font:800 18px/1.05 var(--font-display); text-transform:uppercase; letter-spacing:.02em; color:var(--text); }
.myplan-page .wk-day-date small{ font:500 12.5px/1.4 var(--font-body); letter-spacing:0; text-transform:none; color:var(--text-secondary); }
.myplan-page .wk-rest{ color:var(--text-secondary); }

/* The buttons under the week: quiet outlines, still 44px tall. */
.myplan-page .myplan-foot{ margin-top:14px; }
.myplan-page .myplan-foot-actions .sb-btn{ min-height:44px; }
.myplan-page .myplan-foot-actions .sb-btn-secondary{
    background:linear-gradient(180deg,rgba(236,230,212,.1),rgba(236,230,212,.035));
    border:1px solid rgba(236,230,212,.13);
    box-shadow:inset 0 1px 0 rgba(255,244,222,.08);
    color:var(--text);
}

/* Change requests: a hairline section, plain heading, hairline rows. */
.myplan-page .cr-list{
    background:none;
    border:0;
    border-top:1px solid var(--border);
    border-radius:0;
    box-shadow:none;
    padding:22px 0 0;
    margin:30px 0 0;
}
.myplan-page .cr-list > h2{ font:650 18px/1.25 var(--font-body); letter-spacing:0; text-transform:none; color:var(--text); margin:0 0 8px; }
.myplan-page .cr-item{ padding:12px 0; border-bottom:1px solid var(--border); }
.myplan-page .cr-item:last-child{ border-bottom:0; }

/* Week / Month switch and the month grid (js/monthModel.js). Marks use the earthy status
   tokens: sage done, clay not done, stone ring skipped, tan planned. */
.myplan-page .myplan-view{ display:flex; gap:4px; width:fit-content; max-width:100%; margin:0 0 14px; padding:4px; background:var(--sb-inset-bg); border:1px solid var(--border); border-radius:18px; }
.myplan-page .myplan-view-btn{ min-height:44px; min-width:84px; padding:0 18px; border:0; border-radius:14px; background:transparent; color:var(--text-secondary); font:650 14px/1.2 var(--font-body); cursor:pointer; }
.myplan-page .myplan-view-btn.active{ background:var(--sb-lens-bg); color:var(--on-primary); box-shadow:var(--sb-lens-shadow); }
.myplan-page .mp-month{ margin:14px 0 6px; display:grid; gap:4px; }
.myplan-page .mp-head, .myplan-page .mp-week{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.myplan-page .mp-head span{ text-align:center; font:600 11.5px/1.3 var(--font-mono); letter-spacing:.1em; color:var(--text-secondary); padding-bottom:4px; }
.myplan-page .mp-day{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:52px; padding:6px 0; border:1px solid var(--sb-hairline); border-radius:14px; background:var(--sb-inset-bg); color:var(--text); font:650 15px/1 var(--font-body); cursor:pointer; }
.myplan-page .mp-day.is-out{ opacity:.38; }
.myplan-page .mp-day.is-today{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset; }
.myplan-page .mp-day.is-rest .mp-mark{ visibility:hidden; }
.myplan-page .mp-mark{ display:inline-block; width:9px; height:9px; border-radius:50%; flex:0 0 9px; background:var(--primary); }
.myplan-page .mp-mark.is-done, .myplan-page .is-done .mp-mark{ background:var(--sage); }
.myplan-page .mp-mark.is-missed, .myplan-page .is-missed .mp-mark{ background:var(--orange); }
.myplan-page .mp-mark.is-skipped, .myplan-page .is-skipped .mp-mark{ background:transparent; box-shadow:0 0 0 1.5px var(--stone) inset; }
.myplan-page .mp-mark.is-upcoming, .myplan-page .is-upcoming .mp-mark, .myplan-page .is-today .mp-mark{ background:var(--primary); }
.myplan-page .mp-day.is-today.is-done .mp-mark{ background:var(--sage); }
.myplan-page .mp-legend{ list-style:none; margin:10px 0 4px; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font:500 13px/1.3 var(--font-body); color:var(--text-secondary); }
.myplan-page .mp-legend li{ display:inline-flex; align-items:center; gap:6px; }
@media (max-width:420px){ .myplan-page .mp-month, .myplan-page .mp-head, .myplan-page .mp-week{ gap:3px; } .myplan-page .mp-day{ border-radius:12px; } }