:root {
  --color-primary: #000;
  --color-primary-quarter: #444444;
  --color-primary-half-invert: #888888;
  --color-primary-quarter-invert: #cccccc;
  --color-primary-invert: #fff;
  --color-emphasis: #006400;
  --color-accent: #f5f5f5;
  --color-accent-twist: #fffafa;
  --color-accent-option: rgba(208, 255, 255, 0.5);
  --color-accent-invert: #444;
  --color-accent-hover: #aaaaaa;
  --color-warning: #ffaa00;
  --color-error: #ff0000;
  --color-option-light-green-30: rgba(190, 250, 150, 0.3);
  --color-option-light-yellow-30: rgba(250, 250, 150, 0.3);
  
  --barelybold: 500;
  --kindabold: 600;
  --bold: 700;
  --bolder: 800;
  --boldest: 900;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #ffffff;
    --color-primary-quarter: #cccccc;
    --color-primary-half-invert: #888888;
    --color-primary-quarter-invert: #444444;
    --color-primary-invert: #000000;
    --color-accent: #323232;
    --color-accent-twist: #464646;
    --color-accent-option: rgba(208, 255, 255, 0.33);
    --color-option-light-green-30: rgba(190, 250, 150, 0.33);
    --color-option-light-yellow-30: rgba(250, 250, 150, 0.33);
  }

  html, body {
    background-color: var(--color-primary-invert);
    color: var(--color-primary);
  }
  
  a.navLeft, a.navLeft:link, a.navLeft:visited,
  a.navRight, a.navRight:link, a.navRight:visited {
    background-color: var(--color-primary-half-invert) !important;
    color: var(--color-primary-invert) !important;

  }

  a.navLeft:hover, a.navLeft:active, a.navLeft:focus,
  a.navRight:hover, a.navRight:active, a.navRight:focus{
    background-color: var(--color-primary-invert) !important;
    color: var(--color-primary) !important;
  }
  
  .timeElt > .timeString:nth-of-type(2) {
    color: var(--color-primary) !important;
  }
}

html, body {
	margin: 0;
	font-family: "Inter", "Trebuchet MS", "Helvetica Neue", "Arial", sans-serif;
	font-display: swap;
}

nav {
	z-index: 100;
	position: fixed;
	width: 100%;
}

#menufix {
	display: inline-block;
	position: relative;
	z-index: 0;
	overflow: hidden;
	justify-content: flex-end;
}

#navButton {
  flex-grow: 0;
}

.off {
	color: var(--color-accent-invert);
}

.on {
	color: var(--color-primary) !important;
}

.hidden, .hidden a{
	flex: 0 !important;
	white-space: nowrap;
	width: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: hidden;
}

.displayNone {
  display: none !important;
}

.deactivate {
	visibility: hidden;
}

.promo-header {
  padding: 1vw;
  background-color: var(--color-accent);
  min-width: 90%;
  flex-grow: 100000;
  text-align: center;
  /* Congrats you found this easter egg! (Chrome is about 200ms off in animating children elements, so delay the parent by ~0.2s)*/
  animation: 3s ease-in-out 0.18s infinite alternate-reverse none running promoAnimation;
}

.promo-header a {
  animation: 3s ease-in-out 0s infinite alternate-reverse none running promoAnimation;
}

@keyframes promoAnimation {
  0% {background-color: var(--color-primary); color: var(--color-accent)}
  100% {background-color: var(--color-accent); color: var(--color-primary)}
}
	


/* Nav Bar CSS */
#navList {
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-style: none;
	display: flex; 
	justify-content: flex-end;
	width: 100%;
	max-height: 100%;
	flex-direction: row;
  flex-wrap: wrap;
}


#navRightFlex {
	display: flex;
	justify-content: flex-end;
	max-height: 100%;
  flex-wrap: wrap;
}

@media only screen and (max-width: 600px) {
  .mobile-growable {
    flex-grow: 1;
  }
}

.growable {
  flex-grow: 1;
}

.growable.no-grow {
  flex-grow: 0;
}

.navRight.hideable:nth-child(1) {
  flex-grow: 100000;
}

.navRight.hideable {
  flex-grow: 1;
}

/* Align Left Elements */
a.navLeft {
	float: left;
	flex-grow: 100;
	transition-duration: 0.25s;
	user-select: none;
}

a.navLeft, a.navLeft:link, a.navLeft:visited{
	text-decoration: none;
	background-color: var(--color-primary);
	color: var(--color-primary-invert);
	padding: 1vw;
	max-height: 100%;
}

a.navLeft:hover, a.navLeft:active, a.navLeft:focus{
	text-decoration: none;
	background-color: var(--color-primary-invert);
	color: var(--color-primary);
	padding: 1vw;
  animation: none;
}

