/*@font-face {*/
/*    font-family: 'Red Hat Display';*/
/*    src: url('path/to/RedHatDisplay-Regular.woff2') format('woff2'),*/
/*         url('path/to/RedHatDisplay-Regular.woff') format('woff');*/
/*    font-weight: 400;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: 'Red Hat Display';*/
/*    src: url('path/to/RedHatDisplay-Medium.woff2') format('woff2'),*/
/*         url('path/to/RedHatDisplay-Medium.woff') format('woff');*/
/*    font-weight: 500;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: 'Red Hat Display';*/
/*    src: url('path/to/RedHatDisplay-Bold.woff2') format('woff2'),*/
/*         url('path/to/RedHatDisplay-Bold.woff') format('woff');*/
/*    font-weight: 700;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: 'Red Hat Display';*/
/*    src: url('path/to/RedHatDisplay-Black.woff2') format('woff2'),*/
/*         url('path/to/RedHatDisplay-Black.woff') format('woff');*/
/*    font-weight: 900;*/
/*    font-style: normal;*/
/*}*/

/*body {*/
/*    font-family: 'Red Hat Display', sans-serif;*/
/*}*/

:root{
  --bg:#F9FAF5;
  --white: #FFFFFF;
  --pill:#FEF37A;
  --underline:#FF7000; /* date underline */
  --active:#001119;     /* active date text green */
  --muted:#7C8073;
}

*{ box-sizing:border-box; }
/*body{*/
/*  margin:0;*/
/*  padding-left: 6%;*/
/*  padding-right: 6%;*/
/*  background:var(--bg);*/
/*  color:#111;*/
/*  text-align:center;*/
/*  padding-top: 30px;*/
/*  padding-bottom: 100px;*/
/*}*/

/* --- Month heading (dropdown) --- */
.page-header{ max-width:100%; }
.month-heading{
  display:inline-flex; align-items:center; gap:6px; position:relative;
  font-size:24px; font-weight:550; line-height:38px;
}
.month-heading select{
  appearance:none; border:0; background:transparent; padding-right:15px;
  font:inherit; text-align:center; cursor:pointer; outline:none;
}
.month-heading .chevron{
  position:absolute; right:1px; top:50%; transform:translateY(-50%);
  font-size:.9em; opacity:.8; pointer-events:none;
}

/* --- Week slider --- */
.date-slider{
  max-width:100%; margin-top:20px; background:var(--white);
  border-radius:100px; border: 1px solid #E5E5E4;
  display:flex; width: 100%; gap: 20px; justify-content: space-between;  align-items:center;  padding-left: 8px; padding-right: 8px;
}
.arrow{
  width:40px; height:40px; border-radius:50%; border:0;
  background:var(--pill); display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer;
}
.arrow[disabled]{ opacity:.45; cursor:not-allowed; }

.dates{
  display:flex; width: 90%; justify-content:space-between; gap:20px; overflow:hidden;
}

/* Date button */
.date{
  width: 100%; position:relative; border:0; background:transparent;
  font-size:16px; line-height:21px; cursor:pointer; padding: 16px;
  white-space:nowrap; color: #7C8073;
}

.date .weekday{ margin-right:1px; }
.date:hover{ background:#FFFFFF; }
.date.active{ color:var(--active); font-weight:700; }
.date.active::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); top:49.5px;
  width:100%; height:3px; background:var(--underline);
}
.date.disabled{ color:#7C8073; cursor:not-allowed; }
.date.disabled:hover{ background:transparent; }
.date .dot{
  width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:8px;
}

/* Selected line */
.selected-text{ margin: 0; padding-top: 20px; font-weight: 500; font-size:14px; line-height: 19px; color:#7C8073; }
.muted{ color:var(--muted); }

/* ---------- CHART AREA (visuals tuned to your screenshot) ---------- */
.chart-area{
  max-width:100%; margin: 0px; text-align:left;
}

/* Section headings with faint divider */
.dir{ margin: 0px; }
.dir-title{
  display:flex; align-items:center; gap:12px; margin-top: 40px; margin-bottom: 15px;
  font-weight:600; font-size: 18px; line-height: 22px; color:#003D29; /* slight green tint */
}
.dir-title::after{
  content:""; flex:1; height:1px; background:#E5E5E4; /* pale greenish gray */
}

/* Service "pill" card */
.service { margin-top: 16px; }
.pill{
  display:flex; align-items:center; justify-content: space-between; gap:20px;
  background:#FFFFFF;
  border:1px solid #E5E5E4;     /* soft border */
  border-radius:12px;
  padding:14px 16px;
}

.start {
  display:flex; flex-direction:column; gap:8px; align-items: start;
}
.end {
  display:flex; flex-direction:column; gap:8px; align-items: end;
}
.station{
  font-weight:700; font-size: 14px; line-height: 17px; color: #FF7000;   /* orange station names */
}
.start .time,.end .time{
  font-weight:500; font-size: 16px; line-height: 19px; color: #001119; 
}

.mid {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}

.mid .name{ font-weight:500; font-size: 14px; line-height: 17px; color: #FF7000; }
.mid .time{ font-weight:400; font-size: 16px; line-height: 19px; color: #001119; }

/* A flexible connector that expands to fill available space */
.flow-arrow{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 15px;             /* ensures visibility on narrow screens */
}

/* The line portion (stretches) */
.flow-arrow::before{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #CED5D9;         /* matches text color for cohesion */
}

/* The right-pointing arrowhead */
.flow-arrow::after{
  content: "";
  border-left: 8px solid #CED5D9;   /* arrow color */
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}