@charset "utf-8";
/* CSS Document */
 :root{
    /* tweak colors here */
     --midnight:#032044;
     --accessible-orange:#D3430D;
     --talavera-blue:#265BF7;
     --river-mist: #C8DCFF;
     --smoke:#D5CFC8;
     --gold:#F2C80F;
     --bubble-radius:18px;
}
 body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
     margin: 0;
     color:#121212;
}
 .timeline{
     display: flex;
     gap: 12px;
    /* space between bubbles */
     align-items: flex-start;
     flex-wrap: wrap;
     justify-content: center;
     padding: 0;
    /* Remove left/right padding */
     margin: 0;
    /* Remove extra margin */
}
 .milestone{
     flex: 0 0 auto;
     width: 150px;
    /* Smaller bubble width */
     max-width: 100%;
     margin: 0;
    /* Remove extra margin around milestones */
}
/* The colored “bubble” */
 .label{
     position: relative;
     padding: 12px 14px;
    /* Reduced padding */
     border-radius: var(--bubble-radius);
     color: #fff;
     text-align: center;
     font-weight: 700;
     font-size: 0.95rem;
    /* Slightly smaller text */
     line-height: 1.25;
     box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 8px rgba(0,0,0,.08);
}
/* The downward triangle */
 .label::after{
     content:"";
     position:absolute;
     left:50%;
     transform:translateX(-50%);
     bottom:-12px;
     width:0;
     height:0;
     border-left:12px solid transparent;
     border-right:12px solid transparent;
     border-top:12px solid currentColor;
    /* default, overridden by background via mask below */
}
/* Make the triangle match the background color exactly */
 .label.midnight{
     background:var(--midnight);
     color:#fff;
}
 .label.midnight::after{
     border-top-color:var(--midnight);
}
 .label.accessible-orange{
     background:var(--accessible-orange);
     color:#fff;
}
 .label.accessible-orange::after{
     border-top-color:var(--accessible-orange);
}
 .label.talavera-blue{
     background:var(--talavera-blue);
     color:#fff;
}
 .label.talavera-blue::after{
     border-top-color:var(--talavera-blue);
}
 .label.river-mist{
     background:var(--river-mist);
     color:#000;
}
/* black text for contrast like your mock */
 .label.river-mist::after{
     border-top-color:var(--river-mist);
}
 .label.smoke{
     background:var(--smoke);
     color:#000;
}
/* black text for contrast like your mock */
 .label.smoke::after{
     border-top-color:var(--smoke);
}
 .label.gold{
     background:var(--gold);
     color:#000;
}
/* black text for contrast like your mock */
 .label.gold::after{
     border-top-color:var(--gold);
}
/* Content below each bubble */
 .body{
     margin-top: 14px;
    /* Reduced from 22px */
     font-size: 0.85rem;
     line-height: 1.4;
     text-align: center;
     font-weight: bold;
}
/* Optional: keep the three bubbles visually similar in height on wide screens */
 @media (min-width:900px){
     .label{
         min-height: 44px;
        /* Smaller height */
         display: flex;
         align-items: center;
         justify-content: center;
    }
}