/* Dashboard redesign, WEB ONLY (docs/dashboard-redesign-spec.md).
 *
 * EVERY rule in this file sits under html[data-shell="v3"], an attribute only
 * static/dashboard-v3.js sets, and that file never sets it inside the iOS or
 * Android app. The one exception is the :root block, which only DEFINES
 * custom properties under the --y3- prefix and so changes nothing by itself.
 * tests/test_dashboard_v3_shell.py fails the build on a rule that breaks
 * either half of that sentence.
 *
 * EVERY RAIL RULE GOES THROUGH #sidebar. views.css styles the sidebar with
 * id selectors (`[data-ui="v2"] #sidebar { padding: 0 14px 20px }`, and its
 * .sb-user / .sb-avatar children), and an id outranks any number of classes.
 * The first version here was class-based, lost the cascade, and drew every
 * icon 14 px right of center inside the 64 px rail. The test refuses a
 * class-based rail selector now.
 *
 * The rail is today's #sidebar, restyled: same element, same ids, same gates
 * (#sb-workout-plan and #sb-nyrr still ship hidden and are opened by their own
 * code). At 768 px and under nothing here applies, so the phone drawer and the
 * bottom bar are untouched.
 */

:root {
  /* Brand. --y3-teal carries NO text: ring, bars, dots. Text on light, and
     fills under white text, use --y3-teal-strong (5.26:1; the lighter teal
     is 3.06:1 under white and fails the 4.5:1 rule). */
  --y3-teal:          #0FA68C;
  --y3-teal-strong:   #0B7A67;
  --y3-teal-hover:    #0C8A74;

  --y3-app-bg:        #E8F3EF;
  --y3-surface:       #FFFFFF;
  --y3-surface-2:     #F1F8F5;
  --y3-border:        #E5EEEA;
  --y3-border-tint:   #CFE6DD;

  --y3-ink:           #0F1B17;
  --y3-ink-secondary: #54635E;
  --y3-ink-muted:     #5E6E68;

  --y3-amber:         #F2A24A;
  --y3-amber-ink:     #8A5615;
  --y3-coral:         #F26B5E;
  --y3-coral-ink:     #B4453A;
  --y3-indigo:        #5B7CFA;
  --y3-lavender:      #9D7BFB;
  --y3-aqua:          #3FC5D6;

  --y3-r-sm: 8px;
  --y3-r-md: 12px;
  --y3-r-lg: 16px;
  --y3-r-xl: 20px;
  --y3-r-full: 999px;

  --y3-shadow-sm: 0 1px 2px rgba(15,27,23,0.04);
  --y3-shadow-md: 0 4px 16px rgba(15,27,23,0.06), 0 1px 3px rgba(15,27,23,0.04);
  --y3-shadow-lg: 0 12px 32px rgba(15,27,23,0.10);

  --y3-fast: 120ms;
  --y3-base: 200ms;
  --y3-slow: 320ms;
  --y3-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --y3-rail-w: 64px;
  --y3-rail-open-w: 236px;
}

@media (min-width: 769px) {

  /* ── Shell ─────────────────────────────────────────────────────────── */
  html[data-shell="v3"] .desktop-app {
    background: var(--y3-app-bg);
  }
  html[data-shell="v3"] .desk-main {
    margin-left: var(--y3-rail-w);
    background: var(--y3-app-bg);
    transition: margin-left var(--y3-base) var(--y3-ease);
  }
  html[data-shell="v3"][data-rail="pinned"] .desk-main {
    margin-left: var(--y3-rail-open-w);
  }

  /* ── Rail: the sidebar, collapsed ──────────────────────────────────── */
  /* z-index 750: above Leaflet's panes (up to 700), below the quick-add "+"
     (800) and every in-app modal. It lives inside .desktop-app, so every
     overlay outside the shell covers it for free. */
  html[data-shell="v3"] #sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 750;
    width: var(--y3-rail-w);
    padding: 12px 0 14px;
    gap: 6px;
    background: var(--y3-app-bg);
    border-right: 1px solid var(--y3-border);
    overflow-x: hidden;
    overflow-y: auto;
    /* A scrollbar inside 64 px would push the icons off center. The rail still
       scrolls on a short window; it just does not draw the bar. */
    scrollbar-width: none;
    transition: width var(--y3-base) var(--y3-ease),
                box-shadow var(--y3-base) var(--y3-ease),
                background var(--y3-fast) var(--y3-ease);
  }

  html[data-shell="v3"] #sidebar .sb-logo {
    height: 32px;
    padding: 0 16px;
    margin: 0 0 10px;
    gap: 10px;
    border-bottom: none;
    flex-shrink: 0;
  }
  html[data-shell="v3"] #sidebar .sb-logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  html[data-shell="v3"] #sidebar .sb-logo-name {
    display: none;
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] #sidebar .sb-nav {
    padding: 0 12px;
    gap: 6px;
  }
  /* font-size: 0 hides the label, which is a bare text node and cannot be
     selected. The icon keeps an explicit pixel size so it survives. */
  html[data-shell="v3"] #sidebar .sb-item {
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    border-radius: var(--y3-r-md);
    background: transparent;
    box-shadow: none;
    color: var(--y3-ink-muted);
    font-size: 0;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--y3-fast) var(--y3-ease), color var(--y3-fast) var(--y3-ease);
  }
  html[data-shell="v3"] #sidebar .sb-item .sb-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    color: inherit;
  }
  html[data-shell="v3"] #sidebar .sb-item .sb-icon svg {
    width: 19px;
    height: 19px;
  }
  html[data-shell="v3"] #sidebar .sb-item:not(.sb-active):hover {
    background: var(--y3-surface-2);
    color: var(--y3-ink);
  }
  html[data-shell="v3"] #sidebar .sb-item.sb-active {
    background: var(--y3-surface-2);
    color: var(--y3-teal-strong);
    box-shadow: none;
  }
  html[data-shell="v3"] #sidebar .sb-item.sb-active .sb-icon {
    color: var(--y3-teal-strong);
  }
  html[data-shell="v3"] #sidebar .sb-item:focus-visible,
  html[data-shell="v3"] #sidebar .sb-pin:focus-visible,
  html[data-shell="v3"] .top-nav-ask:focus-visible,
  html[data-shell="v3"] .top-nav-sync:focus-visible {
    outline: 2px solid var(--y3-teal-strong);
    outline-offset: 2px;
  }

  /* The connected-sources list leaves the shell (D11). It lives on the
     dashboard's Connected card and on the Sources screen. */
  html[data-shell="v3"] #sidebar .sb-sources-label,
  html[data-shell="v3"] #sidebar .sb-sources {
    display: none;
  }

  /* Foot: the avatar alone while collapsed. */
  html[data-shell="v3"] #sidebar .sb-bottom {
    margin-top: auto;
    padding: 10px 12px 0;
    border-top: none;
    background: transparent;
    position: static;
  }
  html[data-shell="v3"] #sidebar .sb-user {
    margin: 0;
    padding: 4px;
    gap: 10px;
    border: none;
    border-radius: var(--y3-r-md);
    background: transparent;
    box-shadow: none;
    justify-content: center;
  }
  html[data-shell="v3"] #sidebar .sb-user > div:not(.sb-avatar),
  html[data-shell="v3"] #sidebar .sb-signout-btn {
    display: none;
  }
  html[data-shell="v3"] #sidebar .sb-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid var(--y3-border-tint);
    background: var(--y3-surface);
    color: var(--y3-teal-strong);
    font-size: 13px;
    font-weight: 700;
  }

  html[data-shell="v3"] #sidebar .sb-pin {
    display: none;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-sm);
    background: var(--y3-surface);
    color: var(--y3-ink-muted);
    cursor: pointer;
  }
  html[data-shell="v3"] #sidebar .sb-pin svg {
    width: 15px;
    height: 15px;
  }
  html[data-shell="v3"] #sidebar .sb-pin[aria-pressed="true"] {
    background: var(--y3-surface-2);
    border-color: var(--y3-border-tint);
    color: var(--y3-teal-strong);
  }

  /* ── Rail: open (hover, keyboard focus, or pinned) ─────────────────── */
  html[data-shell="v3"] #sidebar.sb-expanded,
  html[data-shell="v3"][data-rail="pinned"] #sidebar {
    width: var(--y3-rail-open-w);
    background: var(--y3-surface);
    border-right-color: var(--y3-border-tint);
  }
  /* Hover draws OVER the content with a shadow. Pinned docks instead (the
     content moved right, above), so it needs none. */
  html[data-shell="v3"]:not([data-rail="pinned"]) #sidebar.sb-expanded {
    box-shadow: var(--y3-shadow-lg);
  }
  html[data-shell="v3"] #sidebar.sb-expanded .sb-logo-name,
  html[data-shell="v3"][data-rail="pinned"] #sidebar .sb-logo-name {
    display: block;
  }
  html[data-shell="v3"] #sidebar.sb-expanded .sb-pin,
  html[data-shell="v3"][data-rail="pinned"] #sidebar .sb-pin {
    display: flex;
  }
  html[data-shell="v3"] #sidebar.sb-expanded .sb-item,
  html[data-shell="v3"][data-rail="pinned"] #sidebar .sb-item {
    width: auto;
    padding: 0 10px;
    gap: 12px;
    justify-content: flex-start;
    font-size: 14px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] #sidebar.sb-expanded .sb-item.sb-active,
  html[data-shell="v3"][data-rail="pinned"] #sidebar .sb-item.sb-active {
    color: var(--y3-teal-strong);
  }
  html[data-shell="v3"] #sidebar.sb-expanded .sb-bottom,
  html[data-shell="v3"][data-rail="pinned"] #sidebar .sb-bottom {
    margin: auto 12px 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--y3-border);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  html[data-shell="v3"] #sidebar.sb-expanded .sb-user,
  html[data-shell="v3"][data-rail="pinned"] #sidebar .sb-user {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
  }
  html[data-shell="v3"] #sidebar.sb-expanded .sb-user > div:not(.sb-avatar),
  html[data-shell="v3"][data-rail="pinned"] #sidebar .sb-user > div:not(.sb-avatar) {
    display: block;
    min-width: 0;
  }
  html[data-shell="v3"] #sidebar.sb-expanded .sb-user-name,
  html[data-shell="v3"][data-rail="pinned"] #sidebar .sb-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--y3-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html[data-shell="v3"] #sidebar.sb-expanded .sb-user-sub,
  html[data-shell="v3"][data-rail="pinned"] #sidebar .sb-user-sub {
    font-size: 12px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] #sidebar.sb-expanded .sb-signout-btn,
  html[data-shell="v3"][data-rail="pinned"] #sidebar .sb-signout-btn {
    display: block;
    width: auto;
    margin: 0;
    padding: 6px 4px;
    border: none;
    background: transparent;
    color: var(--y3-teal-strong);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }

  /* ── Layering ──────────────────────────────────────────────────────── */
  /* The Insights detail sheet is the one in-shell overlay BELOW the rail
     (z 200). While it is open the rail drops under its scrim and stops taking
     the pointer, the same deference the quick-add "+" pays it. */
  html[data-shell="v3"] body.ins-ovl-locked #sidebar {
    z-index: 100;
    pointer-events: none;
  }
  /* Leaflet's controls sit at z 800 and 1000 in a container that makes no
     stacking context, so they would show THROUGH the open panel. Each map
     keeps its own layers to itself. */
  html[data-shell="v3"] .leaflet-container {
    isolation: isolate;
  }

  /* ── Top bar ───────────────────────────────────────────────────────── */
  html[data-shell="v3"] .top-nav {
    height: 56px;
    padding: 0 24px;
    background: var(--y3-app-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .top-nav-left {
    gap: 12px;
    min-width: 0;
  }
  html[data-shell="v3"] .top-nav-page {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .top-nav-right {
    gap: 10px;
  }
  /* Ask YUHA: everywhere except the chat screen it would open. */
  html[data-shell="v3"] .top-nav-ask {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: var(--y3-r-full);
    background: var(--y3-teal-strong);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--y3-fast) var(--y3-ease), transform var(--y3-fast) var(--y3-ease);
  }
  html[data-shell="v3"] .top-nav-ask:hover {
    background: var(--y3-teal-hover);
  }
  html[data-shell="v3"] .top-nav-ask:active {
    transform: scale(0.98);
  }
  html[data-shell="v3"] .top-nav-ask svg {
    width: 15px;
    height: 15px;
  }
  html[data-shell="v3"] body.yuha-view-chat .top-nav-ask {
    display: none;
  }

  html[data-shell="v3"] .top-nav-sync {
    height: 34px;
    padding: 0 14px;
    gap: 7px;
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-full);
    background: var(--y3-surface);
    color: var(--y3-ink-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
  }
  html[data-shell="v3"] .top-nav-sync .sync-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--y3-r-full);
    background: var(--y3-teal);
    box-shadow: none;
    animation: none;
  }
  html[data-shell="v3"] .top-nav-sync.is-attention {
    color: var(--y3-amber-ink);
    border-color: var(--y3-amber);
  }
  html[data-shell="v3"] .top-nav-sync.is-attention .sync-dot {
    background: var(--y3-amber);
  }
  html[data-shell="v3"] .top-nav-sync[data-v3-hide="1"] {
    display: none;
  }
  /* The avatar lives at the foot of the rail. */
  html[data-shell="v3"] .top-nav-divider,
  html[data-shell="v3"] .top-nav-avatar {
    display: none;
  }
}

/* ── Step 2: the readiness card and the coach panel (spec 4.1) ────────────
   The check-in row and the coach panel keep today's class names on purpose:
   their handlers and the push deep links find them by class (.v2d-hero-checkin,
   .cc-checkin, .cc-question, .cc-fb). Today's hero styles those classes from an
   inline sheet inside its own markup, which is not on the page under the
   redesign, so every rule they need is here. */