a.navRight, a.navRight:link, a.navRight:visited{
	text-decoration: none;
	background-color: var(--color-primary);
	color: var(--color-primary-invert);
	padding: 1vw;
	transition-duration: 0.5s;
}

/* Align Right Elements */
a.navRight {
	float: right;
	transition-duration: 0.1s;
	max-height: 100%;
	user-select: none;
	text-align: end;
}

a.navRight:hover, a.navRight:active, a.navRight:focus{
	text-decoration: none;
	background-color: var(--color-primary-invert);
	color: var(--color-primary);
	padding: 1vw;
  animation: none;
}

.text-hidden {
	white-space: nowrap;
	overflow: hidden;
	float: right !important;
}

div.containedFlex {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}

.containedFlex .subtext {
  width: 100%;
}


footer {
	background-color: var(--color-primary);
	color: var(--color-primary-invert);
	text-align: center;
	padding: 1%;
	margin-bottom: 0px;
}

/* Generic Link Styling */
a, a:link, a:visited{
	text-decoration: none;
	color: var(--color-primary);
}

a:hover, a:active, a:focus{
	text-decoration: none;
	color: var(--color-accent-hover);
}

/* Line Link Button Styling */
a.project:link, a.project:visited{
	text-decoration: none;
  display:block;
}

.containedFlex a.project:hover, .containedFlex a.project:active, .containedFlex a.project:focus {
  transition-duration: 0.2s;
  animation: none;
  border: var(--color-accent-invert) solid 0.33em;
}

.lineLabel {
  text-align: center;
  font-weight: var(--bold);
  font-size: 2em;
  margin: -0.09375em 0em;
}

