div.journey {
    margin:0 auto;
    margin-top: 10px;
    width:100%;
}

.journeyEditContainer {
    padding-bottom:16px;
    padding-right:16px;
    text-align: right;
}
.journeyEditOption {
    background:white;
    display: inline-block;
    margin:8px;
    border-radius: 8px;
    padding:8px;
}
.journeyPathContainer {
    width:60%;display:inline-block;
}
.journeyPath {
    width: 100%; height: auto;overflow: visible;
    stroke-width:0.2;
    stroke:#d4ccff;
    stroke-dasharray:1,0.2;
}
.exerciseCircle {
    background: white;
    aspect-ratio: 1 / 1;
    height: 100%;
    border-radius: 100%;
    display: inline-block;
    position: relative;
    transform:translate(-50%);
    cursor: pointer;
    padding:4px;
    border:6px solid white;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.exerciseActivityImg {
  height: 48px;
  width: 48px;
  object-fit: contain;
  float: left;
  margin: -48px;
  left: 42px;
  position: relative;
  top: 55px;
}

/* The glyph tile that replaced the activity photo on an eActivity card. Same float, margin
   and offsets as .exerciseActivityImg above, so it lands on exactly the same pixel and the
   step overlay beside it does not move. The tile is 44px rather than the photo's 48 so its
   corner badge, which hangs a little past the tile edge, still sits inside the card. */
.exerciseActivityTile {
  float: left;
  margin: -48px;
  left: 42px;
  position: relative;
  top: 55px;
}
.journeyPath.lockedPath {
    stroke:var(--bia-accent);
}
.journeyPath.skippedPath {
    stroke:#9de2ce;
    stroke-dasharray:none;
}
.journeyPath.shadow-skippedPath {
    
}
.journeyPath.completePath {
    stroke:var(--bia-teal);
    stroke-dasharray:none;
}
.journeyPath.progressPath {
    stroke:#ffd393;
    stroke-dasharray:none;
}
.journeyPath.improvePath {
    stroke:#fb7179;
    stroke-dasharray:none;
}
.exerciseCircleStatus {
    border-radius: 16px;
    background: white;
}
.exerciseCircleStatus.complete {
    background: #e3f9f3;
}
.exerciseCircleStatus.scheduled {
    background: #d4ccff;
}
.exerciseCircleStatus.improve {
    background: #FFE3E4;
}
.exerciseCircleStatus.progress {
    background: #FFF4E3;
}
.exerciseCircleStatus.locked {
    background: #d4ccff;
}
.exerciseCircleStatus.skipped {
    background: #9de2ce;
}
.exerciseCircleStatus.shadow-skipped {
    
}

.exerciseCircle.lockedCircle {
    background: #d4ccff;
    border-color:#d4ccff;
    box-shadow: none;
}
.exerciseCircle.completeCircle {
    border-color:var(--bia-teal);
}
.exerciseCircle.scheduledCircle {
    border-color:#d4ccff;
}
.exerciseCircle.progressCircle {
    border-color:#ffd393;
}
.exerciseCircle.improveCircle {
    border-color:#fb7179;
}
.exerciseCircle.skippedCircle {
    border-color:#9de2ce;
}
.exerciseCircle.shadow-skippedCircle {
    
}
.exerciseCircleText {
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
.exerciseCircleImg {
    height:100%;
    width:100%;

}
.exerciseCircle:hover {
    
}
.exerciseCircle.left {
    transform:translate(-50%);
}
.exerciseCircle.right {
    transform:translate(50%);
}
.exerciseCircleContainer {
    height:8rem;
}
.exerciseCircleContainer.left {
    text-align: left;
    margin-left:20%;
}
.exerciseCircleContainer.right {
    text-align: right;
    margin-right:20%;
}
.pinnedDiv {
    background-color:rgba(255, 255, 255, 0.9);
    padding: 20px;
    width: 100%;
    position: sticky;
    top: 8px; /* 8px gap between the div and the top of the viewport */
    z-index: 10; /* Optional, ensures the div stays above other elements */
    border-radius: 16px;
}
.journeyChapterTitle {
    color: var(--bia-accent);
    font-size: 2rem;
    width: 50%;
    display: inline-block;
    text-align: center;
    position: relative;
    padding-top:32px;
    padding-bottom: 32px;
}

.todayEnd {
    color: var(--bia-accent);
    font-size: 2rem;
    width: 50%;
    display: inline-block;
    text-align: center;
    position: relative;
    padding-top:32px;
    padding-bottom: 32px;
}

.journeyChapterTitle::before, 
.journeyChapterTitle::after {
    content: '';
    position: absolute;
    top: 50%; /* Align the lines vertically in the middle */
    width: 30%; /* Width of the lines */
    height: 4px; /* Thickness of the lines */
    background-color: var(--bia-accent);
    transform: translateY(-50%); /* Center the lines vertically */
}

.journeyChapterTitle::before {
    left: -60px; /* Distance from the left edge */
}

.journeyChapterTitle::after {
    right: -60px; /* Distance from the right edge */
}

div.phaseDiv {
    margin-left: 5%;
    margin-right: 5%;
}

.todaySection {
    margin-top: 32px;
    width:100%; 
    display: inline-block;
}

div.next {
    border:1px solid black;
    width:80%;
    padding:10px;
    margin:0 auto;
    margin-top:5px;
}

div.phaseHeaderDiv {
    border-top:1px solid black;
    border-bottom:1px solid black;
    margin-top:0px;
    margin-bottom:5px;
    padding:5px;
    text-align:center;
}

div.endDiv {
    border-bottom:1px solid black;
    margin-top:0px;
    margin-bottom:5px;
    padding:5px;
    text-align:center;
}

span.phaseHeaderMore {
    float:right;
}

h3.phaseHeader {
    display:inline-block;
}

div.exerciseThumbnailContainer {
    display:inline-block;
    max-width:200px;
    vertical-align:top;
}

div.exerciseThumbnail {
    display: inline-block;
    border:1px solid black;
    margin:15px 35px 0px 35px;
    height:100px;
    width:100px;
    padding:10px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

div.exerciseThumbnailText {
    display: grid;
    height:100%;
    place-items: center;
}

div.exerciseThumbnail:hover {
    background-color:#DBEAFA;
}


div.levelDiv {
    text-align: center;
}

span.phaseHeaderMore {
    cursor: pointer;
}

span.phaseHeaderMore:hover {
    font-weight:bold;
}

.exerciseSquare.returnHighlight {
    box-shadow: 0 0 0 3px var(--bia-accent);
    transition: box-shadow 1.2s ease-out;
}

/* The games hub groups its cards into a row per chapter, the way the journey does. The page keeps
   one h1 at .phaseTitle size, so a group heading is a step down from it rather than a second one. */
h1.phaseTitle {
    margin: 0;
}

.gamesGroupTitle {
    padding-top: 40px;
    margin: 0 0 8px;
    display: block;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.2;
    color: var(--bia-fg);
}

/* Shown on a daily game that has already been played in this session, so the card answers "have I
   done today's puzzle?" without being opened. Text, not a color or an icon: the state has to survive
   high-contrast mode and be readable to a screen reader. */
.dailyPlayedChip {
    /* Absolutely positioned so it costs the card no height. As an in-flow block it pushed
       the card's content past its fixed 221px, and the games row (which does not clip its
       vertical overflow) answered with a scrollbar. As a badge it also stops shifting the
       title and image down relative to the non-daily cards beside it. */
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 2px 10px;
    border-radius: 50px;
    background: #e3f9f3;
    color: #1f5c4d;
    font-size: 12px;
    font-weight: 600;
}

.exerciseSquare.gameLockedCard {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #f3f0ff;
    padding: 16px;
}

.gameLockedIcon img {
    width: 56px;
    height: 56px;
    opacity: 0.7;
}

.gameLockedTitle {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bia-fg);
    line-height: 1.3;
    padding: 0 10px;
}

.gameLockedText {
    margin-top: 8px;
    font-size: 14px;
    color: #5b5874;
    line-height: 1.35;
    padding: 0 10px;
}

@media only screen and (max-width: 768px) {
.todaySection {
    width:100%;
}
.journeyPath {
    stroke-width:0.4;
    stroke-dasharray:1.2,0.5;
}
.container.smallFullWidth {
     margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: 100% !important;
  }
  .exerciseCircleContainer {
    height:5rem;
}
}