/* The You tab on Progress (level-up Phase 2, spec 2026-10-26 §6; OPEN_TASKS §738). Standard: the goal board's dark
   glass; cozy: paper + ink under [data-ux-mode="cozy"]. Calm by construction — neutral tints only, never red, no
   "missed". Byte-identical between frontend/ and chinese/. */

/* The tab bar sits under the needs-you strip; the goal board's sections carry .goals-only. */
.prog-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(79, 172, 254, 0.18); }
.prog-tabs [role="tab"] { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 8px 14px; font: inherit; font-weight: 600; color: var(--fg-muted, #b9b9c7); cursor: pointer; }
.prog-tabs [role="tab"][aria-selected="true"] { color: var(--fg, #f2f2f7); border-bottom-color: var(--accent-purple, #9479ff); }
.prog-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent-purple, #9479ff); outline-offset: 2px; }
main.execution-page[data-tab="you"] .goals-only { display: none !important; }

.you-view { display: flex; flex-direction: column; gap: 16px; }
/* Review C1: an author display rule beats the browser's [hidden] — without this the view stayed open on the goals tab. */
.you-view[hidden] { display: none !important; }
.yv-note, .yv-empty, .yv-feelings { margin: 4px 0; font-size: 0.88rem; line-height: 1.45; color: var(--fg-muted, #b9b9c7); }
.yv-area, .yv-milestones { border-radius: 18px; background: rgba(5, 10, 20, 0.65); border: 1px solid rgba(79, 172, 254, 0.18);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.yv-area__head { margin: 0; font-size: 1.05rem; }

.yv-practice { border-radius: 14px; padding: 12px 14px; background: color-mix(in srgb, var(--accent-purple, #9479ff) 8%, transparent);
  display: flex; flex-direction: column; gap: 6px; }
.yv-practice__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.yv-practice__name { margin: 0; font-size: 0.98rem; }
.yv-practice__tiny, .yv-practice__facts { margin: 0; font-size: 0.86rem; line-height: 1.4; }
.yv-practice__tiny { color: var(--fg-muted, #b9b9c7); }
.yv-chip { font-size: 0.75rem; padding: 1px 8px; border-radius: 999px; background: rgba(148, 121, 255, 0.16); }

/* One neutral bar per month — compared only with their own first month. */
.yv-months { display: flex; align-items: flex-end; gap: 8px; overflow-x: auto; padding-top: 2px; }
.yv-month { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 34px; }
.yv-month__track { height: 44px; width: 14px; display: flex; align-items: flex-end; }
.yv-month__bar { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 1px 1px;
  background: color-mix(in srgb, var(--accent-purple, #9479ff) 55%, transparent); }
.yv-month__n, .yv-month__label { font-size: 0.72rem; color: var(--fg-muted, #b9b9c7); white-space: nowrap; }

.yv-trend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; color: var(--fg-muted, #b9b9c7); }
.yv-trend__line { width: 160px; height: 40px; }
.yv-trend__line polyline { stroke: var(--accent-purple, #9479ff); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.yv-move { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; color: var(--fg-muted, #b9b9c7); }
.yv-move__select { font: inherit; font-size: 0.82rem; padding: 3px 6px; border-radius: 8px; }
.yv-move__note { font-size: 0.78rem; }

/* Phase 3 — the hand-back offer, "What next?" and "Builds". The buttons' labels are the consent; nothing is red. */
.yv-offer { margin: 4px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.yv-offer__line, .yv-nextpick__done, .yv-nextpick__empty, .yv-size__line, .yv-size__calm { margin: 0; font-size: 0.88rem;
  line-height: 1.45; }
.yv-offer__actions, .yv-nextpick__item, .yv-size__actions, .yv-size__backrow { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; }
.yv-offer__note, .yv-size__note { margin: 0; font-size: 0.78rem; color: var(--fg-muted, #b9b9c7); }
.yv-btn { appearance: none; font: inherit; font-size: 0.84rem; font-weight: 600; padding: 4px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-purple, #9479ff) 55%, transparent); cursor: pointer;
  background: color-mix(in srgb, var(--accent-purple, #9479ff) 18%, transparent); color: var(--fg, #f2f2f7); }
.yv-btn--quiet { background: none; color: var(--fg-muted, #b9b9c7); }
.yv-btn:disabled { opacity: 0.6; cursor: default; }
.yv-btn:focus-visible { outline: 2px solid var(--accent-purple, #9479ff); outline-offset: 2px; }
/* Phase 3 (3.2) — step up when steady, step back in one tap. */
.yv-size-wrap { margin: 2px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.yv-size { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.yv-size__label { font-size: 0.8rem; color: var(--fg-muted, #b9b9c7); }
.yv-size__text { font: inherit; font-size: 0.88rem; width: 100%; max-width: 32rem; box-sizing: border-box; padding: 6px 10px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent-purple, #9479ff) 40%, transparent);
  background: transparent; color: inherit; }
.yv-size__text:focus-visible { outline: 2px solid var(--accent-purple, #9479ff); outline-offset: 2px; }
.yv-nextpick { scroll-margin-top: 96px; }                /* clears the fixed page header when brought into view */
.yv-nextpick:focus:not(:focus-visible) { outline: none; }
.yv-nextpick { border-radius: 18px; background: rgba(5, 10, 20, 0.65); border: 1px solid rgba(79, 172, 254, 0.18);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.yv-nextpick__head { margin: 0; font-size: 1rem; }
.yv-nextpick__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.yv-nextpick__name { font-size: 0.9rem; }
.yv-nextpick__link { color: inherit; text-decoration: underline; }

.yv-abilities__head { margin: 2px 0 0; font-size: 0.86rem; color: var(--fg-muted, #b9b9c7); }
.yv-abilities__list, .yv-milestones__list, .yv-next__list { margin: 2px 0 0; padding-left: 18px; font-size: 0.88rem; line-height: 1.5; }
.yv-milestones__date { margin-left: 8px; font-size: 0.78rem; color: var(--fg-muted, #b9b9c7); }
.yv-next summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }

[data-ux-mode="cozy"] .yv-area, [data-ux-mode="cozy"] .yv-milestones { background: var(--cozy-paper-elevated, #fffbf2) !important;
  border-color: var(--cozy-gold-soft, rgba(182, 151, 99, 0.32)) !important; box-shadow: 0 6px 18px var(--cozy-warm-shadow, rgba(182, 151, 99, 0.18)); }
[data-ux-mode="cozy"] .yv-area__head, [data-ux-mode="cozy"] .yv-practice__name, [data-ux-mode="cozy"] .yv-practice__facts,
[data-ux-mode="cozy"] .yv-abilities__list, [data-ux-mode="cozy"] .yv-milestones__list, [data-ux-mode="cozy"] .yv-next summary,
[data-ux-mode="cozy"] .prog-tabs [role="tab"][aria-selected="true"] { color: var(--cozy-ink, #2c2418) !important; }
[data-ux-mode="cozy"] .yv-note, [data-ux-mode="cozy"] .yv-empty, [data-ux-mode="cozy"] .yv-feelings, [data-ux-mode="cozy"] .yv-practice__tiny,
[data-ux-mode="cozy"] .yv-month__n, [data-ux-mode="cozy"] .yv-month__label, [data-ux-mode="cozy"] .yv-trend, [data-ux-mode="cozy"] .yv-move,
[data-ux-mode="cozy"] .yv-abilities__head, [data-ux-mode="cozy"] .yv-milestones__date,
[data-ux-mode="cozy"] .prog-tabs [role="tab"] { color: var(--cozy-ink-muted, #5b4f3a) !important; }
[data-ux-mode="cozy"] .yv-practice { background: var(--cozy-paper, #fdf6e3); }
[data-ux-mode="cozy"] .yv-nextpick { background: var(--cozy-paper-elevated, #fffbf2) !important;
  border-color: var(--cozy-gold-soft, rgba(182, 151, 99, 0.32)) !important; }
[data-ux-mode="cozy"] .yv-btn, [data-ux-mode="cozy"] .yv-nextpick, [data-ux-mode="cozy"] .yv-offer__line,
[data-ux-mode="cozy"] .yv-nextpick__head, [data-ux-mode="cozy"] .yv-size__line, [data-ux-mode="cozy"] .yv-size__calm,
[data-ux-mode="cozy"] .yv-size__text { color: var(--cozy-ink, #2c2418) !important; }
[data-ux-mode="cozy"] .yv-btn--quiet, [data-ux-mode="cozy"] .yv-offer__note, [data-ux-mode="cozy"] .yv-size__note,
[data-ux-mode="cozy"] .yv-size__label { color: var(--cozy-ink-muted, #5b4f3a) !important; }
[data-ux-mode="cozy"] .yv-size__text { background: var(--cozy-paper-elevated, #fffbf2);
  border-color: var(--cozy-gold-soft, rgba(182, 151, 99, 0.32)); }

@media (max-width: 768px) {
  .prog-tabs [role="tab"], .yv-move__select, .yv-next summary, .yv-btn, .yv-size__text { min-height: 44px; }   /* touch floor (pitfall 25) */
  .yv-nextpick__link { display: inline-flex; align-items: center; min-height: 44px; }
  .yv-area, .yv-milestones { padding: 14px; }
}