@media (min-width: 769px) {

  html[data-shell="v3"] #viewDash {
    background: var(--y3-app-bg);
  }

  html[data-shell="v3"] .y3-card {
    background: var(--y3-surface);
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-lg);
    box-shadow: var(--y3-shadow-sm);
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-readiness {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-color: var(--y3-border-tint);
    border-radius: var(--y3-r-xl);
    box-shadow: var(--y3-shadow-md);
  }
  html[data-shell="v3"] .y3-label {
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--y3-ink-muted);
  }

  /* Row 1: score and verdict */
  html[data-shell="v3"] .y3-rd-row {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  html[data-shell="v3"] .y3-ring {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
  }
  html[data-shell="v3"] .y3-ring svg {
    display: block;
    width: 100px;
    height: 100px;
  }
  html[data-shell="v3"] .y3-ring-track {
    stroke: var(--y3-border);
  }
  /* Teal at EVERY verdict (D2). Nothing on this card is painted from it. */
  html[data-shell="v3"] .y3-ring-arc {
    stroke: var(--y3-teal);
  }
  html[data-shell="v3"] .y3-ring-empty circle {
    stroke: var(--y3-border-tint);
  }
  html[data-shell="v3"] .y3-ring-in {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  html[data-shell="v3"] .y3-ring-num {
    font-size: 36px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--y3-teal);
    font-variant-numeric: tabular-nums;
  }
  html[data-shell="v3"] .y3-ring-lbl {
    font-size: 9px;
    line-height: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-ring-sub {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3-ring-anim .y3-ring-arc {
    animation: y3-ring-in var(--y3-slow) var(--y3-ease) both;
  }
  html[data-shell="v3"] .y3-rd-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  html[data-shell="v3"] .y3-rd-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  html[data-shell="v3"] .y3-chip {
    padding: 3px 10px;
    border-radius: var(--y3-r-full);
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  html[data-shell="v3"] .y3-chip-ok {
    background: rgba(15, 166, 140, 0.14);
    color: var(--y3-teal-strong);
  }
  html[data-shell="v3"] .y3-chip-warn {
    background: rgba(242, 162, 74, 0.16);
    color: var(--y3-amber-ink);
  }
  html[data-shell="v3"] .y3-rd-headline {
    margin: 0;
    font-size: 24px;
    line-height: 31px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-rd-note {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3-rd-coverage {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 13px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3-rd-coverage svg {
    /* icons.js sets inline width/height of 1em, which outranks a width rule,
       so an icon is sized through its OWN font-size. */
    font-size: 14px;
    flex-shrink: 0;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-rd-capnote {
    margin: -6px 0 0;
    font-size: 13px;
    color: var(--y3-amber-ink);
  }

  /* Row 2: the daily check-in (today's markup, the redesign's skin) */
  html[data-shell="v3"] .y3-readiness .v2d-hero-checkin {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: none;
  }
  html[data-shell="v3"] .y3-readiness .v2dhc-q,
  html[data-shell="v3"] .y3-readiness .v2dhc-label {
    font-size: 13px;
    color: var(--y3-ink-secondary);
    margin-right: 4px;
  }
  html[data-shell="v3"] .y3-readiness .v2dhc-label strong {
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-readiness .v2dhc-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  html[data-shell="v3"] .y3-readiness .v2dhc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-full);
    background: var(--y3-surface);
    color: var(--y3-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--y3-fast) var(--y3-ease), background var(--y3-fast) var(--y3-ease);
  }
  html[data-shell="v3"] .y3-readiness .v2dhc-chip:hover {
    border-color: var(--y3-border-tint);
    background: var(--y3-surface-2);
  }
  html[data-shell="v3"] .y3-readiness .v2dhc-chip:active {
    transform: scale(0.98);
  }
  html[data-shell="v3"] .y3-readiness .v2dhc-chip.sel {
    border-color: var(--y3-teal-strong);
    background: var(--y3-surface-2);
    color: var(--y3-teal-strong);
  }
  html[data-shell="v3"] .y3-readiness .v2dhc-chip-ico,
  html[data-shell="v3"] .y3-readiness .v2dhc-ico {
    display: inline-flex;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-readiness .v2dhc-chip-ico svg,
  html[data-shell="v3"] .y3-readiness .v2dhc-ico svg {
    font-size: 14px;
  }
  html[data-shell="v3"] .y3-readiness .v2dhc-edit {
    border: none;
    background: transparent;
    padding: 4px 6px;
    color: var(--y3-teal-strong);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  /* Row 3: top drivers. Rows come from the server and sum to score - 100. */
  html[data-shell="v3"] .y3-drivers {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 16px;
    border-top: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .y3-drivers-hd {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 2px;
  }
  html[data-shell="v3"] .y3-drv {
    display: grid;
    /* The evidence is the part worth reading, so it takes what it needs up to
       44% and the bar takes the rest. A fixed 210 px clipped "Load ratio 1.44,
       above your 1.3 ceiling" while the bar ran 600 px wide. */
    grid-template-columns: 118px 42px minmax(60px, 1fr) minmax(0, 44%);
    gap: 9px;
    align-items: center;
  }
  html[data-shell="v3"] .y3-drv-name {
    font-size: 13px;
    color: var(--y3-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html[data-shell="v3"] .y3-drv-delta {
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    color: var(--y3-amber-ink);
    font-variant-numeric: tabular-nums;
  }
  html[data-shell="v3"] .y3-drv-bar {
    display: block;
    height: 6px;
    border-radius: var(--y3-r-full);
    background: var(--y3-border);
    overflow: hidden;
  }
  html[data-shell="v3"] .y3-drv-bar > span {
    display: block;
    height: 6px;
    border-radius: var(--y3-r-full);
    background: var(--y3-amber);
  }
  html[data-shell="v3"] .y3-drv-why {
    font-size: 12px;
    color: var(--y3-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Buttons */
  html[data-shell="v3"] .y3-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-full);
    background: var(--y3-surface);
    color: var(--y3-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--y3-fast) var(--y3-ease), transform var(--y3-fast) var(--y3-ease);
  }
  html[data-shell="v3"] .y3-btn:hover {
    background: var(--y3-surface-2);
  }
  html[data-shell="v3"] .y3-btn:active {
    transform: scale(0.98);
  }
  html[data-shell="v3"] .y3-btn svg {
    font-size: 15px;
  }
  html[data-shell="v3"] .y3-btn-fill {
    border-color: var(--y3-teal-strong);
    background: var(--y3-teal-strong);
    color: #FFFFFF;
  }
  html[data-shell="v3"] .y3-btn-fill:hover {
    border-color: var(--y3-teal-hover);
    background: var(--y3-teal-hover);
  }
  html[data-shell="v3"] .y3-btn:focus-visible,
  html[data-shell="v3"] .y3-readiness .v2dhc-chip:focus-visible,
  html[data-shell="v3"] .y3-coach .cc-q-chip:focus-visible {
    outline: 2px solid var(--y3-teal-strong);
    outline-offset: 2px;
  }

  /* Row 4: the coach panel, nested on the mint surface. No dark card. */
  html[data-shell="v3"] .y3-coach-mount:empty {
    display: none;
  }
  html[data-shell="v3"] .y3-coach {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 2px 0 0;
    padding: 18px 20px;
    background: var(--y3-surface-2);
    border: 1px solid var(--y3-border-tint);
    border-radius: var(--y3-r-lg);
    box-shadow: none;
  }
  html[data-shell="v3"] .y3-coach .cc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }
  html[data-shell="v3"] .y3-coach .cc-av {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--y3-teal-strong);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    box-shadow: none;
  }
  html[data-shell="v3"] .y3-coach .cc-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-cc-ago {
    font-size: 13px;
    color: var(--y3-ink-muted);
  }
  /* Owner, 2026-09-20: the coach's words were set larger than anything else on
     the page. They read at the size of the cards around them now. */
  html[data-shell="v3"] .y3-coach .cc-read {
    margin: 0;
    max-width: 660px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: var(--y3-ink);
    text-wrap: pretty;
  }
  html[data-shell="v3"] .y3-coach .cc-read b {
    font-weight: 700;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-coach .cc-next {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: none;
  }
  html[data-shell="v3"] .y3-coach .cc-next-label {
    flex-shrink: 0;
    padding: 2px 9px;
    border: 1px solid var(--y3-border-tint);
    border-radius: 6px;
    background: var(--y3-surface);
    color: var(--y3-teal-strong);
    font-size: 11px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  html[data-shell="v3"] .y3-coach .cc-next-text {
    max-width: 600px;
    font-size: 13.5px;
    line-height: 21px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3-coach .cc-checkin,
  html[data-shell="v3"] .y3-coach .cc-question {
    margin: 0;
    padding: 12px 14px;
    background: var(--y3-surface);
    border: 1px solid var(--y3-border-tint);
    border-radius: var(--y3-r-md);
  }
  html[data-shell="v3"] .y3-coach .cc-q-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-coach .cc-q-chip {
    height: 34px;
    padding: 0 16px;
    border: 1px solid var(--y3-border-tint);
    border-radius: var(--y3-r-full);
    background: var(--y3-surface);
    color: var(--y3-ink);
    font-size: 14px;
    font-weight: 500;
  }
  html[data-shell="v3"] .y3-coach .cc-q-chip:hover {
    background: var(--y3-surface-2);
  }
  html[data-shell="v3"] .y3-coach .cc-q-chip.sel {
    border-color: var(--y3-teal-strong);
    background: var(--y3-teal-strong);
    color: #FFFFFF;
  }
  html[data-shell="v3"] .y3-coach .cc-q-ack {
    color: var(--y3-teal-strong);
  }
  html[data-shell="v3"] .y3-cc-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--y3-border-tint);
  }
  html[data-shell="v3"] .y3-cc-spacer {
    flex: 1;
  }
  html[data-shell="v3"] .y3-coach .cc-fb {
    margin: 0;
    padding: 0;
    border: none;
    gap: 8px;
  }
  html[data-shell="v3"] .y3-coach .cc-fb-q {
    font-size: 12px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-coach .cc-fb-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-full);
    background: var(--y3-surface);
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3-coach .cc-fb-btn.on {
    border-color: var(--y3-teal-strong);
    background: var(--y3-surface-2);
    color: var(--y3-teal-strong);
  }
}

/* ── Step 3: the signals strip and the activity card (spec 4.2, 4.3) ─────── */
@media (min-width: 769px) {
  html[data-shell="v3"] .y3-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-signals {
    padding: 14px 20px 6px;
  }
  html[data-shell="v3"] .y3-signals .y3-sig-list {
    margin-top: 6px;
  }
  html[data-shell="v3"] .y3-signals .y3-sig {
    border-top: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .y3-signals .y3-sig:first-child {
    border-top: none;
  }
  html[data-shell="v3"] .y3-signals .y3-sig-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-signals .y3-sig-head:focus-visible {
    outline: 2px solid var(--y3-teal-strong);
    outline-offset: 2px;
    border-radius: var(--y3-r-sm);
  }
  html[data-shell="v3"] .y3-signals .y3-sig-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: var(--y3-r-full);
    background: var(--y3-teal);
  }
  html[data-shell="v3"] .y3-signals .y3-sig-watch .y3-sig-dot { background: var(--y3-amber-ink); }
  html[data-shell="v3"] .y3-signals .y3-sig-alert .y3-sig-dot { background: var(--y3-coral); }
  html[data-shell="v3"] .y3-signals .y3-sig-ico {
    display: inline-flex;
    flex: none;
    color: var(--y3-teal-strong);
  }
  html[data-shell="v3"] .y3-signals .y3-sig-ico svg { font-size: 14px; }
  html[data-shell="v3"] .y3-signals .y3-sig-text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-shell="v3"] .y3-signals .y3-sig.open .y3-sig-text { white-space: normal; }
  html[data-shell="v3"] .y3-signals .y3-sig-time,
  html[data-shell="v3"] .y3-signals .y3-sig-go,
  html[data-shell="v3"] .y3-signals .y3-sig-chev {
    flex: none;
    font-size: 12px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-signals .y3-sig-chev { font-size: 15px; transition: transform 0.18s; }
  html[data-shell="v3"] .y3-signals .y3-sig.open .y3-sig-chev { transform: rotate(180deg); }
  html[data-shell="v3"] .y3-signals .y3-sig-body {
    display: none;
    padding: 0 0 12px 18px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3-signals .y3-sig.open .y3-sig-body { display: block; }
  html[data-shell="v3"] .y3-signals .y3-sig-body p { margin: 0 0 8px; }
  html[data-shell="v3"] .y3-signals .y3-sig-body ul { margin: 0; padding-left: 16px; }

  html[data-shell="v3"] .y3-activity {
    padding: 0;
    overflow: hidden;
  }
  html[data-shell="v3"] .y3-activity > :not(.y3-act-map) {
    margin-left: 20px;
    margin-right: 20px;
  }
  html[data-shell="v3"] .y3-activity .y3-act-map {
    height: 148px;
    pointer-events: none;            /* a strip to look at, never a map to drag */
    isolation: isolate;
    border-bottom: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .y3-activity #y3-act-map {
    width: 100%;
    height: 100%;
  }
  html[data-shell="v3"] .y3-activity .y3-act-redacted {
    margin-top: 16px;
    font-size: 12.5px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-activity .y3-act-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
  }
  html[data-shell="v3"] .y3-activity .y3-act-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--y3-r-md);
    background: var(--y3-surface-2);
    color: var(--y3-teal-strong);
  }
  html[data-shell="v3"] .y3-activity .y3-act-ico svg { font-size: 18px; }
  html[data-shell="v3"] .y3-activity .y3-act-when {
    font-size: 12px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-activity .y3-act-title {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-activity .y3-act-stats {
    display: flex;
    margin-top: 16px;
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-md);
  }
  html[data-shell="v3"] .y3-activity .y3-act-stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 12px;
    border-left: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .y3-activity .y3-act-stat:first-child { border-left: none; }
  html[data-shell="v3"] .y3-activity .y3-act-val {
    font-size: 17px;
    font-weight: 700;
    color: var(--y3-ink);
    white-space: nowrap;
  }
  html[data-shell="v3"] .y3-activity .y3-act-unit {
    margin-left: 3px;
    font-size: 11px;
    font-weight: 500;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-activity .y3-act-lbl {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-activity .y3-act-strava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
  }
  html[data-shell="v3"] .y3-activity .y3-act-strava img { height: 18px; }
  html[data-shell="v3"] .y3-activity .y3-act-strava a {
    font-size: 12.5px;
    font-weight: 600;
    color: #FC5200;
    text-decoration: none;
  }
  html[data-shell="v3"] .y3-activity .y3-analysis {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .y3-activity .y3-an-summary {
    max-width: 660px;
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--y3-ink);
    text-wrap: pretty;
  }
  html[data-shell="v3"] .y3-activity .y3-an-rows { margin-top: 12px; }
  html[data-shell="v3"] .y3-activity .y3-an-row {
    display: grid;
    grid-template-columns: 130px 66px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 7px 0;
    border-top: 1px solid var(--y3-border);
    font-size: 13px;
  }
  html[data-shell="v3"] .y3-activity .y3-an-row:first-child { border-top: none; }
  html[data-shell="v3"] .y3-activity .y3-an-name { color: var(--y3-ink-secondary); }
  html[data-shell="v3"] .y3-activity .y3-an-word { font-weight: 700; }
  html[data-shell="v3"] .y3-activity .y3-an-good { color: var(--y3-teal-strong); }
  html[data-shell="v3"] .y3-activity .y3-an-watch { color: var(--y3-amber-ink); }
  html[data-shell="v3"] .y3-activity .y3-an-bad { color: var(--y3-coral-ink); }
  html[data-shell="v3"] .y3-activity .y3-an-verdict { color: var(--y3-ink); }
  html[data-shell="v3"] .y3-activity .y3-act-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 18px;
  }
  html[data-shell="v3"] .y3-activity .y3-act-cap {
    font-size: 12.5px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-activity > :last-child { margin-bottom: 18px; }
  html[data-shell="v3"] .y3-activity-empty { padding: 18px 0 0; }
  html[data-shell="v3"] .y3-activity .y3-act-none {
    margin-top: 8px;
    font-size: 15px;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-activity .y3-act-cta {
    display: flex;
    gap: 10px;
    margin-top: 12px;
  }
}

/* ── Step 4: Weekly Trends (spec 4.4) ────────────────────────────────────── */
@media (min-width: 769px) {
  html[data-shell="v3"] .y3-trends {
    padding: 18px 20px;
  }
  html[data-shell="v3"] .y3-trends .y3-trends-hd {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }
  html[data-shell="v3"] .y3-trends .y3-trends-title {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-trends .y3-trends-meta {
    font-size: 12px;
    color: var(--y3-ink-muted);
    text-align: right;
  }
  html[data-shell="v3"] .y3-trends .y3-trends-empty {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3-trends .y3-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
  }
  html[data-shell="v3"] .y3-trends .y3-tile {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-md);
    background: var(--y3-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  html[data-shell="v3"] .y3-trends .y3-tile:hover {
    border-color: var(--y3-border-tint);
    background: #FCFDFC;
  }
  html[data-shell="v3"] .y3-trends .y3-tile:focus-visible {
    outline: 2px solid var(--y3-teal-strong);
    outline-offset: 2px;
  }
  html[data-shell="v3"] .y3-trends .y3-tile-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  html[data-shell="v3"] .y3-trends .y3-tile-name {
    min-width: 0;
    font-size: 12px;
    color: var(--y3-ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-shell="v3"] .y3-trends .y3-tile-chip {
    flex: none;
    font-size: 11px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-trends .y3-tile-chip.out {
    font-weight: 600;
    color: var(--y3-amber-ink);
  }
  html[data-shell="v3"] .y3-trends .y3-tile-val {
    margin-top: 4px;
    font-size: 19px;
    font-weight: 700;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-trends .y3-tile-unit {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-trends .y3-tile-spark {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 6px;
    overflow: visible;
  }
  html[data-shell="v3"] .y3-trends .y3-sp-band { fill: rgba(15, 166, 140, 0.10); }
  html[data-shell="v3"] .y3-trends .y3-sp-edge {
    fill: none;
    stroke: rgba(15, 166, 140, 0.35);
    stroke-width: 1;
    stroke-dasharray: 4 4;
  }
  html[data-shell="v3"] .y3-trends .y3-sp-line {
    fill: none;
    stroke: #5C7C74;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  html[data-shell="v3"] .y3-trends .y3-sp-pt {
    stroke: #5C7C74;
    stroke-width: 4;
    stroke-linecap: round;
  }
  html[data-shell="v3"] .y3-trends .y3-sp-dot {
    stroke: var(--y3-teal);
    stroke-width: 7;
    stroke-linecap: round;
  }
  html[data-shell="v3"] .y3-trends .y3-sp-dot.out { stroke: var(--y3-amber); }
  html[data-shell="v3"] .y3-trends .y3-tile-note {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-trends .y3-trends-ft {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
  }
  html[data-shell="v3"] .y3-trends .y3-trends-sum {
    font-size: 13px;
    color: var(--y3-ink-secondary);
  }
}

/* ── Step 5: the grid and the left column (spec 3, 5.0 to 5.3) ───────────── */
@media (min-width: 769px) {
  /* One stack under 1024 px (D12): the center first, then the left column. */
  html[data-shell="v3"] .y3-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  html[data-shell="v3"] .y3-grid .y3-center,
  html[data-shell="v3"] .y3-grid .y3-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  html[data-shell="v3"] .y3-grid .y3-left { order: 2; }
  html[data-shell="v3"] .y3-grid .y3-left > div:empty { display: none; }
  html[data-shell="v3"] .y3-side-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
  }
  html[data-shell="v3"] .y3-side-link {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--y3-teal-strong);
    cursor: pointer;
  }
  html[data-shell="v3"] .y3-left .y3-card { padding: 14px 16px; }

  /* Today's signals sits in this column, between This week and Goals (owner,
     2026-09-20). At 252 px a one-line title is cut after two words, so here
     the title wraps and the time drops to a line of its own under it. */
  html[data-shell="v3"] .y3-left .y3-signals { padding: 14px 16px 6px; }
  html[data-shell="v3"] .y3-left .y3-signals .y3-eyebrow { display: block; margin-bottom: 4px; }
  html[data-shell="v3"] .y3-left .y3-signals .y3-sig-head { flex-wrap: wrap; align-items: flex-start; gap: 2px 8px; padding: 9px 0; }
  html[data-shell="v3"] .y3-left .y3-signals .y3-sig-dot { margin-top: 5px; }
  html[data-shell="v3"] .y3-left .y3-signals .y3-sig-ico { margin-top: 2px; }
  html[data-shell="v3"] .y3-left .y3-signals .y3-sig-text { flex: 1 1 0; font-size: 13px; white-space: normal; overflow: visible; }
  html[data-shell="v3"] .y3-left .y3-signals .y3-sig-time { order: 9; flex-basis: 100%; padding-left: 16px; font-size: 11.5px; }
  html[data-shell="v3"] .y3-left .y3-signals .y3-sig-body { padding: 0 0 10px 16px; font-size: 12.5px; line-height: 1.5; }

  html[data-shell="v3"] .y3-setup-count,
  html[data-shell="v3"] .y3-week-meta {
    display: inline-flex;
    gap: 10px;
    font-size: 12px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-setup-bar {
    height: 5px;
    border-radius: var(--y3-r-full);
    background: var(--y3-surface-2);
    overflow: hidden;
  }
  html[data-shell="v3"] .y3-setup-bar span {
    display: block;
    height: 100%;
    background: var(--y3-teal);
  }
  html[data-shell="v3"] .y3-steps {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  html[data-shell="v3"] .y3-step {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-step-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: none;
    border: 1.5px solid var(--y3-border-tint);
    border-radius: var(--y3-r-full);
    color: #FFFFFF;
  }
  html[data-shell="v3"] .y3-step-ico svg { font-size: 10px; }
  html[data-shell="v3"] .y3-step.done { color: var(--y3-ink-secondary); }
  html[data-shell="v3"] .y3-step.done .y3-step-ico {
    border-color: var(--y3-teal);
    background: var(--y3-teal);
  }
  html[data-shell="v3"] .y3-step.next .y3-step-ico { border-color: var(--y3-teal-strong); }
  html[data-shell="v3"] .y3-step-link,
  html[data-shell="v3"] .y3-step-skip {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
  }
  html[data-shell="v3"] .y3-step-link {
    font-weight: 600;
    color: var(--y3-teal-strong);
    text-align: left;
  }
  html[data-shell="v3"] .y3-step-skip {
    margin-left: auto;
    font-size: 12px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3-pips {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
  }
  html[data-shell="v3"] .y3-pip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
  }
  html[data-shell="v3"] .y3-pip:focus-visible .y3-pip-dot {
    outline: 2px solid var(--y3-teal-strong);
    outline-offset: 2px;
  }
  html[data-shell="v3"] .y3-pip-dow {
    font-size: 10.5px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-pip-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-full);
    background: var(--y3-surface);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-pip-dot svg { font-size: 12px; }
  html[data-shell="v3"] .y3-pip-done .y3-pip-dot {
    border-color: var(--y3-teal);
    background: var(--y3-teal);
    color: #FFFFFF;
  }
  html[data-shell="v3"] .y3-pip-today .y3-pip-dot {
    border: 2px solid #FFFFFF;
    background: var(--y3-teal);
    color: #FFFFFF;
    box-shadow: 0 0 0 2px var(--y3-teal-strong);
  }
  html[data-shell="v3"] .y3-pip-ahead .y3-pip-dot {
    border: 1.5px solid var(--y3-teal);
    color: var(--y3-teal-strong);
  }
  html[data-shell="v3"] .y3-pip-rest .y3-pip-dot {
    border-color: transparent;
    background: var(--y3-surface-2);
  }
  html[data-shell="v3"] .y3-pip-n {
    min-height: 11px;
    font-size: 9.5px;
    line-height: 11px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-week-ft {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--y3-border);
    font-size: 13px;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3-goal,
  html[data-shell="v3"] .y3-conn-row,
  html[data-shell="v3"] .y3-goals-cta {
    display: flex;
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-goal {
    flex-direction: column;
    gap: 5px;
    padding: 9px 0;
    border-top: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .y3-side-hd + .y3-goal { border-top: none; padding-top: 0; }
  html[data-shell="v3"] .y3-goal-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
  }
  html[data-shell="v3"] .y3-goal-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-shell="v3"] .y3-goal-pct { font-weight: 700; }
  html[data-shell="v3"] .y3-goal-bar {
    display: block;
    height: 5px;
    border-radius: var(--y3-r-full);
    background: var(--y3-surface-2);
    overflow: hidden;
  }
  html[data-shell="v3"] .y3-goal-bar span {
    display: block;
    height: 100%;
    background: var(--y3-teal);
  }
  html[data-shell="v3"] .y3-goal-bar.behind span { background: var(--y3-amber); }
  html[data-shell="v3"] .y3-goal-sub {
    font-size: 12px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-goal-link { font-weight: 600; color: var(--y3-teal-strong); }
  html[data-shell="v3"] .y3-goals-cta {
    align-items: center;
    gap: 10px;
    min-height: 56px;
    font-size: 14px;
    font-weight: 600;
    color: var(--y3-teal-strong);
  }
  html[data-shell="v3"] .y3-goals-cta span:nth-child(2) { flex: 1; }
  html[data-shell="v3"] .y3-goals-cta-ico svg { font-size: 18px; }

  html[data-shell="v3"] .y3-conn-row {
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    font-size: 13px;
  }
  html[data-shell="v3"] .y3-conn-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: var(--y3-r-full);
    background: var(--y3-border);
  }
  html[data-shell="v3"] .y3-conn-dot.on { background: var(--y3-teal); }
  html[data-shell="v3"] .y3-conn-dot.warn { background: var(--y3-amber); }
  html[data-shell="v3"] .y3-conn-name { flex: 1; min-width: 0; }
  html[data-shell="v3"] .y3-conn-check { font-size: 12px; font-weight: 600; color: var(--y3-amber-ink); }
  html[data-shell="v3"] .y3-conn-add { font-size: 12px; font-weight: 600; color: var(--y3-teal-strong); }
  html[data-shell="v3"] .y3-conn-where { font-size: 11.5px; color: var(--y3-ink-muted); }
}

/* ── Step 6: the right rail (spec 6.1 to 6.3) ────────────────────────────── */
@media (min-width: 769px) {
  html[data-shell="v3"] .y3-grid .y3-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    order: 1;                       /* one stack: center, then today, then the week */
  }
  html[data-shell="v3"] .y3-grid .y3-right > div:empty,
  html[data-shell="v3"] .y3-session > div:empty { display: none; }
  html[data-shell="v3"] .y3-right .y3-card { padding: 14px 16px; }

  html[data-shell="v3"] .y3-race-name { font-size: 15px; font-weight: 600; color: var(--y3-ink); }
  html[data-shell="v3"] .y3-race-days {
    margin-top: 4px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-race-days span {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3-race-date { font-size: 12.5px; color: var(--y3-ink-muted); }
  html[data-shell="v3"] .y3-race-nums {
    display: flex;
    gap: 24px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .y3-race-nums b { display: block; margin-top: 2px; font-size: 17px; color: var(--y3-ink); }
  html[data-shell="v3"] .y3-race-gap { margin-top: 8px; font-size: 12.5px; color: var(--y3-amber-ink); }
  html[data-shell="v3"] .y3-race-line {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3-race-line .y3-eyebrow { display: block; margin-bottom: 2px; }
  html[data-shell="v3"] .y3-race .y3-btn { margin-top: 12px; }
  html[data-shell="v3"] .y3-race-week { border-color: var(--y3-border-tint); box-shadow: var(--y3-shadow-md); }

  /* Today's session keeps today's card and every action in it; this is its skin. */
  html[data-shell="v3"] .y3-session {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* Owner 2026-09-20: the sport tile above the session title is decoration
     the rail has no room for. The badge keeps its row, left aligned. */
  html[data-shell="v3"] .ts-opt-ic { display: none; }
  html[data-shell="v3"] .ts-opt-top { justify-content: flex-start; }
  html[data-shell="v3"] .y3-session .ts-card,
  html[data-shell="v3"] .y3-session .v2d-tsession {
    margin: 0;
    border: 1px solid var(--y3-border-tint);
    border-radius: var(--y3-r-lg);
    box-shadow: var(--y3-shadow-md);
  }
  html[data-shell="v3"] .y3-session .ts-arr,
  html[data-shell="v3"] .y3-session .ts-dots,
  html[data-shell="v3"] .y3-session .ts-count { display: none; }
  html[data-shell="v3"] .y3-session .ts-slide { padding: 0; }
  html[data-shell="v3"] .y3-seg {
    display: flex;
    gap: 2px;
    margin: 10px 0 4px;
    padding: 3px;
    border-radius: var(--y3-r-full);
    background: var(--y3-surface-2);
  }
  html[data-shell="v3"] .y3-seg-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    border: none;
    border-radius: var(--y3-r-full);
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--y3-ink-secondary);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-shell="v3"] .y3-seg-tab[aria-selected="true"] {
    background: #FFFFFF;
    color: var(--y3-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  }
  html[data-shell="v3"] .y3-seg-tab:focus-visible { outline: 2px solid var(--y3-teal-strong); outline-offset: 1px; }
  html[data-shell="v3"] .y3-weather {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-md);
    background: var(--y3-surface);
    font-size: 13px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3-weather svg { font-size: 15px; color: var(--y3-amber-ink); flex: none; }
  html[data-shell="v3"] .y3-upnext {
    padding: 12px 14px;
    border-radius: var(--y3-r-md);
    background: var(--y3-surface-2);
  }
  html[data-shell="v3"] .y3-upnext-title { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--y3-ink); }
  html[data-shell="v3"] .y3-upnext-dose { margin-top: 2px; font-size: 12.5px; color: var(--y3-ink-secondary); }
  html[data-shell="v3"] .y3-upnext-prop {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--y3-border);
    font-size: 13px;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3-upnext-prop-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

  html[data-shell="v3"] .y3-right .y3-drawers { padding: 4px 16px; }
  html[data-shell="v3"] .y3-drawer { border-top: 1px solid var(--y3-border); }
  html[data-shell="v3"] .y3-drawer:first-child { border-top: none; }
  html[data-shell="v3"] .y3-drawer-h {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 13.5px;
    color: var(--y3-ink);
    text-align: left;
    cursor: pointer;
  }
  html[data-shell="v3"] .y3-drawer-h:focus-visible { outline: 2px solid var(--y3-teal-strong); outline-offset: 2px; border-radius: var(--y3-r-sm); }
  html[data-shell="v3"] .y3-drawer-ico { display: inline-flex; color: var(--y3-teal-strong); }
  html[data-shell="v3"] .y3-drawer-ico svg { font-size: 16px; }
  html[data-shell="v3"] .y3-drawer-l { font-weight: 600; }
  html[data-shell="v3"] .y3-drawer-s { font-size: 12px; color: var(--y3-ink-muted); }
  html[data-shell="v3"] .y3-drawer-c { color: var(--y3-ink-muted); transition: transform 0.2s; }
  html[data-shell="v3"] .y3-drawer.open .y3-drawer-c { transform: rotate(180deg); }
  html[data-shell="v3"] .y3-drawer-b { padding: 0 0 14px; }
  html[data-shell="v3"] .y3-drawer-rows > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3-drawer-rows b { color: var(--y3-ink); font-weight: 600; text-align: right; }
  html[data-shell="v3"] .y3-drawer-p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--y3-ink-secondary); }
  html[data-shell="v3"] .y3-drawer-b .y3-btn { margin-top: 8px; }
}

/* Both conditions must hold. The 769 px floor is named on purpose: the scope
   guard in tests/test_dashboard_v3_shell.py accepts no query without it. */
@media (min-width: 769px) and (min-width: 1024px) {
  html[data-shell="v3"] .y3-grid {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    grid-template-areas: "left center" "left right";
    gap: 20px;
    align-items: start;
  }
  html[data-shell="v3"] .y3-grid .y3-left { order: 0; grid-area: left; }
  html[data-shell="v3"] .y3-grid .y3-center { grid-area: center; }
  html[data-shell="v3"] .y3-grid .y3-right { order: 0; grid-area: right; }
}

@media (min-width: 769px) {
  html[data-shell="v3"] .y3-welcome { padding: 28px 28px 26px; }
  html[data-shell="v3"] .y3-welcome .y3-rd-headline { margin: 8px 0 0; max-width: 620px; }
  html[data-shell="v3"] .y3-wl-sub {
    margin: 10px 0 0;
    max-width: 600px;
    font-size: 14px;
    line-height: 22px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3-wl-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  html[data-shell="v3"] .y3-welcome-next { padding: 18px 28px 10px; }
  html[data-shell="v3"] .y3-wl-list { list-style: none; margin: 8px 0 0; padding: 0; }
  html[data-shell="v3"] .y3-wl-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .y3-wl-row:first-child { border-top: none; }
  html[data-shell="v3"] .y3-wl-ico {
    display: inline-flex;
    flex: none;
    margin-top: 1px;
    color: var(--y3-teal-strong);
  }
  html[data-shell="v3"] .y3-wl-ico svg { font-size: 18px; }
  html[data-shell="v3"] .y3-wl-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  html[data-shell="v3"] .y3-wl-txt b { font-size: 14px; font-weight: 600; color: var(--y3-ink); }
  html[data-shell="v3"] .y3-wl-txt span { font-size: 13px; line-height: 20px; color: var(--y3-ink-secondary); }
}

/* Three columns only where the center keeps a readable width: at 1024 px a
   300 px rail would leave it about 320 px. */
@media (min-width: 769px) and (min-width: 1280px) {
  html[data-shell="v3"]:not([data-rail="pinned"]) .y3-grid {
    grid-template-columns: 252px minmax(0, 1fr) 300px;
    grid-template-areas: "left center right";
  }
}
/* A pinned rail docks 236 px of the page, which at 1280 px would leave the
   center about 390 px between two side columns. Pinned, three columns wait
   for 1480 px. */
@media (min-width: 769px) and (min-width: 1480px) {
  html[data-shell="v3"][data-rail="pinned"] .y3-grid {
    grid-template-columns: 252px minmax(0, 1fr) 300px;
    grid-template-areas: "left center right";
  }
}

/* The welcome page has no right rail, so its center takes the rest at every
   width. It sits AFTER the three-column rules on purpose: they match it with
   the same weight, so the later rule is the one that holds. */
@media (min-width: 769px) and (min-width: 1024px) {
  html[data-shell="v3"] .y3-grid.y3-grid-welcome,
  html[data-shell="v3"]:not([data-rail="pinned"]) .y3-grid.y3-grid-welcome,
  html[data-shell="v3"][data-rail="pinned"] .y3-grid.y3-grid-welcome {
    grid-template-columns: 252px minmax(0, 1fr);
    grid-template-areas: "left center";
  }
}

/* Section 8: bars grow from zero once per session, cards and rows answer a press. */
@media (min-width: 769px) {
  html[data-shell="v3"] .y3-first .y3-drv-bar > span {
    transform-origin: left center;
    animation: y3-bar-in 320ms ease-out both;
  }
  html[data-shell="v3"] .y3-tile:active,
  html[data-shell="v3"] .y3-goal:active,
  html[data-shell="v3"] .y3-conn-row:active,
  html[data-shell="v3"] .y3-pip:active .y3-pip-dot {
    transform: scale(0.995);
  }
}

@keyframes y3-bar-in {
  from { transform: scaleX(0); }
}

@keyframes y3-ring-in {
  from { stroke-dasharray: 0 327; }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  html[data-shell="v3"] #sidebar,
  html[data-shell="v3"] .desk-main,
  html[data-shell="v3"] #sidebar .sb-item,
  html[data-shell="v3"] .top-nav-ask {
    transition: none;
  }
  html[data-shell="v3"] .y3-ring-anim .y3-ring-arc,
  html[data-shell="v3"] .y3-first .y3-drv-bar > span {
    animation: none;
  }
  html[data-shell="v3"] .y3-tile:active,
  html[data-shell="v3"] .y3-goal:active,
  html[data-shell="v3"] .y3-conn-row:active,
  html[data-shell="v3"] .y3-pip:active .y3-pip-dot {
    transform: none;
  }
}

/* ── Screens redesign: Goals (docs/screens-redesign-spec.md) ─────────────────
 * Web only, like everything in this file: every rule sits under
 * html[data-shell="v3"] inside the desktop query, so the apps, today's site and
 * a phone cannot match one. The grid, cards, buttons and coach panel are the
 * dashboard's (.y3-grid, .y3-card, .y3-btn, .y3-coach); only what is new to
 * this screen is named y3g-. */
@media (min-width: 769px) {
  html[data-shell="v3"] #viewGoals.y3g-on {
    background: var(--y3-app-bg);
  }

  html[data-shell="v3"] #viewGoals.y3g-on #goalsScroll {
    padding: 20px 24px 28px;
  }

  html[data-shell="v3"] #goalsActive.y3g-on .goals-active-hdr {
    display: none;
  }

  html[data-shell="v3"] #goalsActive.y3g-on #goalAddPanel {
    margin-bottom: 16px;
  }

  html[data-shell="v3"] #topNavSub {
    margin-left: 10px;
    font-size: 13px;
    font-weight: 400;
    color: var(--y3-ink-muted);
    white-space: nowrap;
  }

  html[data-shell="v3"] #topNavSub[hidden] {
    display: none;
  }

  html[data-shell="v3"] .y3g-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 18px 20px;
  }

  html[data-shell="v3"] .y3g-feat {
    border-color: var(--y3-border-tint);
    border-radius: var(--y3-r-xl);
    box-shadow: var(--y3-shadow-md);
  }

  html[data-shell="v3"] .y3g-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 18px;
  }

  html[data-shell="v3"] .y3g-ring {
    position: relative;
    flex: none;
    width: 88px;
    height: 88px;
  }

  html[data-shell="v3"] .y3g-ring svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }

  html[data-shell="v3"] .y3g-ring-track {
    fill: none;
    stroke: var(--y3-border);
    stroke-width: 10;
  }

  html[data-shell="v3"] .y3g-ring-arc {
    fill: none;
    stroke: var(--y3-teal);
    stroke-width: 10;
    stroke-linecap: round;
  }

  html[data-shell="v3"] .y3g-ring-t {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  html[data-shell="v3"] .y3g-ring-t b {
    font-size: 21px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3g-ring-t small {
    font-size: 9.5px;
    line-height: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3g-main {
    flex: 1 1 260px;
    min-width: 0;
  }

  html[data-shell="v3"] .y3g-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
  }

  html[data-shell="v3"] .y3g-title {
    margin: 0;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3g-pill {
    padding: 3px 8px;
    border-radius: var(--y3-r-full);
    font-size: 10.5px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  html[data-shell="v3"] .y3g-pill-teal {
    background: rgba(15,166,140,0.14);
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3g-pill-amber {
    background: rgba(242,162,74,0.18);
    color: var(--y3-amber-ink);
  }

  html[data-shell="v3"] .y3g-pill-muted {
    background: var(--y3-surface-2);
    border: 1px solid var(--y3-border);
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3g-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 12px;
  }

  html[data-shell="v3"] .y3g-cell small {
    display: block;
    margin-bottom: 3px;
    font-size: 10.5px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3g-cell b {
    display: block;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3g-cell b.y3g-t-teal {
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3g-cell b.y3g-t-amber {
    color: var(--y3-amber-ink);
  }

  html[data-shell="v3"] .y3g-cell-sub {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3g-info {
    display: inline-flex;
    vertical-align: -2px;
    color: var(--y3-ink-muted);
    cursor: help;
  }

  html[data-shell="v3"] .y3g-info svg {
    font-size: 12px;
  }

  html[data-shell="v3"] .y3g-info:focus-visible {
    outline: 2px solid var(--y3-teal-strong);
    outline-offset: 2px;
    border-radius: 4px;
  }

  html[data-shell="v3"] .y3g-chart {
    flex: none;
    width: 190px;
  }

  html[data-shell="v3"] .y3g-chart-hd {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
  }

  html[data-shell="v3"] .y3g-chart-hd .y3-eyebrow {
    font-size: 10px;
    line-height: 13px;
  }

  html[data-shell="v3"] .y3g-chart-sub {
    font-size: 11px;
    line-height: 14px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3g-spark,
  html[data-shell="v3"] .y3g-bars {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  html[data-shell="v3"] .y3g-spark-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html[data-shell="v3"] .y3g-spark-line.y3g-tone-teal {
    stroke: var(--y3-teal);
  }

  html[data-shell="v3"] .y3g-spark-line.y3g-tone-indigo {
    stroke: var(--y3-indigo);
  }

  html[data-shell="v3"] .y3g-spark-area {
    stroke: none;
    fill-opacity: 0.1;
  }

  html[data-shell="v3"] .y3g-spark-area.y3g-tone-teal {
    fill: var(--y3-teal);
  }

  html[data-shell="v3"] .y3g-spark-area.y3g-tone-indigo {
    fill: var(--y3-indigo);
  }

  html[data-shell="v3"] .y3g-spark-end,
  html[data-shell="v3"] .y3g-spark-dot {
    stroke: var(--y3-surface);
    stroke-width: 2;
  }

  html[data-shell="v3"] .y3g-spark-end.y3g-tone-teal,
  html[data-shell="v3"] .y3g-spark-dot.y3g-tone-teal {
    fill: var(--y3-teal);
  }

  html[data-shell="v3"] .y3g-spark-end.y3g-tone-indigo,
  html[data-shell="v3"] .y3g-spark-dot.y3g-tone-indigo {
    fill: var(--y3-indigo);
  }

  html[data-shell="v3"] .y3g-spark-lbl {
    font-size: 11.5px;
    font-weight: 700;
    fill: var(--y3-ink);
  }

  html[data-shell="v3"] .y3g-axis {
    stroke: var(--y3-border-tint);
    stroke-width: 1;
  }

  html[data-shell="v3"] .y3g-axis-lbl {
    font-size: 10.5px;
    fill: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3g-bar {
    fill: var(--y3-teal);
  }

  html[data-shell="v3"] .y3g-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 14px 0;
  }

  html[data-shell="v3"] .y3g-segs {
    display: flex;
    gap: 4px;
  }

  html[data-shell="v3"] .y3g-segs i {
    display: block;
    width: 24px;
    height: 5px;
    border-radius: 3px;
    background: var(--y3-border);
  }

  html[data-shell="v3"] .y3g-segs i.d {
    background: var(--y3-teal);
  }

  html[data-shell="v3"] .y3g-segs i.n {
    background: var(--y3-amber);
  }

  html[data-shell="v3"] .y3g-strip-cap {
    font-size: 13px;
    color: var(--y3-ink-secondary);
  }

  html[data-shell="v3"] .y3g-pips {
    display: flex;
    gap: 4px;
  }

  html[data-shell="v3"] .y3g-pip {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--y3-border);
    border-radius: 50%;
    background: var(--y3-surface);
    color: #FFFFFF;
  }

  html[data-shell="v3"] .y3g-pip.hit {
    border-color: var(--y3-teal);
    background: var(--y3-teal);
  }

  html[data-shell="v3"] .y3g-pip.miss {
    background: var(--y3-surface-2);
  }

  html[data-shell="v3"] .y3g-pip svg {
    font-size: 12px;
  }

  html[data-shell="v3"] .y3g-coach {
    margin-top: 2px;
  }

  html[data-shell="v3"] .y3g-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
  }

  html[data-shell="v3"] .y3g-links {
    display: flex;
    gap: 14px;
    margin-left: auto;
  }

  html[data-shell="v3"] .y3g-link {
    padding: 4px 2px;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--y3-ink-muted);
    cursor: pointer;
  }

  html[data-shell="v3"] .y3g-link:hover {
    color: var(--y3-ink);
    text-decoration: underline;
  }

  html[data-shell="v3"] .y3g-link:focus-visible,
  html[data-shell="v3"] .y3g-add:focus-visible {
    outline: 2px solid var(--y3-teal-strong);
    outline-offset: 2px;
    border-radius: 6px;
  }

  html[data-shell="v3"] .y3g-add {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    border: 1.5px dashed var(--y3-border-tint);
    border-radius: var(--y3-r-lg);
    background: rgba(255,255,255,0.5);
    font: inherit;
    text-align: left;
    color: var(--y3-ink);
    cursor: pointer;
  }

  html[data-shell="v3"] .y3g-add:hover {
    background: var(--y3-surface);
  }

  html[data-shell="v3"] .y3g-add-pl {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--y3-border-tint);
    border-radius: var(--y3-r-md);
    background: var(--y3-surface);
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3g-add-pl svg {
    font-size: 20px;
  }

  html[data-shell="v3"] .y3g-add-tx b {
    display: block;
    font-size: 14px;
    font-weight: 600;
  }

  html[data-shell="v3"] .y3g-add-tx span {
    font-size: 13px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3g-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3g-kv {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--y3-border);
  }

  html[data-shell="v3"] .y3g-kv div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
  }

  html[data-shell="v3"] .y3g-kv span {
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3g-kv b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  html[data-shell="v3"] .y3g-feeds {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 6px;
  }

  html[data-shell="v3"] .y3g-feed b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3g-feed span {
    font-size: 12px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3g-next-rows {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--y3-border);
  }

  html[data-shell="v3"] .y3g-next-rows div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
  }

  html[data-shell="v3"] .y3g-next-rows span {
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3g-next-rows b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  html[data-shell="v3"] .y3g-next-rows b.y3g-t-teal {
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3g-next-rows b.y3g-t-amber {
    color: var(--y3-amber-ink);
  }

  html[data-shell="v3"] .y3g-next .y3-btn {
    margin-top: 12px;
  }

  html[data-shell="v3"] .y3g-done-i {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 0;
    border-top: 1px solid var(--y3-border);
    font-size: 13px;
  }

  html[data-shell="v3"] .y3g-done-i:first-of-type {
    border-top: none;
  }

  html[data-shell="v3"] .y3g-done-mark {
    flex: none;
    width: 16px;
    margin-top: 1px;
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3g-done-mark svg {
    font-size: 16px;
  }

  html[data-shell="v3"] .y3g-done-mark:not(.ok)::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin: 6px 5px;
    border-radius: 50%;
    background: var(--y3-border-tint);
  }

  html[data-shell="v3"] .y3g-done-i b {
    display: block;
    font-weight: 600;
  }

  html[data-shell="v3"] .y3g-done-i span:not(.y3g-done-mark) {
    font-size: 12px;
    color: var(--y3-ink-muted);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * TRAINING PLAN SCREEN (redesign, web only, behind SCREENS_V3).
 * docs/screens-redesign-spec.md, section 6. Every rule sits under
 * html[data-shell="v3"] inside the desktop query, so the apps, today's site and
 * a phone cannot match one. The grid, cards, buttons and eyebrow are the
 * dashboard's (.y3-*); only what is new to this screen is named y3p-. Flat
 * surfaces and one teal: no gradients, and amber only where the design puts
 * caution.
 * ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* The page-level restyle applies only while the redesigned screen is drawn
     (the loader sets the class), never to today's plan tab. */
  html[data-shell="v3"] #viewTrainingPlan.y3p-on {
    background: var(--y3-app-bg);
  }

  html[data-shell="v3"] #viewTrainingPlan.y3p-on #tpScroll {
    padding: 20px 24px 28px;
  }

  html[data-shell="v3"] .y3p-grid .y3-card {
    padding: 16px 18px;
  }

  html[data-shell="v3"] .y3p-lbl {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  html[data-shell="v3"] .y3p-lbl b {
    font-size: 13px;
    font-weight: 700;
    color: var(--y3-ink);
  }

  /* Plan progress */
  html[data-shell="v3"] .y3p-bar {
    height: 6px;
    margin: 10px 0 8px;
    border-radius: 3px;
    background: var(--y3-border);
    overflow: hidden;
  }

  html[data-shell="v3"] .y3p-bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--y3-teal);
  }

  html[data-shell="v3"] .y3p-cap {
    margin-bottom: 10px;
    font-size: 12.5px;
    line-height: 17px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-phases {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  html[data-shell="v3"] .y3p-ph {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--y3-r-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--y3-ink-secondary);
  }

  html[data-shell="v3"] .y3p-ph span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  html[data-shell="v3"] .y3p-ph span:last-child {
    font-size: 12px;
    font-weight: 500;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-ph i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--y3-border-tint);
  }

  html[data-shell="v3"] .y3p-ph-done i {
    background: var(--y3-teal);
  }

  html[data-shell="v3"] .y3p-ph-on {
    background: var(--y3-surface-2);
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3p-ph-on i {
    background: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3p-why {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 21px;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3p-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13.5px;
    color: var(--y3-ink-secondary);
  }

  html[data-shell="v3"] .y3p-kv b {
    font-weight: 700;
    color: var(--y3-ink);
    font-variant-numeric: tabular-nums;
  }

  html[data-shell="v3"] .y3p-kv b.y3p-t-teal {
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3p-kv b.y3p-t-amber {
    color: var(--y3-amber-ink);
  }

  html[data-shell="v3"] .y3p-chg {
    padding: 8px 0 0;
  }

  html[data-shell="v3"] .y3p-chg span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-chg p {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 19px;
  }

  html[data-shell="v3"] .y3p-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  html[data-shell="v3"] .y3p-act {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 4px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    color: var(--y3-ink);
    cursor: pointer;
    border-radius: var(--y3-r-sm);
  }

  html[data-shell="v3"] .y3p-act:hover {
    background: var(--y3-surface-2);
  }

  html[data-shell="v3"] .y3p-act svg {
    font-size: 16px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-act-danger,
  html[data-shell="v3"] .y3p-act-danger svg {
    color: var(--y3-coral-ink);
  }

  /* The verdict */
  html[data-shell="v3"] .y3p-grid .y3p-verdict {
    padding: 22px 24px;
    border-color: var(--y3-border-tint);
    border-radius: var(--y3-r-xl);
    box-shadow: var(--y3-shadow-md);
  }

  html[data-shell="v3"] .y3p-vhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  html[data-shell="v3"] .y3p-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-eyebrow.y3p-t-teal {
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3p-eyebrow.y3p-t-amber {
    color: var(--y3-amber-ink);
  }

  html[data-shell="v3"] .y3p-eyebrow.y3p-t-coral {
    color: var(--y3-coral-ink);
  }

  html[data-shell="v3"] .y3p-eyebrow svg {
    font-size: 14px;
  }

  html[data-shell="v3"] .y3p-vright {
    font-size: 12.5px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-vtitle {
    margin: 8px 0 2px;
    font-size: 24px;
    line-height: 31px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3p-vsub {
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-vbody {
    max-width: 660px;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3p-vbtns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
  }

  /* The week */
  html[data-shell="v3"] .y3p-whead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin-bottom: 12px;
  }

  html[data-shell="v3"] .y3p-whead h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3p-wsum {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-days {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  html[data-shell="v3"] .y3p-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  html[data-shell="v3"] .y3p-chip-teal {
    background: rgba(15, 166, 140, 0.14);
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3p-chip-coral {
    background: rgba(242, 107, 94, 0.14);
    color: var(--y3-coral-ink);
  }

  html[data-shell="v3"] .y3p-chip-gray {
    background: var(--y3-surface-2);
    border: 1px solid var(--y3-border);
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-chip-out {
    border: 1px solid var(--y3-teal);
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3p-chip-amber {
    background: rgba(242, 162, 74, 0.16);
    color: var(--y3-amber-ink);
  }

  html[data-shell="v3"] .y3p-day {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-md);
    background: var(--y3-surface);
  }

  html[data-shell="v3"] .y3p-s-done,
  html[data-shell="v3"] .y3p-s-today {
    background: var(--y3-surface-2);
    border-color: var(--y3-border-tint);
  }

  html[data-shell="v3"] .y3p-s-missed {
    background: rgba(242, 107, 94, 0.07);
    border-color: rgba(242, 107, 94, 0.32);
  }

  html[data-shell="v3"] .y3p-s-next {
    border-color: var(--y3-teal);
  }

  html[data-shell="v3"] .y3p-unplanned {
    border-style: dashed;
    margin-top: -2px;
  }

  html[data-shell="v3"] .y3p-dow {
    padding-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-main {
    min-width: 0;
  }

  html[data-shell="v3"] .y3p-t1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 9px;
    font-size: 14.5px;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3p-dose {
    font-size: 12.5px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-note {
    margin-top: 3px;
    font-size: 13px;
    line-height: 19px;
    color: var(--y3-ink-secondary);
  }

  html[data-shell="v3"] .y3p-exec {
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 18px;
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3p-ra {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  html[data-shell="v3"] .y3p-link {
    border: 0;
    background: none;
    padding: 2px 4px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--y3-teal-strong);
    cursor: pointer;
  }

  html[data-shell="v3"] .y3p-icon {
    border: 0;
    background: none;
    padding: 3px 5px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
    color: var(--y3-ink-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--y3-fast) var(--y3-ease);
  }

  html[data-shell="v3"] .y3p-icon svg {
    font-size: 14px;
    vertical-align: -2px;
  }

  html[data-shell="v3"] .y3p-day:hover .y3p-icon,
  html[data-shell="v3"] .y3p-icon:focus-visible {
    opacity: 1;
  }

  html[data-shell="v3"] .y3p-icon:hover {
    background: var(--y3-surface-2);
    color: var(--y3-ink);
  }

  /* The other weeks */
  html[data-shell="v3"] .y3p-wk {
    border-top: 1px solid var(--y3-border);
  }

  html[data-shell="v3"] .y3p-wk summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 2px;
    font-size: 13.5px;
    cursor: pointer;
    list-style: none;
  }

  html[data-shell="v3"] .y3p-wk summary::-webkit-details-marker {
    display: none;
  }

  html[data-shell="v3"] .y3p-wk summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 4px;
    border-right: 1.5px solid var(--y3-ink-muted);
    border-bottom: 1.5px solid var(--y3-ink-muted);
    transform: rotate(45deg);
    transition: transform var(--y3-fast) var(--y3-ease);
  }

  html[data-shell="v3"] .y3p-wk[open] summary::after {
    transform: rotate(-135deg);
  }

  html[data-shell="v3"] .y3p-wk-ph {
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-wk-sec {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--y3-ink-secondary);
  }

  html[data-shell="v3"] .y3p-wk .y3p-days {
    padding: 2px 0 12px;
  }

  /* The old suggestions, overlay banner and other-plans strip keep their own
     markup: they stack above the verdict with the grid's gap. */
  html[data-shell="v3"] .y3p-legacy {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  html[data-shell="v3"] .y3p-legacy:empty {
    display: none;
  }

  /* The right rail */
  html[data-shell="v3"] .y3p-days-n {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0 2px;
  }

  html[data-shell="v3"] .y3p-days-n b {
    font-size: 40px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -0.03em;
  }

  html[data-shell="v3"] .y3p-days-n span {
    font-size: 14px;
    color: var(--y3-ink-secondary);
  }

  html[data-shell="v3"] .y3p-race-sub {
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-hr {
    height: 1px;
    margin: 0 0 6px;
    background: var(--y3-border);
  }

  html[data-shell="v3"] .y3p-grid .y3p-course {
    padding: 0;
    overflow: hidden;
  }

  html[data-shell="v3"] .y3p-elev {
    display: block;
    width: 100%;
    background: var(--y3-surface-2);
  }

  html[data-shell="v3"] .y3p-elev-line {
    fill: none;
    stroke: var(--y3-teal);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html[data-shell="v3"] .y3p-elev-area {
    fill: var(--y3-teal);
    fill-opacity: 0.1;
  }

  html[data-shell="v3"] .y3p-elev-start {
    fill: var(--y3-coral);
    stroke: var(--y3-surface);
    stroke-width: 2;
  }

  html[data-shell="v3"] .y3p-elev-end {
    fill: var(--y3-teal);
    stroke: var(--y3-surface);
    stroke-width: 2;
  }

  html[data-shell="v3"] .y3p-map {
    width: 100%;
    height: 170px;
  }

  html[data-shell="v3"] .y3p-map-foot {
    padding: 6px 16px;
    font-size: 11.5px;
    color: var(--y3-ink-muted);
    background: var(--y3-surface-2);
  }

  html[data-shell="v3"] .y3p-cbody {
    padding: 14px 16px 16px;
  }

  html[data-shell="v3"] .y3p-cname {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3p-cname svg {
    font-size: 16px;
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3p-cplace {
    margin: 2px 0 8px;
    font-size: 12.5px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-cstat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 6px 0;
    font-size: 13px;
  }

  html[data-shell="v3"] .y3p-cstat span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-cstat svg {
    font-size: 15px;
  }

  html[data-shell="v3"] .y3p-cstat b {
    font-weight: 700;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3p-cnote {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-sim {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--y3-border);
    font-size: 13px;
  }

  html[data-shell="v3"] .y3p-sim div b {
    display: block;
    font-weight: 600;
  }

  html[data-shell="v3"] .y3p-sim span {
    font-size: 12px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3p-sim div span {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * ACTIVITIES SCREEN (redesign, web only, behind SCREENS_V3).
 * docs/screens-redesign-spec.md, section 9. Every rule sits under
 * html[data-shell="v3"] inside the desktop query, so the apps, today's site and
 * a phone cannot match one. The grid, cards and eyebrow are the dashboard's
 * (.y3-*); today's own activity card classes (.act-card, .act-hdr, .act-stat,
 * .act-footer, ...) are REUSED unchanged for layout, since a v3 card is a
 * richer version of the same card, not a different shape; only what is new to
 * this screen is named y3a-. Flat surfaces and one teal: no gradients.
 * ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* The page-level restyle, and hiding today's static controls (the redesigned
     screen draws its own filter chips and its own load-more button inside the
     grid), apply only while the redesigned screen is drawn.
     ⛔ `max-width: 1180px; margin: 0 auto` is the LEGACY (v2) single-column
     Activities layout, set unconditionally in views.css on `.acts-scroll`
     (data-ui="v2" is always on <html>, so it always matches). This screen's
     three-column .y3-grid never needed a page-level width cap — Goals,
     Plan and the dashboard grid all size themselves from the grid's own
     column widths — but nothing here ever RESET those two properties, so
     they kept applying from the legacy rule (CSS cascades per-property,
     and this rule only redefined padding/background), squeezing the whole
     redesigned grid into a centered 1180px column with huge dead margins
     on either side at any wider viewport (reported by the owner: "white
     margin on both sides, the text on the activities have no margins" —
     the card content wasn't missing padding, the whole page was squeezed
     narrow enough that the wasted space read as a missing margin). */
  html[data-shell="v3"] #actsScroll.y3a-on {
    background: var(--y3-app-bg);
    padding: 20px 24px 28px;
    max-width: none;
    margin: 0;
  }

  html[data-shell="v3"] #actsScroll.y3a-on #actsFilters,
  html[data-shell="v3"] #actsScroll.y3a-on .acts-quick-log,
  html[data-shell="v3"] #actsScroll.y3a-on > .acts-loadmore-wrap,
  html[data-shell="v3"] #actsScroll.y3a-on #actsSummary {
    display: none;
  }

  html[data-shell="v3"] .y3a-grid .y3-left,
  html[data-shell="v3"] .y3a-grid .y3-center {
    gap: 16px;
  }

  html[data-shell="v3"] .y3a-tight {
    padding: 14px 16px;
  }

  html[data-shell="v3"] .y3a-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: 13.5px;
    color: var(--y3-ink-secondary);
  }

  html[data-shell="v3"] .y3a-kv b {
    font-weight: 700;
    color: var(--y3-ink);
    font-variant-numeric: tabular-nums;
  }

  /* This week */
  html[data-shell="v3"] .y3a-week {
    padding: 16px 18px;
  }

  html[data-shell="v3"] .y3a-whead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  html[data-shell="v3"] .y3a-wrange {
    font-size: 12px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3a-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--y3-ink-muted);
    text-align: center;
  }

  html[data-shell="v3"] .y3a-pips {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 4px;
  }

  html[data-shell="v3"] .y3a-pip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    border-radius: var(--y3-r-sm);
    background: var(--y3-surface-2);
    color: var(--y3-ink-muted);
    font-size: 11px;
  }

  html[data-shell="v3"] .y3a-pip-done {
    background: rgba(15, 166, 140, 0.14);
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3a-pip-today {
    border: 1px solid var(--y3-teal);
  }

  html[data-shell="v3"] .y3a-pip-missed {
    background: rgba(242, 107, 94, 0.1);
  }

  html[data-shell="v3"] .y3a-pip-check svg {
    font-size: 12px;
  }

  html[data-shell="v3"] .y3a-logged {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 14px 0 4px;
  }

  html[data-shell="v3"] .y3a-logged b {
    font-size: 26px;
    line-height: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3a-logged span {
    font-size: 13px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3a-bar {
    height: 6px;
    margin: 6px 0;
    border-radius: 3px;
    background: var(--y3-border);
    overflow: hidden;
  }

  html[data-shell="v3"] .y3a-bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--y3-amber);
  }

  html[data-shell="v3"] .y3a-bar-cap {
    font-size: 12px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3a-hr {
    height: 1px;
    margin: 10px 0 4px;
    background: var(--y3-border);
  }

  /* Filter chips */
  html[data-shell="v3"] .y3a-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
  }

  html[data-shell="v3"] .y3a-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-full);
    background: var(--y3-surface);
    color: var(--y3-ink-secondary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  html[data-shell="v3"] .y3a-chip small {
    font-size: 11px;
    font-weight: 700;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3a-chip-on {
    border-color: var(--y3-teal);
    background: rgba(15, 166, 140, 0.1);
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3a-chip-on small {
    color: var(--y3-teal-strong);
  }

  /* The card: today's .act-* layout, restyled as a plain surface, plus what
     is new (the analysis block, the Strava lockup, kudos). */
  html[data-shell="v3"] .y3a-grid .y3a-card {
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-lg);
    background: var(--y3-surface);
    box-shadow: var(--y3-shadow-sm);
    padding: 16px 18px;
  }

  /* Owner request (2026-09-22): the analysis block reads flush against the
     card's left edge next to the stats bar above it — give it its own
     clear left inset + accent rule, like a callout, rather than only the
     card's ambient 18px padding. */
  html[data-shell="v3"] .y3a-an {
    margin-top: 10px;
    padding-top: 10px;
    padding-left: 14px;
    border-top: 1px solid var(--y3-border);
    border-left: 2px solid var(--y3-teal);
  }

  html[data-shell="v3"] .y3a-an-h {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3a-an p {
    margin: 6px 0 8px;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3a-vrow {
    display: grid;
    grid-template-columns: 110px 56px 1fr;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
  }

  html[data-shell="v3"] .y3a-vrow > span:first-child {
    color: var(--y3-ink-secondary);
  }

  html[data-shell="v3"] .y3a-vrow > span:last-child {
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3a-v-good {
    color: var(--y3-teal-strong);
    font-weight: 700;
  }

  html[data-shell="v3"] .y3a-v-watch {
    color: var(--y3-amber-ink);
    font-weight: 700;
  }

  html[data-shell="v3"] .y3a-v-bad {
    color: var(--y3-coral-ink);
    font-weight: 700;
  }

  /* The footer is two DELIBERATE rows (actions, then attribution+kudos —
     static/platform.js:_y3aCard), rather than one row left to wrap
     wherever the browser happens to break it. See the comment at
     _y3aCard's footRows: a single row with `.y3a-kudos { margin-left:
     auto }` looked right only while every item fit on one line, and
     split into "Strava lockup flush left, kudos flush right, dead gap
     between" the moment it wrapped to two lines. */
  html[data-shell="v3"] .act-footer.y3a-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* Owner request: View details (secondary) on the left, Analyze with
     YUHA Coach (the primary CTA) on the right, rather than both bunched
     together on one side. */
  html[data-shell="v3"] .y3a-foot-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  html[data-shell="v3"] .y3a-foot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  html[data-shell="v3"] .y3a-strava {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  html[data-shell="v3"] .y3a-pwr {
    height: 16px;
  }

  html[data-shell="v3"] .y3a-kudos {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3a-kudos svg {
    font-size: 13px;
  }

  html[data-shell="v3"] .y3a-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 4px;
  }

  /* Sources */
  html[data-shell="v3"] .y3a-srow {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3a-srow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--y3-border-tint);
  }

  html[data-shell="v3"] .y3a-src-on {
    background: var(--y3-teal);
  }

  html[data-shell="v3"] .y3a-sr {
    margin-left: auto;
    font-size: 12px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3a-manage {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--y3-teal-strong);
    text-decoration: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * ACTIVITY DETAIL SCREEN (redesign, web only, behind SCREENS_V3).
 * docs/screens-redesign-spec.md, section 8. The grid and card shell are the
 * dashboard's (.y3-grid / .y3-left / .y3-center / .y3-right / .y3-card /
 * .y3-eyebrow), reused unchanged; today's own deep-dive markup (.actd-*,
 * defined in platform.css, NOT gated here) is reused unchanged too, per
 * platform.js's _actdDeepDiveHtml/_actdSimilarHtml extraction — only what is
 * new to this screen is named y3ad-. Flat surfaces and one teal: no
 * gradients, matching every other redesigned screen's own rule.
 * ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* The page-level restyle, and hiding today's own back row (this screen's
     header carries its own breadcrumb back-button), apply only while the
     redesigned screen is drawn — never to #actdScroll itself, or every
     phone-width and flag-off desktop view of this page would leak the mint
     background and lose its Back button (the exact mistake the Goals
     screen's first review caught and every screen since has avoided). */
  html[data-shell="v3"] #actdScroll.y3ad-on {
    background: var(--y3-app-bg);
    padding: 20px 24px 28px;
  }

  html[data-shell="v3"] #actdScroll.y3ad-on .actd-back-row {
    display: none;
  }

  html[data-shell="v3"] .y3ad-grid-outer {
    align-items: start;
  }

  html[data-shell="v3"] .y3ad-grid.y3-left,
  html[data-shell="v3"] .y3ad-grid.y3-right,
  html[data-shell="v3"] .y3ad-grid.y3-center {
    gap: 16px;
  }

  /* Header */
  html[data-shell="v3"] .y3ad-header {
    background: transparent;
    padding: 0;
  }

  html[data-shell="v3"] .y3ad-crumb {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--y3-teal-strong);
    cursor: pointer;
  }

  html[data-shell="v3"] .y3ad-header-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  html[data-shell="v3"] .y3ad-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--y3-ink);
    margin: 0 0 2px;
  }

  html[data-shell="v3"] .y3ad-meta {
    font-size: 13px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3ad-stats {
    margin-top: 16px;
  }

  /* Cards in the rails */
  html[data-shell="v3"] .y3ad-tight {
    padding: 14px 16px;
  }

  html[data-shell="v3"] .y3ad-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--y3-ink);
    margin: 0;
  }

  html[data-shell="v3"] .y3ad-card-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  /* On-page nav */
  html[data-shell="v3"] .y3ad-nav a {
    display: block;
    padding: 6px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--y3-teal-strong);
    text-decoration: none;
  }

  /* Against your recent runs */
  html[data-shell="v3"] .y3ad-rc-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    font-size: 13.5px;
    color: var(--y3-ink-secondary);
    border-top: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .y3ad-rc-row:first-of-type {
    border-top: none;
  }
  html[data-shell="v3"] .y3ad-rc-row b {
    font-weight: 700;
    color: var(--y3-ink);
    font-variant-numeric: tabular-nums;
  }
  html[data-shell="v3"] .y3ad-rc-note {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--y3-ink-muted);
  }

  /* Nearby in your log */
  html[data-shell="v3"] .y3ad-neighbor {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 0;
    background: none;
    border: none;
    border-top: 1px solid var(--y3-border);
    text-align: left;
    cursor: pointer;
  }
  html[data-shell="v3"] .y3ad-neighbor:first-of-type {
    border-top: none;
  }
  html[data-shell="v3"] .y3ad-neighbor-arrow {
    color: var(--y3-ink-muted);
    font-size: 15px;
  }
  html[data-shell="v3"] .y3ad-neighbor-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  html[data-shell="v3"] .y3ad-neighbor-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--y3-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html[data-shell="v3"] .y3ad-neighbor-meta {
    font-size: 12px;
    color: var(--y3-ink-muted);
  }

  /* How this fits the plan */
  html[data-shell="v3"] .y3ad-pf-planned {
    font-size: 14px;
    font-weight: 700;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3ad-pf-bits {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3ad-pf-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--y3-teal-strong);
    text-decoration: none;
  }

  /* YUHA's analysis (the reshaped, richer verdict rows) */
  html[data-shell="v3"] .y3ad-analysis {
    padding: 18px 20px;
  }
  html[data-shell="v3"] .y3ad-an-head {
    font-size: 15px;
    font-weight: 700;
    color: var(--y3-ink);
    margin-bottom: 4px;
  }
  html[data-shell="v3"] .y3ad-an-summary {
    font-size: 14px;
    line-height: 21px;
    color: var(--y3-ink-secondary);
    margin: 0 0 12px;
  }
  html[data-shell="v3"] .y3ad-vrow {
    padding: 10px 0;
    border-top: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .y3ad-vrow:first-of-type {
    border-top: none;
  }
  html[data-shell="v3"] .y3ad-vrow-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  html[data-shell="v3"] .y3ad-vrow-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3ad-vrow-headline {
    margin-top: 3px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3ad-vrow-detail {
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--y3-ink-muted);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * INSIGHTS SCREEN — SLEEP, RECOVERY & READINESS, TRAINING LOAD (redesign,
 * web only, behind SCREENS_V3). docs/screens-redesign-spec.md, section 10.
 * ⛔ CORRECTION: this comment said only Sleep was built. All three tabs
 * shipped (Recovery & Readiness and Training Load followed the same day),
 * `_INS_V3_RENDER` in views.js names all three, and the rules below apply
 * to all three — a stale claim here is exactly what RULE #1 item 5 exists
 * to catch before the next reader trusts it. The grid, cards, eyebrow, key-
 * value rows, divider, tight padding and source rows are the DASHBOARD's
 * and the ACTIVITIES screen's (.y3-*,
 * .y3a-kv, .y3a-hr, .y3a-tight, .y3a-bar, .y3a-srow, .y3a-src-on/off, .y3a-sr,
 * .y3a-manage — already scoped to `html[data-shell="v3"]` with no ancestor
 * restriction, so they are reusable here with zero duplication); only what
 * is new to this screen is named y3i-. The sparkline itself is the SAME
 * component the dashboard's Weekly Trends tiles draw (`_v3Spark` in
 * views.js) — this screen never draws a second chart implementation.
 * The page-level restyle sits under `.ins-scroll-area.y3i-on`, a class the
 * loader sets ONLY while the redesigned Sleep tab is actually drawn (the
 * Goals-screen leak this repeats the fix for: CLAUDE.md).
 * ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  html[data-shell="v3"] .ins-scroll-area.y3i-on {
    background: var(--y3-app-bg);
  }

  html[data-shell="v3"] .y3i-grid {
    padding: 20px 24px 28px;
  }

  html[data-shell="v3"] .y3i-grid .y3-left,
  html[data-shell="v3"] .y3i-grid .y3-center,
  html[data-shell="v3"] .y3i-grid .y3-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* ── Left: the "Last 30 nights" list ─────────────────────────────── */
  html[data-shell="v3"] .y3i-lhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  html[data-shell="v3"] .y3i-lrange {
    font-size: 12px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3i-lrow {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--y3-ink-secondary);
  }

  html[data-shell="v3"] .y3i-lrow b {
    color: var(--y3-ink);
    font-weight: 600;
  }

  html[data-shell="v3"] .y3i-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--y3-border);
  }

  html[data-shell="v3"] .y3i-dot-good {
    background: var(--y3-teal);
  }

  html[data-shell="v3"] .y3i-dot-watch {
    background: var(--y3-amber);
  }

  html[data-shell="v3"] .y3i-lfoot {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 16px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3i-target-big {
    margin-top: 4px;
    font-size: 30px;
    font-weight: 800;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3i-target-big span {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--y3-ink-muted);
  }

  /* Recovery & Readiness's "why this score" rows (`_y3iDriverRow`) — the
     dashboard hero's own driver rows, listed rather than stacked as bars. */
  html[data-shell="v3"] .y3i-drow {
    padding: 7px 0;
    border-top: 1px solid var(--y3-border-tint);
  }

  html[data-shell="v3"] .y3i-drow:first-child {
    border-top: none;
  }

  html[data-shell="v3"] .y3i-drow-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--y3-ink);
    font-weight: 600;
  }

  html[data-shell="v3"] .y3i-drow-ev {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 16px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3i-htr {
    background: var(--y3-surface-2);
    border-color: var(--y3-border-tint);
  }

  html[data-shell="v3"] .y3i-htr p {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--y3-ink-secondary);
  }

  /* ── Centre: coach verdict + chart-cards ─────────────────────────── */
  html[data-shell="v3"] .y3i-coach {
    border-color: var(--y3-border-tint);
    box-shadow: var(--y3-shadow-md);
    padding: 18px 20px;
  }

  html[data-shell="v3"] .y3i-coach-hd {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  html[data-shell="v3"] .y3i-coach-brand {
    font-size: 12px;
    font-weight: 700;
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3i-coach-when {
    font-size: 11.5px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3i-coach-h {
    margin: 10px 0 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3i-coach-p {
    margin: 8px 0 0;
    font-size: 14.5px;
    line-height: 21px;
    color: var(--y3-ink-secondary);
  }

  html[data-shell="v3"] .y3i-coach-next {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--y3-surface-2);
    border-radius: var(--y3-r-md);
    font-size: 13px;
    line-height: 19px;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3i-coach-next b {
    font-weight: 700;
  }

  html[data-shell="v3"] .y3i-chart-card {
    padding: 16px 18px;
  }

  html[data-shell="v3"] .y3i-accent {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3i-chart-val-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
  }

  html[data-shell="v3"] .y3i-chart-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3i-chart-suffix {
    margin-left: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3i-chart-meta {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  html[data-shell="v3"] .y3i-range {
    font-size: 11.5px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3i-chip {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: var(--y3-r-full);
  }

  html[data-shell="v3"] .y3i-chip-good {
    color: var(--y3-teal-strong);
    background: rgba(15, 166, 140, 0.12);
  }

  html[data-shell="v3"] .y3i-chip-watch {
    color: var(--y3-amber-ink);
    background: rgba(242, 162, 74, 0.16);
  }

  /* REST-verdict tone (Recovery & Readiness tab) — distinct from watch/
     caution, so a rest day's chip does not read the same as a caution one. */
  html[data-shell="v3"] .y3i-chip-bad {
    color: var(--y3-coral-ink);
    background: rgba(242, 107, 94, 0.14);
  }

  /* `_v3Spark`'s SVG element classes (.y3-sp-band/-edge/-line/-pt/-dot) are
     styled only under `.y3-trends` (the dashboard's own trend-tile section,
     dashboard-v3.css:1250-1274) — a bare `<svg>` with no matching rule here
     would fall back to the browser's default `fill:black` on every
     `<polyline>`/`<path>`, which is exactly the solid-black blob this
     screen drew before these six rules existed (found by driving it in a
     browser, not by either test: neither one renders CSS). Same values,
     copied rather than borrowing `.y3-trends` as a wrapper, since that
     class also carries an unrelated section-header/tile-grid layout this
     screen does not want. */
  html[data-shell="v3"] .y3i-chart-card .y3-tile-spark {
    display: block;
    width: 100%;
    height: 130px;
    margin-top: 10px;
    overflow: visible;
  }
  html[data-shell="v3"] .y3i-chart-card .y3-sp-band { fill: rgba(15, 166, 140, 0.10); }
  html[data-shell="v3"] .y3i-chart-card .y3-sp-edge {
    fill: none;
    stroke: rgba(15, 166, 140, 0.35);
    stroke-width: 1;
    stroke-dasharray: 4 4;
  }
  html[data-shell="v3"] .y3i-chart-card .y3-sp-line {
    fill: none;
    stroke: #5C7C74;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  html[data-shell="v3"] .y3i-chart-card .y3-sp-pt {
    stroke: #5C7C74;
    stroke-width: 4;
    stroke-linecap: round;
  }
  html[data-shell="v3"] .y3i-chart-card .y3-sp-dot {
    stroke: var(--y3-teal);
    stroke-width: 7;
    stroke-linecap: round;
  }
  html[data-shell="v3"] .y3i-chart-card .y3-sp-dot.out { stroke: var(--y3-amber); }

  html[data-shell="v3"] .y3i-verdict {
    margin-top: 10px;
    padding-left: 10px;
    border-left: 2px solid var(--y3-teal);
  }

  html[data-shell="v3"] .y3i-verdict p {
    margin: 0;
    font-size: 13px;
    line-height: 19px;
    color: var(--y3-ink-secondary);
  }

  /* ── Right: pattern / cost / related goal / sources ──────────────── */
  html[data-shell="v3"] .y3i-pattern {
    padding: 14px 16px;
  }

  html[data-shell="v3"] .y3i-pattern-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--y3-lavender);
  }

  html[data-shell="v3"] .y3i-pattern-title {
    margin-top: 6px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 20px;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3i-pattern-ev {
    margin-top: 4px;
    font-size: 12px;
    color: var(--y3-ink-muted);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * SOURCES SCREEN (redesign, web only, behind SCREENS_V3).
 * docs/screens-redesign-spec.md. Reuses the DASHBOARD's and INSIGHTS
 * screen's generic pieces (.y3-*, .y3a-tight, .y3a-bar, .y3a-hr, .y3a-manage,
 * .y3i-dot, .y3i-chip, .y3i-lhead, .y3i-lrow, .y3i-lfoot — already scoped to
 * `html[data-shell="v3"]` with no ancestor restriction) for the left rail's
 * "Sync health" / "What YUHA can see" cards and the right rail's overlap
 * list; only the connected/available SOURCE CARDS themselves (badge, stat
 * chips, feeds row, button row) and the section-group header are new here,
 * named `y3so-`. The page-level restyle sits under `.sources-scroll.y3so-on`,
 * a class the loader sets ONLY while the redesigned screen actually draws
 * (the Goals-screen leak this repeats the fix for: CLAUDE.md).
 * ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  html[data-shell="v3"] .sources-scroll.y3so-on {
    background: var(--y3-app-bg);
  }

  html[data-shell="v3"] .y3so-grid {
    padding: 20px 24px 28px;
  }

  html[data-shell="v3"] .y3so-grid .y3-left,
  html[data-shell="v3"] .y3so-grid .y3-center,
  html[data-shell="v3"] .y3so-grid .y3-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* ── Centre: Connected / Needs attention / Available groups ─────────── */
  html[data-shell="v3"] .y3so-group-hd {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  html[data-shell="v3"] .y3so-group-hd .y3-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3so-group-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
  }

  html[data-shell="v3"] .y3so-card {
    background: var(--y3-surface);
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-lg);
    box-shadow: var(--y3-shadow-sm);
    padding: 16px 18px;
  }

  html[data-shell="v3"] .y3so-card-slim {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
  }

  html[data-shell="v3"] .y3so-card-hd {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  html[data-shell="v3"] .y3so-badge {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--y3-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3so-badge-strava   { background: #fc4c02; }
  html[data-shell="v3"] .y3so-badge-garmin   { background: #009cda; }
  html[data-shell="v3"] .y3so-badge-apple    { background: #0F1B17; }
  html[data-shell="v3"] .y3so-badge-default  { background: #5E6E68; }

  html[data-shell="v3"] .y3so-card-id {
    min-width: 0;
    flex: 1 1 auto;
  }

  html[data-shell="v3"] .y3so-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3so-meta {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3so-avail-note {
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 17px;
    color: var(--y3-ink-muted);
  }

  html[data-shell="v3"] .y3so-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
  }

  html[data-shell="v3"] .y3so-stat {
    padding: 3px 9px;
    border-radius: var(--y3-r-full);
    background: var(--y3-surface-2);
    font-size: 12px;
    font-weight: 600;
    color: var(--y3-ink-secondary);
  }

  html[data-shell="v3"] .y3so-trouble {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: var(--y3-r-md);
    background: rgba(242, 162, 74, 0.12);
    color: var(--y3-amber-ink);
    font-size: 12.5px;
    line-height: 18px;
  }

  html[data-shell="v3"] .y3so-feeds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }

  html[data-shell="v3"] .y3so-feed {
    padding: 2px 8px;
    border-radius: var(--y3-r-full);
    border: 1px solid var(--y3-border-tint);
    font-size: 11px;
    font-weight: 600;
    color: var(--y3-teal-strong);
  }

  html[data-shell="v3"] .y3so-manage {
    display: inline-block;
    margin-top: 10px;
    font-size: 12.5px;
  }

  html[data-shell="v3"] .y3so-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  html[data-shell="v3"] .y3so-card-slim .y3so-btn-row {
    flex: none;
    margin-top: 0;
  }

  html[data-shell="v3"] .y3so-btn {
    padding: 7px 12px;
    border-radius: var(--y3-r-full);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--y3-border-tint);
    background: var(--y3-surface);
    color: var(--y3-ink);
  }

  html[data-shell="v3"] .y3so-btn.ghost {
    background: transparent;
  }

  html[data-shell="v3"] .y3so-btn.primary {
    border-color: transparent;
    background: var(--y3-teal);
    color: #fff;
  }

  html[data-shell="v3"] .y3so-badge-pill {
    padding: 4px 10px;
    border-radius: var(--y3-r-full);
    background: var(--y3-surface-2);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--y3-ink-muted);
  }

  /* ── Right: the overlap-rule list borrows Insights' list-row shape,
     plus its own note line under each row ─────────────────────────── */
  html[data-shell="v3"] .y3so-overlap-note {
    margin: -4px 0 4px 15px;
  }

  /* ── Left: "What YUHA can see" — the backup-source count beside the
     primary source name, not a second list of names ────────────────── */
  html[data-shell="v3"] .y3so-cov-extra {
    color: var(--y3-ink-muted);
    font-weight: 500;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * NYRR 9+1 SCREEN (redesign, web only, behind SCREENS_V3).
 * docs/screens-redesign-spec.md, section 12. Reuses the dashboard's grid,
 * cards and coach panel (.y3-grid / .y3-card / .y3-coach / .y3-eyebrow);
 * only what is new here is named `y3n-`. The page-level restyle sits under
 * `#viewNyrr.y3n-on`, a class static/nyrr.js sets ONLY while the redesigned
 * screen (or its restyled connect flow) draws, so today's 9+1 screen, the
 * apps and phone widths keep exactly what they had (the Goals-screen leak,
 * not repeated). Text on light uses --y3-teal-strong, never --y3-teal.
 * ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  html[data-shell="v3"] #viewNyrr.y3n-on {
    background: var(--y3-app-bg);
  }
  html[data-shell="v3"] #viewNyrr.y3n-on .nyrr-view {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  html[data-shell="v3"] .y3n-grid {
    padding: 20px 24px 28px;
  }
  /* This screen is the one that sets the line under the title ("2027 NYC
     Marathon entry · Saturday, September 26"). At 769 px it pushed the title
     onto three lines; the title now holds its line and the context line
     ellipses before it can crowd the Ask YUHA pill. */
  html[data-shell="v3"] .top-nav-page,
  html[data-shell="v3"] .top-nav-right {
    flex-shrink: 0;
    white-space: nowrap;
  }
  html[data-shell="v3"] .top-nav-sub {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-shell="v3"] .y3n-grid .y3-left,
  html[data-shell="v3"] .y3n-grid .y3-center,
  html[data-shell="v3"] .y3n-grid .y3-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  /* ── Cards ───────────────────────────────────────────────────────────── */
  html[data-shell="v3"] .y3n-grid .y3n-card {
    padding: 18px 20px;
  }
  html[data-shell="v3"] .y3n-card-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  html[data-shell="v3"] .y3n-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3n-meta {
    font-size: 12px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3n-hr {
    height: 1px;
    margin: 14px 0 10px;
    background: var(--y3-border);
  }
  html[data-shell="v3"] .y3n-hr-tint {
    background: var(--y3-border-tint);
  }
  html[data-shell="v3"] .y3n-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
  }
  html[data-shell="v3"] .y3n-kv span {
    color: var(--y3-ink-muted);
    white-space: nowrap;
  }
  html[data-shell="v3"] .y3n-kv b {
    font-weight: 600;
    color: var(--y3-ink);
    text-align: right;
  }
  html[data-shell="v3"] .y3n-kvs {
    margin-top: 10px;
  }
  html[data-shell="v3"] .y3n-kv b.y3n-tone-watch,
  html[data-shell="v3"] .y3n-prog-line b.y3n-tone-watch {
    color: var(--y3-amber-ink);
  }
  html[data-shell="v3"] .y3n-kv b.y3n-tone-good {
    color: var(--y3-teal-strong);
  }

  /* ── Chips ───────────────────────────────────────────────────────────── */
  html[data-shell="v3"] .y3n-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--y3-r-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  html[data-shell="v3"] .y3n-chip-good {
    background: var(--y3-surface-2);
    color: var(--y3-teal-strong);
  }
  html[data-shell="v3"] .y3n-chip-watch {
    background: rgba(242, 162, 74, 0.16);
    color: var(--y3-amber-ink);
  }
  html[data-shell="v3"] .y3n-chip-earned {
    background: var(--y3-teal-strong);
    color: #FFFFFF;
  }
  html[data-shell="v3"] .y3n-chip-credit {
    background: rgba(91, 124, 250, 0.12);
    color: #3E5BD0;
  }

  /* ── Left: Your 9+1 and How 9+1 works ────────────────────────────────── */
  html[data-shell="v3"] .y3n-prog {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
  }
  html[data-shell="v3"] .y3n-prog-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3n-prog-line b {
    font-weight: 700;
  }
  html[data-shell="v3"] .y3n-minisegs {
    display: flex;
    gap: 3px;
    margin-bottom: 6px;
  }
  html[data-shell="v3"] .y3n-minisegs i {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--y3-border);
  }
  html[data-shell="v3"] .y3n-minisegs i.y3n-seg-done,
  html[data-shell="v3"] .y3n-volbar.y3n-volbar-done {
    background: var(--y3-teal);
  }
  html[data-shell="v3"] .y3n-volbar {
    height: 5px;
    border-radius: 3px;
    background: var(--y3-border);
  }
  html[data-shell="v3"] .y3n-how {
    padding: 16px 18px;
    border: 1px solid var(--y3-border-tint);
    border-radius: var(--y3-r-lg);
    background: var(--y3-surface-2);
  }
  html[data-shell="v3"] .y3n-how p {
    margin: 9px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--y3-ink-secondary);
    text-wrap: pretty;
  }
  html[data-shell="v3"] .y3n-how strong {
    font-weight: 600;
    color: var(--y3-ink);
  }

  /* ── Center: the hero ────────────────────────────────────────────────── */
  html[data-shell="v3"] .y3n-hero {
    padding: 20px 22px;
    border-color: var(--y3-border-tint);
    border-radius: var(--y3-r-xl);
    box-shadow: var(--y3-shadow-md);
  }
  html[data-shell="v3"] .y3n-hero-top {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  html[data-shell="v3"] .y3n-count {
    flex: none;
  }
  html[data-shell="v3"] .y3n-big {
    font-size: 52px;
    line-height: 50px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--y3-teal-strong);
    font-variant-numeric: tabular-nums;
  }
  html[data-shell="v3"] .y3n-of {
    margin-left: 6px;
    font-size: 17px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3n-count-l {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3n-hero-txt {
    flex: 1;
    min-width: 0;
  }
  html[data-shell="v3"] .y3n-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  html[data-shell="v3"] .y3n-verdict {
    margin: 9px 0 0;
    font-size: 24px;
    line-height: 31px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--y3-ink);
    text-wrap: balance;
  }
  html[data-shell="v3"] .y3n-segs {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 5px;
    margin-top: 16px;
  }
  html[data-shell="v3"] .y3n-segs i {
    height: 8px;
    border-radius: 4px;
    background: var(--y3-border);
  }
  html[data-shell="v3"] .y3n-segs i.y3n-seg-done {
    background: var(--y3-teal);
  }
  html[data-shell="v3"] .y3n-segs i.y3n-seg-next,
  html[data-shell="v3"] .y3n-segs i.y3n-seg-pending {
    background: var(--y3-border-tint);
  }
  html[data-shell="v3"] .y3n-seg-cap {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 11px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3n-hero .y3n-coach {
    margin-top: 18px;
  }
  html[data-shell="v3"] .y3n-coach .cc-av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  /* ── Rows: counting, needs confirming, still to do ───────────────────── */
  html[data-shell="v3"] .y3n-list {
    margin-top: 8px;
  }
  html[data-shell="v3"] .y3n-row {
    border-bottom: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .y3n-list .y3n-row:last-child {
    border-bottom: none;
  }
  html[data-shell="v3"] .y3n-row-hd {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 64px 84px auto 18px;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 13px 2px;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    color: inherit;
  }
  html[data-shell="v3"] button.y3n-row-hd {
    cursor: pointer;
    transition: background var(--y3-fast) var(--y3-ease);
  }
  html[data-shell="v3"] button.y3n-row-hd:hover {
    background: var(--y3-surface-2);
  }
  html[data-shell="v3"] button.y3n-row-hd:focus-visible {
    outline: 2px solid var(--y3-teal-strong);
    outline-offset: -2px;
  }
  html[data-shell="v3"] .y3n-row-credit .y3n-row-hd,
  html[data-shell="v3"] .y3n-row-hd.y3n-row-3 {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }
  html[data-shell="v3"] .y3n-row-needs .y3n-row-hd {
    grid-template-columns: 30px minmax(0, 1fr) 64px 84px auto;
  }
  html[data-shell="v3"] .y3n-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--y3-r-full);
    box-sizing: border-box;
  }
  html[data-shell="v3"] .y3n-dot svg {
    font-size: 13px;
  }
  html[data-shell="v3"] .y3n-dot-done {
    background: var(--y3-teal);
    color: #FFFFFF;
  }
  html[data-shell="v3"] .y3n-dot-credit {
    background: rgba(91, 124, 250, 0.12);
    color: #3E5BD0;
  }
  html[data-shell="v3"] .y3n-dot-watch {
    background: rgba(242, 162, 74, 0.16);
    color: var(--y3-amber-ink);
  }
  html[data-shell="v3"] .y3n-dot-next {
    border: 1.5px solid var(--y3-teal);
    background: var(--y3-surface);
  }
  html[data-shell="v3"] .y3n-dot-later {
    border: 1.5px dashed var(--y3-border-tint);
    background: var(--y3-surface);
  }
  html[data-shell="v3"] .y3n-row-m {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  html[data-shell="v3"] .y3n-row-m b {
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    color: var(--y3-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-shell="v3"] .y3n-row-m small {
    margin-top: 2px;
    font-size: 12px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3n-row-dist {
    font-size: 13px;
    color: var(--y3-ink-secondary);
    white-space: nowrap;
  }
  html[data-shell="v3"] .y3n-row-time {
    font-size: 14px;
    font-weight: 700;
    color: var(--y3-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  html[data-shell="v3"] .y3n-chev {
    display: inline-flex;
    justify-self: center;
    color: var(--y3-ink-muted);
    transition: transform var(--y3-fast) var(--y3-ease);
  }
  html[data-shell="v3"] .y3n-chev svg {
    font-size: 15px;
  }
  html[data-shell="v3"] .y3n-row.y3n-open .y3n-chev {
    transform: rotate(180deg);
  }
  html[data-shell="v3"] .y3n-row-body {
    display: none;
    flex-wrap: wrap;
    gap: 28px;
    padding: 0 2px 14px 42px;
  }
  html[data-shell="v3"] .y3n-row.y3n-open .y3n-row-body {
    display: flex;
  }
  html[data-shell="v3"] .y3n-row-body small {
    display: block;
    font-size: 11px;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] .y3n-row-body b {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] .y3n-sub-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--y3-border);
  }
  html[data-shell="v3"] .y3n-needs-q {
    padding: 0 2px 14px 42px;
  }
  html[data-shell="v3"] .y3n-needs-q p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 20px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3n-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: none;
  }
  html[data-shell="v3"] .y3n-empty {
    margin: 12px 0 4px;
    font-size: 13px;
    line-height: 20px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3n-foot {
    margin-top: 6px;
    padding-top: 13px;
    border-top: 1px solid var(--y3-border);
  }

  /* ── Buttons and links ───────────────────────────────────────────────── */
  html[data-shell="v3"] .y3n-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--y3-border);
    border-radius: 10px;
    background: var(--y3-surface);
    color: var(--y3-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--y3-fast) var(--y3-ease);
  }
  html[data-shell="v3"] .y3n-btn:hover {
    background: var(--y3-surface-2);
    text-decoration: none;
  }
  html[data-shell="v3"] .y3n-btn:disabled {
    opacity: 0.6;
    cursor: default;
  }
  html[data-shell="v3"] .y3n-btn.y3n-btn-fill {
    border-color: var(--y3-teal-strong);
    background: var(--y3-teal-strong);
    color: #FFFFFF;
  }
  html[data-shell="v3"] .y3n-btn.y3n-btn-fill:hover {
    border-color: var(--y3-teal-hover);
    background: var(--y3-teal-hover);
  }
  html[data-shell="v3"] .y3n-btn:focus-visible,
  html[data-shell="v3"] .y3n-link:focus-visible {
    outline: 2px solid var(--y3-teal-strong);
    outline-offset: 2px;
  }
  html[data-shell="v3"] .y3n-btn.y3n-btn-block {
    width: 100%;
    padding: 10px;
    font-size: 14px;
  }
  html[data-shell="v3"] .y3n-btn svg {
    font-size: 15px;
  }
  html[data-shell="v3"] .y3n-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--y3-teal-strong);
    text-decoration: none;
  }
  html[data-shell="v3"] .y3n-link:hover {
    text-decoration: underline;
  }
  html[data-shell="v3"] .y3n-link svg {
    font-size: 13px;
  }

  /* ── Right: deadline, qualifiers, official tally ─────────────────────── */
  html[data-shell="v3"] .y3n-deadline {
    padding: 18px;
    border: 1px solid var(--y3-border-tint);
    border-radius: var(--y3-r-xl);
    background: var(--y3-surface-2);
    box-shadow: var(--y3-shadow-sm);
  }
  html[data-shell="v3"] .y3n-dl-big {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-top: 8px;
  }
  html[data-shell="v3"] .y3n-dl-big span {
    font-size: 40px;
    line-height: 38px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--y3-ink);
    font-variant-numeric: tabular-nums;
  }
  html[data-shell="v3"] .y3n-dl-big small {
    padding-bottom: 3px;
    font-size: 14px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3n-dl-to {
    margin-top: 5px;
    font-size: 13px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3n-dl-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3n-deadline .y3n-link {
    margin-top: 8px;
  }
  html[data-shell="v3"] .y3n-tally-note {
    margin: 9px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] .y3n-stale {
    margin: 9px 0 0;
    padding: 8px 10px;
    border-radius: var(--y3-r-md);
    background: rgba(242, 162, 74, 0.12);
    font-size: 13px;
    line-height: 19px;
    color: var(--y3-amber-ink);
  }
  html[data-shell="v3"] .y3n-tally-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 13px 0 12px;
  }

  /* ── Not connected: the connect flow, restyled, in one centered card ── */
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-solo {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 24px 40px;
  }
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow {
    padding: 24px;
    border-color: var(--y3-border-tint);
    border-radius: var(--y3-r-xl);
    box-shadow: var(--y3-shadow-md);
  }
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-step {
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
  }
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--y3-ink-muted);
  }
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-h2 {
    margin: 8px 0 0;
    font-size: 24px;
    line-height: 31px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--y3-ink);
  }
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-sub,
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-note,
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-cb-sub {
    font-size: 13px;
    line-height: 20px;
    color: var(--y3-ink-secondary);
  }
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-input {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--y3-border);
    border-radius: 10px;
    background: var(--y3-surface);
    color: var(--y3-ink);
    font: inherit;
    font-size: 14px;
  }
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-input:focus {
    outline: 2px solid var(--y3-teal-strong);
    outline-offset: 1px;
  }
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-btn,
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-pick {
    padding: 9px 16px;
    border: 1px solid var(--y3-teal-strong);
    border-radius: 10px;
    background: var(--y3-teal-strong);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
  }
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-btn.ghost {
    border-color: var(--y3-border);
    background: var(--y3-surface);
    color: var(--y3-ink);
  }
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-match,
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-confirm-block {
    border: 1px solid var(--y3-border);
    border-radius: var(--y3-r-md);
    background: var(--y3-surface);
    box-shadow: none;
  }
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-flow .nyrr-cb-q {
    font-size: 14px;
    font-weight: 600;
    color: var(--y3-ink);
  }
}

/* ═════════════════════════════════════════════════════════════════════
 * ONE PAGE WIDTH FOR EVERY DESKTOP SCREEN (owner, 2026-10-01)
 *
 * Each screen had grown its own width: the dashboard capped its column at
 * 1180 px, Chat at 920, Workout Plan and Nutrition at 1180, Run Score at
 * 1240, while Goals, Training Plan, Activities, Sources, Insights and NYRR
 * had no cap and stretched across a 2000 px monitor. The footer took the
 * width of whichever box it was mounted in, so it sat inside the column on
 * one screen and ran edge to edge on the next. Some screens padded the
 * scroll container and others padded a grid inside it, so even where the
 * widths matched, the footer did not line up with the cards.
 *
 * Now every screen's content is at most --y3-page-max (1280 px, Chat
 * included, owner's choice), centered beside the sidebar, with a 24 px
 * gutter when the window is narrower. The width comes from ONE place: the
 * scroll container's inline padding. Every inner cap and every inner grid's
 * side padding is reset, so the cards and the footer share the same left
 * and right edges on every screen.
 *
 * The padding is measured against the view (`.desk-view`, an inline-size
 * container), not the viewport, so a pinned rail narrows the page instead
 * of pushing it off center. The vertical padding of each screen is left
 * as it was.
 *
 * Redesigned screens are gated on their own `y3*-on` class (the Goals leak
 * rule); screens with no redesign class (dashboard, Chat, Workout Plan,
 * Nutrition, Run Score) are gated on the shell alone. Apps and phone
 * widths never match: data-shell is web only and this is desktop only.
 * ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  html[data-shell="v3"] {
    --y3-page-max: 1280px;
    --y3-page-gutter: 24px;
  }
  html[data-shell="v3"] .desk-view {
    container-type: inline-size;
    /* Resolved where it is USED, so 100cqi is the nearest .desk-view. */
    --y3-page-side: max(var(--y3-page-gutter), calc((100cqi - var(--y3-page-max)) / 2));
  }

  /* ── The scroll containers carry the width ── */
  html[data-shell="v3"] #viewDash #dashScroll,
  html[data-shell="v3"] #viewChat #messages,
  html[data-shell="v3"] #viewChat .input-area,
  html[data-shell="v3"] #wpScroll,
  html[data-shell="v3"] #rsScroll,
  html[data-shell="v3"] #nutScroll,
  html[data-shell="v3"] #viewGoals.y3g-on #goalsScroll,
  html[data-shell="v3"] #viewTrainingPlan.y3p-on #tpScroll,
  html[data-shell="v3"] #viewActivities #actsScroll.y3a-on,
  html[data-shell="v3"] #viewActivityDetail #actdScroll.y3ad-on,
  html[data-shell="v3"] #viewReports .ins-scroll-area.y3i-on,
  html[data-shell="v3"] #viewSources .sources-scroll.y3so-on,
  html[data-shell="v3"] #viewNyrr.y3n-on .nyrr-view {
    padding-left: var(--y3-page-side);
    padding-right: var(--y3-page-side);
  }

  /* ── Inner caps that used to set the width ── */
  html[data-shell="v3"] #viewDash .dash-scroll > *,
  html[data-shell="v3"] #viewChat #messages,
  html[data-shell="v3"] #viewChat .input-inner,
  html[data-shell="v3"] #wpContent,
  html[data-shell="v3"] #rsContent,
  html[data-shell="v3"] #nutScroll,
  html[data-shell="v3"] #viewActivities #actsScroll.y3a-on {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* ── Inner grids that padded their own sides ── */
  html[data-shell="v3"] #viewReports .ins-scroll-area.y3i-on .y3i-grid,
  html[data-shell="v3"] #viewSources .sources-scroll.y3so-on .y3so-grid,
  html[data-shell="v3"] #viewNyrr.y3n-on .y3n-grid {
    padding-left: 0;
    padding-right: 0;
  }

  /* ── The footer spans the same box as the cards above it ── */
  html[data-shell="v3"] body:not(.native-app) .yuha-app-foot {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    /* The quick-add button sits fixed in the window's bottom-right corner,
       88 px deep. The footer only needs to clear it when the page's right
       edge is that close to the window's. */
    padding-right: max(2px, calc(88px - var(--y3-page-side)));
  }
}