@keyframes mtaStatus {
	0% {border: solid 0.33em; border-color: #0a0 #fa0 #fa0 #0a0;}
	25% {border: solid 0.33em; border-color: #0a0 #0a0 #fa0 #fa0;}
	50% {border: solid 0.33em; border-color: #fa0 #0a0 #0a0 #fa0;}
  75% {border: solid 0.33em; border-color: #fa0 #fa0 #0a0 #0a0;}
	100% {border: solid 0.33em; border-color: #0a0 #fa0 #fa0 #0a0;}
}

@keyframes badStatus {
	0% {border: var(--color-accent) solid 0.33em;}
	75% {border: #fa0 solid 0.33em;}
  100% {border: #fa0 solid 0.33em;}
}

@keyframes worseStatus {
	0% {border: var(--color-accent) solid 0.33em;}
	75% {border: var(--color-error) solid 0.33em;}
	100% {border: var(--color-error) solid 0.33em;}
}

@-moz-document url-prefix() {
  .serviceStatus {
    padding: 0 .5em;
    margin: .25em;
  }
  .promo-header {
    animation-delay: 0.1s;
  }
}

_:-ms-lang(x), .serviceStatus {
  padding: 0 .5em;
  margin: .25em;
}

.serviceStatus {
  padding: 0 max(.5em, min(.66vw, .75vh));
	margin: min(.25em, .33vh);
  white-space: pre;
	border-radius: 2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
/*   max-width: fit-content; */
  min-width: 230px;
}

.serviceStatusMessageContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: fit-content;
  padding: 0.1em
}

.realDevsUseAndroid {
}

.serviceStatusNotOperating {
  border: var(--color-accent-invert) solid 0.33em;
}

.serviceStatusGood {
	border: #0a0 solid 0.33em;
}

.serviceStatusNormal {
  border: solid 0.33em;
  border-color: #fa0 #0a0;
	animation: 1s linear 0s infinite none running mtaStatus;
}

.serviceStatusNormal.noFlash {
  border: solid 0.33em;
  border-color: #0a0 #fa0 #fa0 #0a0;
	animation: none;
}

.serviceStatusIssue {
  border: #fa0 solid 0.33em;
	animation: 1s ease 0s infinite alternate-reverse none running badStatus;
}

.serviceStatusIssue.noFlash{
	border: #fa0 solid 0.33em;
	animation: none;
}

.serviceStatusManyIssues {
  border: #f00 solid 0.33em;
	animation: 0.5s ease 0s infinite alternate-reverse none running worseStatus;
}

.serviceStatusManyIssues.noFlash {
	border: #f00 solid 0.33em;
	animation: none;
}


.subtext {
	font-size: 0.75em;
	display: block;
}

.subtextFree {
	font-size: 0.66em;
	display: block;
  font-style: italic;
}

.fineprint {
	font-size: 0.5em;
}

.centerText {
	text-align: center;
}

.rightText {
	text-align: right;
}

.statusMessageContent {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.statusBlock {
  height: max-content;
  max-width: min(90vw, 480px);
  margin: 1em min(5vw, 24px);
  border-radius: 2em;
  background-color: var(--color-primary-quarter-invert);
}

.statusBlock:nth-child(2n) {
/* 	background-color: var(--color-accent-twist);; */
}

.statusBlock:nth-child(2n+1) {
/*   background-color: var(--color-accent);; */
}

.statusHeader {
  font-size: 1.1em;
  font-style: italic;
  margin-block-start: 0.25em;
  margin-block-end: 0.25em;
}

.statusShortDesc {
  font-size: 1.1em;
  font-weight: var(--bold);
  margin-block-start: 0.25em;
  margin-block-end: 0.25em;
}

.statusDetail {
  font-size: 1em;
  background-color: var(--color-accent);
  color: var(--color-primary);
  margin-block-start: 0em;
  margin-block-end: 0em;
  padding-block-start: 0.5em;
  padding-block-end: 0.5em;
  border-radius: 0 0 2em 2em;
}

.stopHeader {
	font-size: 1.2em;
	font-weight: var(--bolder);
}

.boroHeader {
  font-size: 1.2em;
  padding: 0.2em;
  font-weight: var(--boldest);
  max-width: min(100vw, 480px);
  margin: auto;
  text-decoration: underline wavy;
}

.skipped .stopHeader, .skipped .stopHeaderLight, .skipped .transfer, .skipped-transfer.transfer  {
  display: none;
}


.stopHeaderLight {
	font-size: 1em;
	font-style: italic;
  background-color: var(--color-accent-option);
  max-width: min(100vw, 480px);
  margin: auto;
}

.breakable {
  display: block !important;
  white-space: normal !important;
}

.mutexLine {
	display: flex;
  align-items: center;
/*   justify-content: center; */
  white-space: pre;
  flex-wrap: wrap;
}

.rightFlex {
  justify-content: flex-end;
}

.dir-n.icon, .dir-s.icon {
  font-size: 1.2em;
  margin-bottom: -0.25em;
  padding: 0 0.25em;
  margin: 0 0.25em;
  border-radius: 0.5em;
}

.dir-n.icon {
  background-color: var(--color-primary-quarter-invert);
  color: var(--color-primary-quarter);
}

.dir-s.icon {
  background-color: var(--color-primary-quarter);
  color: var(--color-primary-quarter-invert);
}

.dir-n, .dir-s {
  justify-content: center;
  align-items: center;
}

.timeElt {
  padding: 0 0.5em;
}

.footer {
	padding: 3vw;
    overflow: hidden;
    border-width: 0;
    border-style: solid;
    text-align: center;
}

.stop {
	display: flex;
	flex-direction: column;
  max-width: min(100vw, 480px);
  margin: auto;
}

.stop:nth-child(3n-1) {
	background-color: var(--color-accent-twist);;
}

.stop:nth-child(3n) {
  background-color: var(--color-accent);;
}

.reroute .stopHeader {
  background-color: rgba(255,100,0,0.3);
}

.reroute .tripContainer{
  background-color: rgba(255,100,0,0.025);
}

#warn {
  overflow: hidden;
}

#unsupportedWarning {
  background-color: var(--color-warning);
  border: 3px solid var(--color-error);
  margin: 1.5vh 3vw;
  padding: 5px;
  text-align: center;
  font-weight: var(--bolder);
}

.primary > .timeString {
  font-weight: var(--bold);
/*   background-color: var(--main-color); */
}

.transfer {
  font-size: 0.95em;
}

.timeElt.transfer > .timeString:nth-of-type(3) {
  background-color: var(--color-option-light-green-30);
  color: var(--color-primary);
  border-radius: 0.5em;
  padding: 0 0.25em;
}

.timeElt > .timeString:nth-of-type(3) {
  background-color: var(--color-emphasis);
  color: var(--color-primary-invert);
  border-radius: 0.5em;
  padding: 0 0.25em;
}

/* Base time string styles */
.timeString {
  color: var(--color-text);
  transition: all 0.2s ease;
  padding: 0.1em 0.3em;
  border-radius: 0.25em;
}

/* Selected trip styling (highest priority) */
.timeString.selected-trip {
  background-color: var(--color-warning) !important;
  color: var(--color-primary-invert) !important;
  border-radius: 0.5em;
  font-weight: var(--bold);
}

/* Estimated times styling */
.timeString[data-estimated="true"] {
  opacity: 0.7;
  font-style: italic;
  border: 1px dashed var(--color-primary-half-invert);
}

/* Selected trip overrides estimated styling */
.timeString.selected-trip[data-estimated="true"] {
  background-color: rgba(255, 170, 0, 0.5) !important;
  opacity: 1 !important;
  font-style: normal !important;
}

/* Estimated times - lighter yellow background */
.timeString[data-estimated="true"] {
  background-color: rgba(255, 235, 59, 0.3);
}

/* Hover states */
.timeString:hover {
  opacity: 0.8;
  transform: scale(1.02);
}

.timeString.selected-trip:hover {
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
}

@keyframes pulse-selected {
  0% {
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.9);
  }
  100% {
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
  }
}