/* v6: desktop-only unified nav rail, shadow-safe horizontal cards, soft right continuation,
   and semantic vertical rhythm. Mobile remains the approved baseline. */
@media (min-width:1024px){
  :root{
    --pc-space-xs:8px;
    --pc-space-tight:12px;
    --pc-space-normal:28px;
    --pc-space-loose:48px;
    --pc-space-major:72px;
  }

  /* ----------------------------------------------------------------------
     Top chapter navigation
     Progress and chapter chips belong to one physical rail. The reading
     progress is painted into the same recessed glass track through
     --v32-progress; the moving liquid chip remains above that track and may
     visibly overshoot it during the existing Breeze spring motion. */
  .nav-shell{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
    overflow:visible!important;
  }
  .nav-scroll{
    position:relative!important;
    isolation:isolate!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex:none!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    width:max-content!important;
    max-width:calc(100vw - 64px)!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:4px 14px!important;
    overflow:visible!important;
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    border:0!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  .nav-scroll::-webkit-scrollbar{display:none!important}
  .nav-scroll::before{
    content:"";
    position:absolute;
    z-index:0;
    left:0;
    right:0;
    top:10px;
    bottom:10px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:999px;
    pointer-events:none;
    background:
      linear-gradient(90deg,
        rgba(72,132,235,.22) 0%,
        rgba(72,132,235,.13) var(--v32-progress,0%),
        transparent var(--v32-progress,0%),
        transparent 100%) padding-box,
      linear-gradient(180deg,rgba(255,255,255,.46),rgba(230,236,245,.30)) padding-box,
      linear-gradient(125deg,
        rgba(255,255,255,.86),
        rgba(255,255,255,.26) 32%,
        rgba(153,183,225,.14) 58%,
        rgba(255,255,255,.56) 82%,
        rgba(255,255,255,.18)) border-box;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.48),
      inset 0 -1px 0 rgba(58,79,112,.06),
      0 5px 14px rgba(34,50,80,.055);
    -webkit-backdrop-filter:blur(22px) saturate(138%);
    backdrop-filter:blur(22px) saturate(138%);
  }
  html[data-theme="dark"] .nav-scroll::before{
    border-color:rgba(255,255,255,.14);
    background:
      linear-gradient(90deg,
        rgba(73,134,238,.20) 0%,
        rgba(73,134,238,.11) var(--v32-progress,0%),
        transparent var(--v32-progress,0%),
        transparent 100%) padding-box,
      linear-gradient(180deg,rgba(61,73,94,.52),rgba(22,27,35,.58)) padding-box,
      linear-gradient(125deg,
        rgba(255,255,255,.21),
        rgba(255,255,255,.055) 30%,
        rgba(91,134,195,.06) 56%,
        rgba(255,255,255,.13) 79%,
        rgba(255,255,255,.035)) border-box;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -1px 0 rgba(0,0,0,.17),
      0 7px 18px rgba(0,0,0,.16);
    -webkit-backdrop-filter:blur(24px) saturate(126%);
    backdrop-filter:blur(24px) saturate(126%);
  }
  .nav-scroll::after{content:none!important}
  .nav-chip{
    position:relative!important;
    z-index:8!important;
    flex:0 0 auto!important;
    min-width:max-content!important;
    min-height:42px!important;
    height:42px!important;
    padding:0 11px!important;
    border:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
  }
  .nav-scroll.v41-skin-ready .nav-chip.is-active,
  .nav-scroll.v39-liquid-ready .nav-chip.is-active{
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
  }
  .nav-v33-indicator{
    position:absolute!important;
    z-index:6!important;
    left:0!important;
    top:0!important;
    overflow:visible!important;
    pointer-events:none!important;
  }
  .nav-v33-indicator>.v37-liquid-skin{
    overflow:visible!important;
  }
  .nav-shell>.read-progress,
  .nav-scroll>.nav-progress-liquid{
    display:none!important;
  }

  /* ----------------------------------------------------------------------
     Desktop text line and vertical rhythm
     Related sentences stay tight, headings and their bodies form one unit,
     distinct guide blocks get a larger break, and full sections retain the
     largest separation. */
  .section .content{
    width:min(calc(100vw - 64px),var(--content))!important;
    max-width:var(--content)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .section{
    padding-top:var(--pc-space-major)!important;
    padding-bottom:calc(var(--pc-space-major) + 10px)!important;
  }
  .section-heading{
    margin-bottom:var(--pc-space-normal)!important;
  }
  .section-heading .eyebrow{
    margin-bottom:var(--pc-space-xs)!important;
  }
  .section-heading h2 + p{
    margin-top:var(--pc-space-tight)!important;
  }
  .guide-stack{
    display:grid!important;
    gap:var(--pc-space-loose)!important;
  }
  .guide-block{
    margin:0!important;
  }
  .guide-block + .guide-block{
    margin-top:0!important;
  }
  .guide-block>h3{
    margin:0 0 var(--pc-space-tight)!important;
  }
  .guide-block__body p{
    margin:0!important;
  }
  .guide-block__body p + p{
    margin-top:var(--pc-space-xs)!important;
  }
  .guide-block :is(.guide-key,.callout-card){
    margin-top:18px!important;
  }
  .guide-block>h3 + :is(.group-card,.scroll-row,.desktop-rail-window){
    margin-top:0!important;
  }
  .subhead{
    margin-bottom:14px!important;
  }
  .content>.subhead:not(:first-child){
    margin-top:38px!important;
  }
  .desktop-rail-window + .content{
    margin-top:var(--pc-space-normal)!important;
  }
  .desktop-rail-window + .micro{
    margin-top:var(--pc-space-xs)!important;
  }
  .desktop-rail-window + .micro + .subhead,
  .micro + .subhead{
    margin-top:26px!important;
  }

  /* ----------------------------------------------------------------------
     Horizontal content rails
     The card face begins exactly on the body-copy line. A 16px paint runway is
     added outside that line so the first card shadow is not clipped. The right
     edge ends exactly on the body-copy right line. */
  .desktop-rail-window{
    --desktop-shadow-runway:16px;
    --desktop-rail-blur:88px;
    --desktop-section-bg:var(--canvas);
    position:relative!important;
    box-sizing:border-box!important;
    width:calc(min(100%,var(--content)) + var(--desktop-shadow-runway))!important;
    max-width:none!important;
    margin-left:calc((100% - min(100%,var(--content))) / 2 - var(--desktop-shadow-runway))!important;
    margin-right:0!important;
    overflow:hidden!important;
    isolation:isolate!important;
    overscroll-behavior:auto!important;
  }
  .section.grouped .desktop-rail-window{
    --desktop-section-bg:var(--grouped);
  }

  /* Left runway is transparent only at the resting start so the first shadow
     can paint. Once the row has moved, it becomes the hard left clipping edge. */
  .desktop-rail-window::before{
    content:"";
    position:absolute;
    z-index:22;
    left:0;
    top:0;
    bottom:0;
    width:var(--desktop-shadow-runway);
    pointer-events:none;
    opacity:0;
    background:var(--desktop-section-bg);
    transition:opacity 100ms linear;
  }
  .desktop-rail-window.is-scrolled-x::before{
    opacity:1;
  }

  /* The child itself fades to zero alpha at the exact clipping boundary. The
     matching blur overlay occupies the same zone, so there is no second hard
     vertical line after the fade. */
  .desktop-rail-window::after{
    content:"";
    position:absolute;
    z-index:20;
    top:0;
    right:0;
    bottom:0;
    width:var(--desktop-rail-blur);
    pointer-events:none;
    background:rgba(255,255,255,.006);
    -webkit-backdrop-filter:blur(8px) saturate(104%);
    backdrop-filter:blur(8px) saturate(104%);
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.12) 28%,
      rgba(0,0,0,.55) 66%,
      #000 100%);
    mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.12) 28%,
      rgba(0,0,0,.55) 66%,
      #000 100%);
  }
  html[data-theme="dark"] .desktop-rail-window::after{
    background:rgba(13,15,19,.008);
  }

  .desktop-rail-window>:is(.scroll-row,.skills-infinite-row,.curated-links-row,#skillsInfiniteRow,#curatedLinksRow){
    box-sizing:border-box!important;
    position:relative!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-top:18px!important;
    padding-right:calc(var(--desktop-rail-blur) + 34px)!important;
    padding-bottom:30px!important;
    padding-left:var(--desktop-shadow-runway)!important;
    scroll-padding-left:var(--desktop-shadow-runway)!important;
    scroll-padding-right:calc(var(--desktop-rail-blur) + 34px)!important;
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    overflow-x:hidden!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
    overscroll-behavior:auto!important;
    scroll-snap-type:none!important;
    touch-action:auto!important;
    cursor:grab!important;
    user-select:none!important;
    -webkit-user-select:none!important;
    -webkit-mask-image:linear-gradient(90deg,
      #000 0%,
      #000 calc(100% - 108px),
      rgba(0,0,0,.94) calc(100% - 86px),
      rgba(0,0,0,.62) calc(100% - 50px),
      rgba(0,0,0,.22) calc(100% - 18px),
      transparent 100%);
    mask-image:linear-gradient(90deg,
      #000 0%,
      #000 calc(100% - 108px),
      rgba(0,0,0,.94) calc(100% - 86px),
      rgba(0,0,0,.62) calc(100% - 50px),
      rgba(0,0,0,.22) calc(100% - 18px),
      transparent 100%);
  }
  .desktop-rail-window>:is(.scroll-row,.skills-infinite-row,.curated-links-row,#skillsInfiniteRow,#curatedLinksRow)::-webkit-scrollbar{
    display:none!important;
    width:0!important;
    height:0!important;
  }
  .desktop-rail-window>:is(.scroll-row,.skills-infinite-row,.curated-links-row,#skillsInfiniteRow,#curatedLinksRow)>*{
    scroll-snap-align:none!important;
    scroll-snap-stop:normal!important;
  }
  .desktop-rail-window>.scroll-row::after{
    flex-basis:0!important;
    width:0!important;
  }
  .desktop-rail-window>:is(.scroll-row,.skills-infinite-row,.curated-links-row,#skillsInfiniteRow,#curatedLinksRow),
  .desktop-rail-window>:is(.scroll-row,.skills-infinite-row,.curated-links-row,#skillsInfiniteRow,#curatedLinksRow) *{
    user-select:none!important;
    -webkit-user-select:none!important;
  }
  .desktop-rail-window>:is(.scroll-row,.skills-infinite-row,.curated-links-row,#skillsInfiniteRow,#curatedLinksRow) :is(a,img){
    -webkit-user-drag:none!important;
  }
  .desktop-rail-window>:is(.scroll-row,.skills-infinite-row,.curated-links-row,#skillsInfiniteRow,#curatedLinksRow).is-desktop-dragging{
    cursor:grabbing!important;
  }

  /* Practical-work cards: stable desktop proportions. */
  .desktop-rail-window .skill-card--media{
    flex:0 0 320px!important;
    width:320px!important;
    min-width:320px!important;
    height:auto!important;
    min-height:0!important;
  }
  .desktop-rail-window .skill-card--media .skill-card__body{
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
  }
  .desktop-rail-window .skill-card--media .skill-card__video-slot{
    min-width:0!important;
    min-height:104px!important;
  }
  .desktop-rail-window .skill-video-card--mini,
  .desktop-rail-window .skill-video-card--matched{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:88px minmax(0,1fr) 40px!important;
  }
  .desktop-rail-window .skill-video-card--mini .skill-video-card__copy,
  .desktop-rail-window .skill-video-card--matched .skill-video-card__copy{
    min-width:0!important;
    overflow:hidden!important;
  }
  .desktop-rail-window .skill-video-card--discover{
    flex:0 0 304px!important;
    width:304px!important;
    min-width:304px!important;
  }

  /* 12-month profit cards: keep values intact and columns stable. */
  .desktop-rail-window .phase-card{
    flex:0 0 270px!important;
    width:270px!important;
    min-width:270px!important;
    height:auto!important;
  }
  .desktop-rail-window .phase-card .metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .desktop-rail-window .phase-card .metric-card{
    min-width:0!important;
    padding:.76rem .7rem!important;
  }
  .desktop-rail-window .phase-card .metric-card b{
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    word-break:keep-all!important;
    font-size:14px!important;
  }
  .desktop-rail-window .phase-card p{
    overflow-wrap:break-word!important;
    word-break:keep-all!important;
  }
}